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.

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