Graph | Grafana documentation

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.

Documentation

Grafana documentation

API Reference

@grafana/ui

Graph

Enterprise Open source

Graph class

This is a react wrapper for the angular, flot based graph visualization. Rather than using this component, you should use the `<PanelRender …/> with timeseries panel configs.

Signature

export declare class Graph extends PureComponent<GraphProps, GraphState>

Import

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

Properties

Property	Modifiers	Type
$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

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
draw()
getYAxes(series)
render()

$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; }[]