The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
grafana/docs/sources/packages_api/ui/graph.md

6.0 KiB

+++

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

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

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

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

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