Documentation for automated readers
A curated documentation index is available at: https://grafana.com/llms.txt
A complete documentation index is available at: https://grafana.com/llms-full.txt
These indexes can help with page discovery before fetching individual documents.
This page is also available in Markdown, which may be easier for automated readers and AI tools to parse than HTML. The Markdown version is available at https://grafana.com/docs/grafana/v8.0/packages_api/ui/graph.md, or by sending Accept: text/markdown to https://grafana.com/docs/grafana/v8.0/packages_api/ui/graph/. For broader documentation discovery, the curated index is available at https://grafana.com/llms.txt and the complete index is available at https://grafana.com/llms-full.txt.
Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.
Graph class
Signature
export declare class Graph extends PureComponent<GraphProps, GraphState> Import
import { Graph } from '@grafana/ui';Properties
| Property | Modifiers | Type | Description |
|---|---|---|---|
| $element | any | ||
| defaultProps | static | {showLines: boolean;showPoints: boolean;showBars: boolean;isStacked: boolean;lineWidth: number;} | |
| element | HTMLElement | null | ||
| getBarWidth | () => number | ||
| onPlotClick | (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void | ||
| onPlotHover | (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void | ||
| onPlotSelected | (event: JQueryEventObject, ranges: {xaxis: {from: number;to: number;};}) => void | ||
| renderContextMenu | () => JSX.Element | null | ||
| renderTooltip | () => React.ReactElement<VizTooltipProps, string | React.JSXElementConstructor<any>> | null | ||
| state | GraphState |
Methods
$element property
Signature
$element: any;defaultProps property
Signature
static defaultProps: {
showLines: boolean;
showPoints: boolean;
showBars: boolean;
isStacked: boolean;
lineWidth: number;
};element property
Signature
element: HTMLElement | null;getBarWidth property
Signature
getBarWidth: () => number;onPlotClick property
Signature
onPlotClick: (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;onPlotHover property
Signature
onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;onPlotSelected property
Signature
onPlotSelected: (event: JQueryEventObject, ranges: {
xaxis: {
from: number;
to: number;
};
}) => void;renderContextMenu property
Signature
renderContextMenu: () => JSX.Element | null;renderTooltip property
Signature
renderTooltip: () => React.ReactElement<VizTooltipProps, string | React.JSXElementConstructor<any>> | null;state property
Signature
state: GraphState;componentDidMount method
Signature
componentDidMount(): void;Returns:
void
componentDidUpdate method
Signature
componentDidUpdate(prevProps: GraphProps, prevState: GraphState): void;Parameters
| Parameter | Type | Description |
|---|---|---|
| prevProps | GraphProps | |
| prevState | GraphState |
Returns:
void
componentWillUnmount method
Signature
componentWillUnmount(): void;Returns:
void
draw method
Signature
draw(): void;Returns:
void
getYAxes method
Signature
getYAxes(series: GraphSeriesXY[]): {
show: boolean;
index: number;
position: string;
min: number | null | undefined;
tickDecimals: number | null | undefined;
}[] | {
show: boolean;
min: number;
max: number;
}[];Parameters
| Parameter | Type | Description |
|---|---|---|
| series | GraphSeriesXY[] |
Returns:
{
show: boolean;
index: number;
position: string;
min: number | null | undefined;
tickDecimals: number | null | undefined;
}[] | {
show: boolean;
min: number;
max: number;
}[]
render method
Signature
render(): JSX.Element;Returns:
JSX.Element