+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "Graph"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++

## Graph class

<b>Signature</b>

```typescript
export declare class Graph extends PureComponent<GraphProps, GraphState> 
```
<b>Import</b>

```typescript
import { Graph } from '@grafana/ui';
```
<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [$element](#_element-property) |  | <code>any</code> |  |
|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>{</code><br/><code>        showLines: boolean;</code><br/><code>        showPoints: boolean;</code><br/><code>        showBars: boolean;</code><br/><code>        isStacked: boolean;</code><br/><code>        lineWidth: number;</code><br/><code>    }</code> |  |
|  [element](#element-property) |  | <code>HTMLElement &#124; null</code> |  |
|  [getBarWidth](#getbarwidth-property) |  | <code>() =&gt; number</code> |  |
|  [onPlotClick](#onplotclick-property) |  | <code>(event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem&lt;GraphSeriesXY&gt; &#124; undefined) =&gt; void</code> |  |
|  [onPlotHover](#onplothover-property) |  | <code>(event: JQueryEventObject, pos: FlotPosition, item?: FlotItem&lt;GraphSeriesXY&gt; &#124; undefined) =&gt; void</code> |  |
|  [onPlotSelected](#onplotselected-property) |  | <code>(event: JQueryEventObject, ranges: {</code><br/><code>        xaxis: {</code><br/><code>            from: number;</code><br/><code>            to: number;</code><br/><code>        };</code><br/><code>    }) =&gt; void</code> |  |
|  [renderContextMenu](#rendercontextmenu-property) |  | <code>() =&gt; JSX.Element &#124; null</code> |  |
|  [renderTooltip](#rendertooltip-property) |  | <code>() =&gt; React.ReactElement&lt;TooltipProps, string &#124; ((props: any) =&gt; React.ReactElement&lt;any, string &#124; any &#124; (new (props: any) =&gt; React.Component&lt;any, any, any&gt;)&gt; &#124; null) &#124; (new (props: any) =&gt; React.Component&lt;any, any, any&gt;)&gt; &#124; null</code> |  |
|  [state](#state-property) |  | <code>GraphState</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [componentDidMount()](#componentdidmount-method) |  |  |
|  [componentDidUpdate(prevProps, prevState)](#componentdidupdate-method) |  |  |
|  [componentWillUnmount()](#componentwillunmount-method) |  |  |
|  [draw()](#draw-method) |  |  |
|  [getYAxes(series)](#getyaxes-method) |  |  |
|  [render()](#render-method) |  |  |

### $element property

<b>Signature</b>

```typescript
$element: any;
```

### defaultProps property

<b>Signature</b>

```typescript
static defaultProps: {
        showLines: boolean;
        showPoints: boolean;
        showBars: boolean;
        isStacked: boolean;
        lineWidth: number;
    };
```

### element property

<b>Signature</b>

```typescript
element: HTMLElement | null;
```

### getBarWidth property

<b>Signature</b>

```typescript
getBarWidth: () => number;
```

### onPlotClick property

<b>Signature</b>

```typescript
onPlotClick: (event: JQueryEventObject, contextPos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;
```

### onPlotHover property

<b>Signature</b>

```typescript
onPlotHover: (event: JQueryEventObject, pos: FlotPosition, item?: FlotItem<GraphSeriesXY> | undefined) => void;
```

### onPlotSelected property

<b>Signature</b>

```typescript
onPlotSelected: (event: JQueryEventObject, ranges: {
        xaxis: {
            from: number;
            to: number;
        };
    }) => void;
```

### renderContextMenu property

<b>Signature</b>

```typescript
renderContextMenu: () => JSX.Element | null;
```

### renderTooltip property

<b>Signature</b>

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

<b>Signature</b>

```typescript
state: GraphState;
```

### componentDidMount method

<b>Signature</b>

```typescript
componentDidMount(): void;
```
<b>Returns:</b>

`void`

### componentDidUpdate method

<b>Signature</b>

```typescript
componentDidUpdate(prevProps: GraphProps, prevState: GraphState): void;
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  prevProps | <code>GraphProps</code> |  |
|  prevState | <code>GraphState</code> |  |

<b>Returns:</b>

`void`

### componentWillUnmount method

<b>Signature</b>

```typescript
componentWillUnmount(): void;
```
<b>Returns:</b>

`void`

### draw method

<b>Signature</b>

```typescript
draw(): void;
```
<b>Returns:</b>

`void`

### getYAxes method

<b>Signature</b>

```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;
    }[];
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  series | <code>GraphSeriesXY[]</code> |  |

<b>Returns:</b>

`{
        show: boolean;
        index: number;
        position: string;
        min: import("@grafana/data").DecimalCount;
        tickDecimals: import("@grafana/data").DecimalCount;
    }[] | {
        show: boolean;
        min: number;
        max: number;
    }[]`

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`