Menu

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.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/uibreadcrumb arrow Graph
Enterprise Open source

Graph class

Signature

typescript 
export declare class Graph extends PureComponent<GraphProps, GraphState>

Import

typescript 
import { Graph } from '@grafana/ui';

Properties

PropertyModifiersTypeDescription
$elementany
defaultPropsstatic{
showLines: boolean;
showPoints: boolean;
showBars: boolean;
isStacked: boolean;
lineWidth: number;
}
elementHTMLElement | 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<TooltipProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null
stateGraphState

Methods

MethodModifiersDescription
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
draw()
getYAxes(series)
render()

$element property

Signature

typescript 
$element: any;

defaultProps property

Signature

typescript 
static defaultProps: {
        showLines: boolean;
        showPoints: boolean;
        showBars: boolean;
        isStacked: boolean;
        lineWidth: number;
    };

element property

Signature

typescript 
element: HTMLElement | null;

getBarWidth property

Signature

typescript 
getBarWidth: () => number;

onPlotClick property

Signature

typescript 
onPlotClick: (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotHover property

Signature

typescript 
onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;

onPlotSelected property

Signature

typescript 
onPlotSelected: (event: JQueryEventObject, ranges: {
        xaxis: {
            from: number;
            to: number;
        };
    }) => void;

renderContextMenu property

Signature

typescript 
renderContextMenu: () => JSX.Element | null;

renderTooltip property

Signature

typescript 
renderTooltip: () => React.ReactElement<TooltipProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;

state property

Signature

typescript 
state: GraphState;

componentDidMount method

Signature

typescript 
componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

typescript 
componentDidUpdate(prevProps: GraphProps, prevState: GraphState): void;

Parameters

ParameterTypeDescription
prevPropsGraphProps
prevStateGraphState

Returns:

void

componentWillUnmount method

Signature

typescript 
componentWillUnmount(): void;

Returns:

void

draw method

Signature

typescript 
draw(): void;

Returns:

void

getYAxes method

Signature

typescript 
getYAxes(series: GraphSeriesXY[]): {
        show: boolean;
        index: number;
        position: string;
        min: import("@grafana/data").DecimalCount;
        tickDecimals: import("@grafana/data").DecimalCount;
    }[] | {
        show: boolean;
        min: number;
        max: number;
    }[];

Parameters

ParameterTypeDescription
seriesGraphSeriesXY[]

Returns:

{ show: boolean; index: number; position: string; min: import("@grafana/data").DecimalCount; tickDecimals: import("@grafana/data").DecimalCount; }[] | { show: boolean; min: number; max: number; }[]

render method

Signature

typescript 
render(): JSX.Element;

Returns:

JSX.Element