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

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>) => void;

onPlotHover property

Signature

onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY>) => 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

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

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