grafana/docs/sources/packages_api/ui/graph.md

+++

-----------------------------------------------------------------------

Do not edit this file. It is automatically generated by API Documenter.

-----------------------------------------------------------------------

title = "Graph" keywords = ["grafana","documentation","sdk","@grafana/ui"] type = "docs" +++

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<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		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<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

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: import("@grafana/data").DecimalCount;
        tickDecimals: import("@grafana/data").DecimalCount;
    }[] | {
        show: boolean;
        min: number;
        max: number;
    }[];

Parameters

Parameter	Type	Description
series	GraphSeriesXY[]

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

render(): JSX.Element;

Returns:

JSX.Element