---
title: "Linear Gauge"
framework: react
version: "14.1.0"
---

# Linear Gauge

A Linear Gauge presents a single data point within a predefined range along a scale. The data is represented by a bar indicating the value.

## Simple Linear Gauge

#### Simple Linear Gauge

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    value: 80,
    scale: {
      min: 0,
      max: 100,
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Linear Gauge](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/simple-linear-gauge)

To create a Linear Gauge, use the `<AgGauge />` component with the type `linear-gauge`.

```jsx
const [options, setOptions] = useState({
    type: 'linear-gauge',
    value: 80,
    scale: {
        min: 0,
        max: 100,
    },
});

return <AgGauge options={options} />;
```

In this configuration:

- `value` is the value displayed by the gauge.
- `scale.min` defines the minimum value of the scale.
- `scale.max` defines the maximum value of the scale.
- The data is represented by a coloured bar displayed over a grey scale.

## Horizontal Linear Gauge

#### Horizontal Linear Gauge

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",
    direction: "horizontal",

    value: 80,
    scale: {
      min: 0,
      max: 100,
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Horizontal Linear Gauge](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/horizontal-linear-gauge)

To create a Horizontal Linear Gauge, set `direction: 'horizontal'`.

```js
{
    direction: 'horizontal',
}
```

## Customisation

### Thickness

#### Thickness

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",
    direction: "horizontal",

    value: 80,
    thickness: 100,
    bar: {
      thickness: 50,
    },
    scale: {
      min: 0,
      max: 100,
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Thickness](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/thickness)

```js
{
    thickness: 100,
    bar: {
        thickness: 50,
    },
}
```

In the above configuration:

- The thickness of the scale is specified as 100 pixels.
- The thickness of the bar is specified as 50 pixels.
- It is also possible to use `thicknessRatio` to specify the width of the bar as a proportion of the scale.

### Labels

A label can be configured with the `label` property.

#### Labels

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeLabelPlacement,
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import clone from "clone";

const placementColors: Record<AgLinearGaugeLabelPlacement, string> = {
  "inside-start": "white",
  "outside-start": "#888",
  "inside-end": "#888",
  "outside-end": "#888",
  "inside-center": "white",
  "bar-inside": "white",
  "bar-inside-end": "white",
  "bar-outside-end": "#888",
  "bar-end": "white",
};
ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    value: 50,
    scale: {
      min: 0,
      max: 100,
      label: {
        enabled: false,
      },
    },
    label: {
      enabled: true,
      placement: "inside-start",
      avoidCollisions: true,
    },
  });

  const setLabelPlacement = (placement: AgLinearGaugeLabelPlacement) => {
    const nextOptions = clone(options);

    nextOptions.label!.placement = placement;
    nextOptions.label!.color = placementColors[placement];

    setOptions(nextOptions);
  };

  const setAvoidCollisions = (avoidCollisions: boolean) => {
    const nextOptions = clone(options);

    nextOptions.label!.avoidCollisions = avoidCollisions;

    setOptions(nextOptions);
  };

  const setValue = (value: string) => {
    const nextOptions = clone(options);

    document.getElementById("gaugeValueLabel")!.innerHTML = value;
    nextOptions.value = Number(value);

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Placement:
          <select
            className="gap-right"
            onChange={(event) => setLabelPlacement(event.target.value)}
          >
            <option value="inside-start">Inside Start</option>
            <option value="outside-start">Outside Start</option>
            <option value="inside-end">Inside End</option>
            <option value="outside-end">Outside End</option>
            <option value="inside-center">Inside Center</option>
            <option value="bar-inside">Bar Inside</option>
            <option value="bar-inside-end">Bar Inside End</option>
            <option value="bar-outside-end">Bar Outside End</option>
            <option value="bar-end">Bar End</option>
          </select>
          Avoid Collisions:
          <select
            className="gap-right"
            onChange={(event) =>
              setAvoidCollisions(event.target.value === "on")
            }
          >
            <option value="on">On</option>
            <option value="off">Off</option>
          </select>
          Value:
          <input
            type="range"
            id="gaugeValue"
            min="0"
            max="100"
            defaultValue="50"
            onInput={(event) => setValue(event.target.value)}
            onChange={(event) => setValue(event.target.value)}
          />
          <span id="gaugeValueLabel">50</span>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Labels](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/labels)

```js
{
    label: {
        enabled: true,
        placement: 'inside-start',
        avoidCollisions: true,
    },
    scale: {
        label: {
            enabled: false,
        },
    },
}
```

In this configuration:

- The label placement in relation to the gauge is configured by the `placement` property.
- The label is configured to avoid simultaneously overlapping the bar and scale with the `avoidCollisions` property.
- The scale labels are hidden using the `scale.label.enabled` option. See the [API Reference](#api-reference) for more details about customising the scale label style and interval.

### Segmentation

To split the gauge into segments, set `segmentation.enabled` to `true`.

#### Segmentation

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import clone from "clone";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    value: 85,
    scale: {
      min: 0,
      max: 100,
    },
    segmentation: {
      enabled: true,
      interval: {
        count: 4,
      },
      spacing: 2,
    },
  });

  const setSegmentationInterval = (interval: any) => {
    const nextOptions = clone(options);

    nextOptions.segmentation!.interval = interval;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <button onClick={() => setSegmentationInterval({ step: 10 })}>
            Step: <code>10</code>
          </button>
          <button onClick={() => setSegmentationInterval({ count: 4 })}>
            Count: <code>4</code>
          </button>
          <button
            onClick={() => setSegmentationInterval({ values: [40, 50, 60] })}
          >
            Values: <code>[40, 50, 60]</code>
          </button>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Segmentation](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/segmentation)

```js
{
    segmentation: {
        enabled: true,
        interval: {
            count: 4,
        },
        spacing: 2,
    },
}
```

In this configuration:

- `segmentation.interval` specifies how the gauge is segmented. Available options are:
  - `step` - segments the gauge at a fixed interval.
  - `count` - segments the gauge a fixed number of times.
  - `values` - segments the gauge at specific scale values.
- `spacing` defines the spacing between each segment.

### Corner Radius

#### Corner Radius

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import clone from "clone";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",
    direction: "horizontal",

    padding: {
      left: 30,
      right: 30,
    },
    value: 85,
    scale: {
      min: 0,
      max: 100,
    },
    cornerRadius: 99,
    cornerMode: "container",
    segmentation: {
      enabled: false,
      interval: {
        count: 10,
      },
      spacing: 2,
    },
  });

  const setCornerMode = (cornerMode: "container" | "item") => {
    const nextOptions = clone(options);

    nextOptions.cornerMode = cornerMode;

    setOptions(nextOptions);
  };

  const setSegmentation = (segmented: boolean) => {
    const nextOptions = clone(options);

    nextOptions.segmentation!.enabled = segmented;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Segmentation:</span>
          <button onClick={() => setSegmentation(true)}>Enable</button>
          <button className="gap-right" onClick={() => setSegmentation(false)}>
            Disable
          </button>
          <span>Corners:</span>
          <button onClick={() => setCornerMode("item")}>Item</button>
          <button onClick={() => setCornerMode("container")}>Container</button>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Corner Radius](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/corner-radius)

```js
{
    cornerRadius: 99,
    cornerMode: 'container',
}
```

In this configuration:

- `cornerRadius` specifies the amount of curvature applied to each corner.
- `cornerMode` can be set to `container` to apply rounded corners only to the start and end of the gauge, or `item` for all visual items within the gauge.

## Colour Options

### Single Colour

Both the bar and scale can be displayed using a solid fill.

#### Fill

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    value: 80,
    scale: {
      min: 0,
      max: 100,
      fill: "#f5f6fa",
    },
    bar: {
      fill: "#4cd137",
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Fill](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/fill)

```js
{
    scale: {
        fill: '#f5f6fa',
    },
    bar: {
        fill: '#4cd137',
    },
}
```

### Multiple Colours

Multiple colours can be specified using the `fills` property.

#### Colour Scales

```tsx
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";
import clone from "clone";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    value: 85,
    scale: {
      min: 0,
      max: 100,
    },
    bar: {
      fills: [{ color: "#00a8ff" }, { color: "#9c88ff" }, { color: "#e84118" }],
      fillMode: "discrete",
    },
  });

  const setFillMode = (fillMode: "continuous" | "discrete") => {
    const nextOptions = clone(options);

    nextOptions.bar!.fillMode = fillMode;

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Fill Mode:
          <button onClick={() => setFillMode("continuous")}>Continuous</button>
          <button onClick={() => setFillMode("discrete")}>Discrete</button>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Colour Scales](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/fill-mode)

```js
{
    bar: {
        fills: [{ color: '#00a8ff' }, { color: '#9c88ff' }, { color: '#e84118' }],
        fillMode: 'discrete',
    },
}
```

In this configuration:

- `fills` specifies an array of colours to use to fill the bar.
- `fillMode` can be set to `continuous` for a gradient, or `discrete` to use blocks of solid colours.

The default behaviour is to space out the colours evenly. This can be customised by using colour stops.

### Colour Stops

#### Scale Values

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",
    direction: "horizontal",

    value: 80,
    scale: {
      min: 0,
      max: 100,
    },
    bar: {
      fills: [
        { color: "#E84118", stop: 35 },
        { color: "#FBC531", stop: 45 },
        { color: "#4CD137", stop: 55 },
        { color: "#FBC531", stop: 65 },
        { color: "#E84118" },
      ],
      fillMode: "discrete",
    },
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Scale Values](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/scale-values)

```js
{
    bar: {
        fills: [
            { color: '#E84118', stop: 35 },
            { color: '#FBC531', stop: 45 },
            { color: '#4CD137', stop: 55 },
            { color: '#FBC531', stop: 65 },
            { color: '#E84118' },
        ],
        fillMode: 'discrete',
    },
}
```

In this configuration:

- Each colour stops at the `stop` value, and the next colour begins at that point.
- If no `stop` is provided, the fills will be distributed equally.
- The last colour is used until the end of the scale or bar.
- Both `discrete` and `continuous` modes can be used with colour stops.

## Targets

Gauges often display targets or thresholds to provide context to the displayed data value. These can be added using the `targets` configuration array.

#### Targets

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    value: 50,
    scale: {
      min: 0,
      max: 100,
    },
    targets: [
      {
        value: 70,
        text: "Average",
      },
    ],
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Targets](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/targets)

```js
{
    targets: [
        {
            value: 70,
            text: 'Average',
        },
    ],
}
```

In this configuration:

- `value` is the position for the target marker.
- `text` is an optional string for the target label.

### Customisation

#### Target Customisation

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",
    direction: "horizontal",

    value: 50,
    scale: {
      min: 0,
      max: 100,
    },
    targets: [
      {
        value: 30,
        shape: "triangle",
        placement: "before",
        fill: "white",
        strokeWidth: 2,
        spacing: 8,
      },
      {
        value: 75,
        placement: "after",
        shape: "triangle",
        fill: "white",
        strokeWidth: 2,
        spacing: 8,
      },
      {
        value: 90,
        placement: "middle",
        shape: "circle",
        fill: "white",
        strokeWidth: 2,
        spacing: 8,
      },
    ],
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Target Customisation](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/custom-targets)

```js
{
    targets: [
        {
            value: 30,
            shape: 'triangle',
            placement: 'before',
            fill: 'white',
            strokeWidth: 2,
            spacing: 8,
        },
        {
            value: 75,
            placement: 'after',
            shape: 'triangle',
            fill: 'white',
            strokeWidth: 2,
            spacing: 8,
        },
        {
            value: 90,
            placement: 'middle',
            shape: 'circle',
            fill: 'white',
            strokeWidth: 2,
            spacing: 8,
        },
    ],
}
```

In this configuration:

- `shape` is a [marker shape](#reference-AgLinearGaugeOptions-targets-shape).
- `placement` indicates the relative placement to the gauge - either `before`, `after`, or `middle`.
- `size` is the size of the marker, in pixels.
- `spacing` is spacing from the edge of the gauge to the marker. Ignored when `placement` is `middle`.

## Bullet Series

The Linear Gauge is used to create a Bullet Series.

#### Bullet

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgGauge } from "ag-charts-react";
import {
  AgLinearGaugeOptions,
  AllGaugeModule,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
} from "ag-charts-enterprise";

ModuleRegistry.registerModules([
  AllGaugeModule,
  AnimationModule,
  CrosshairModule,
  LegendModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgLinearGaugeOptions>({
    type: "linear-gauge",

    direction: "horizontal",
    thickness: 50,
    value: 50,
    scale: {
      min: 0,
      max: 100,
      fills: [{ color: "#A6A6A5" }, { color: "#BFBFBF" }, { color: "#D9D9D9" }],
      fillMode: "discrete",
    },
    bar: {
      thickness: 25,
      fill: "black",
    },
    targets: [
      {
        value: 60,
        shape: "line",
        size: 20,
        placement: "middle",
        strokeWidth: 2,
      },
    ],
  });

  return <AgGauge options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Bullet](https://www.ag-grid.com/charts/reactFunctionalTs/linear-gauge/examples/bullet)

```js
{
    type: 'linear-gauge',
    thickness: 50,
    value: 50,
    scale: {
        min: 0,
        max: 100,
        fills: [{ color: '#A6A6A5' }, { color: '#BFBFBF' }, { color: '#D9D9D9' }],
        fillMode: 'discrete',
    },
    bar: {
        thickness: 25,
        fill: 'black',
    },
    targets: [
        {
            value: 60,
            shape: 'line',
            size: 20,
            placement: 'middle',
            strokeWidth: 2,
        },
    ],
}
```

In the above configuration:

- The bar `thickness` is set to less that the gauge thickness.
- The scale has a number of `fills` and a `fillMode` of `discrete`.
- The target has `line` shape with a `strokeWidth` of 2 and is placed in the `middle`.

## API Reference

#### Linear Gauge Options

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'linear-gauge' |  | Configuration for the Linear Gauge. |
| value (required) | number \| bigint |  | Value of the Linear Gauge. |
| theme | AgChartTheme \| AgChartThemeName |  |  |
| container | HTMLElement \| null |  | The element to place the rendered chart into. |
| width | PixelSize |  | The width of the chart in pixels. |
| height | PixelSize |  | The height of the chart in pixels. |
| minHeight | PixelSize | 300 | Sets the minimum height of the chart. Ignored if `height` is specified. |
| minWidth | PixelSize | 300 | Sets the minimum width of the chart. Ignored if `width` is specified. |
| padding | PixelSize \| PaddingOptions |  | Configuration for the padding of the chart. A number applies uniform padding; an object sets each side. |
| background | AgChartBackground |  | Configuration for the background shown behind the chart. |
| background.visible | boolean |  | Whether the background should be visible. |
| background.fill | CssColor |  | Colour of the chart background. |
| background.image | AgChartBackgroundImage |  | Background image. May be combined with fill colour. |
| background.image.url (required) | string |  | URL of the image. |
| background.image.left | PixelSize |  | Distance from the left border of the chart to the left border of the image. If neither left nor right specified, the image is centred horizontally. |
| background.image.top | PixelSize |  | Distance from the top border of the chart to the top border of the image. If neither top nor bottom specified, the image is centred vertically. |
| background.image.right | PixelSize |  | Distance from the right border of the chart to the right border of the image. If neither left nor right specified, the image is centred horizontally. |
| background.image.bottom | PixelSize |  | Distance from the bottom border of the chart to the bottom border of the image. If neither top nor bottom specified, the image is centred vertically. |
| background.image.width | PixelSize |  | Width of the image. If both left and width are specified, right is ignored. If only height is provided, width will be computed to preserve the original width/height ratio. If neither is provided, the original width is used. |
| background.image.height | PixelSize |  | Height of the image. If both top and height are specified, bottom is ignored. If only width is provided, height will be computed to preserve the original width/height ratio.  If neither is provided, the original height is used. |
| background.image.opacity | Opacity |  | Opacity of the image. |
| title | AgChartCaptionOptions |  | Configuration for the title shown at the top of the chart. |
| title.enabled | boolean |  | Whether the text should be shown. |
| title.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| title.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the text. |
| title.fontStyle | FontStyle |  | The font style to use for the text. |
| title.fontWeight | FontWeight |  | The font weight to use for the text. |
| title.fontSize | FontSize |  | The font size in pixels to use for the text. |
| title.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| title.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| title.spacing | PixelSize |  | Spacing added to help position the text. |
| title.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| title.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| title.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| title.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| title.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| title.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| title.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| title.border | BorderOptions |  | Stroke options for the box border. |
| title.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| title.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| title.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| title.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| title.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| title.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| title.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| title.fillOpacity | Opacity |  | The opacity of the fill colour. |
| subtitle | AgChartSubtitleOptions |  | Configuration for the subtitle shown beneath the chart title. |
| subtitle.enabled | boolean |  | Whether the text should be shown. |
| subtitle.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| subtitle.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the text. |
| subtitle.fontStyle | FontStyle |  | The font style to use for the text. |
| subtitle.fontWeight | FontWeight |  | The font weight to use for the text. |
| subtitle.fontSize | FontSize |  | The font size in pixels to use for the text. |
| subtitle.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| subtitle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| subtitle.spacing | PixelSize |  | Spacing added to help position the text. |
| subtitle.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| subtitle.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| subtitle.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| subtitle.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| subtitle.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| subtitle.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| subtitle.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| subtitle.border | BorderOptions |  | Stroke options for the box border. |
| subtitle.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| subtitle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| subtitle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| subtitle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| subtitle.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| subtitle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| subtitle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| subtitle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| footnote | AgChartFooterOptions |  | Configuration for the footnote shown at the bottom of the chart. |
| footnote.enabled | boolean |  | Whether the text should be shown. |
| footnote.text | TextValue \| ContentSegment[] |  | The text to display. Plain text, or an array of segments for rich content. |
| footnote.textAlign | 'left' \| 'center' \| 'right' |  | Horizontal position of the text. |
| footnote.fontStyle | FontStyle |  | The font style to use for the text. |
| footnote.fontWeight | FontWeight |  | The font weight to use for the text. |
| footnote.fontSize | FontSize |  | The font size in pixels to use for the text. |
| footnote.fontFamily | FontFamily \| GoogleFontFamily \| Array<FontFamily \| GoogleFontFamily> |  | The font family to use for the text. A single family name, or an array of names used as fallbacks. |
| footnote.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the text. A colour string, or a theme-colour reference object. |
| footnote.spacing | PixelSize |  | Spacing added to help position the text. |
| footnote.maxWidth | PixelSize |  | Used to constrain the width of the title before text is wrapped or truncated. |
| footnote.maxHeight | PixelSize |  | Used to constrain the height of the title before text is truncated. |
| footnote.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for long text. - `'always'` will always wrap text to fit within the `maxWidth`. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the `maxWidth`, the text will be truncated. - `'never'` disables text wrapping. |
| footnote.tooltip | AgCaptionTooltipOptions |  | Configuration for the caption tooltip shown on hover. |
| footnote.tooltip.visible | 'auto' \| 'always' \| 'never' |  | Controls when the caption tooltip is shown. - `'auto'` — only when text is truncated. - `'always'` — on every hover. - `'never'` — tooltip is disabled.  Default: `'always'` when `text` or `renderer` is provided, `'auto'` otherwise. |
| footnote.tooltip.text | string |  | Static text to display in the tooltip. Overrides the default caption text. |
| footnote.tooltip.renderer | Renderer |  | Function to produce tooltip content. Return a plain string or an HTML string. Takes precedence over `text`.  Returning `undefined` falls back to `text` (or the caption's own text). Returning an empty string suppresses the tooltip. |
| footnote.border | BorderOptions |  | Stroke options for the box border. |
| footnote.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| footnote.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| footnote.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| footnote.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| footnote.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| footnote.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| footnote.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| footnote.fillOpacity | Opacity |  | The opacity of the fill colour. |
| tooltip | AgChartTooltipOptions |  | Global configuration that applies to all tooltips in the chart. |
| tooltip.enabled | boolean |  | Set to `false` to disable tooltips for all series in the chart. |
| tooltip.mode | 'single' \| 'shared' \| 'compact' |  | Group multiple series into the same tooltip |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. This will be used unless overridden by the series `tooltip.range` option. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. This will be used unless overridden by the series `tooltip.range` option. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.pagination | boolean |  | The configuration for tooltip pagination. |
| tooltip.delay | DurationMs |  | The time interval (in milliseconds) after which the tooltip is shown. |
| tooltip.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'hyphenate' | Text wrapping strategy for tooltips. - `'always'` will always wrap text to fit within the tooltip. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the tooltip dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| animation | AgAnimationOptions |  | Configuration for chart animations. |
| animation.enabled | boolean |  | Set to `true` to enable the animation module. Defaults to `false` when `flashOnUpdate.enabled` is `true`. |
| animation.duration | DurationMs |  | The total duration of the animation on initial load and updates. |
| contextMenu | AgContextMenuOptions |  | Configuration for the context menu. |
| contextMenu.enabled | boolean | true | Whether to show the context menu. |
| contextMenu.items | AgContextMenuItem[] | ['defaults'] | List of menu items (and submenus) for the context menu. |
| contextMenu.getItems | AgContextMenuGetItemsCallback | undefined | Callback to list the menu items (and submenus) for the context menu. Overrides `items` if return-value is defined, otherwise `items` is used as a fallback. |
| context | ContextDefault |  | Context object to use in callbacks. |
| locale | AgLocaleOptions |  | Configuration for localisation. |
| locale.localeText | Record |  | A record of locale texts keyed by id. |
| locale.getLocaleText | Formatter |  | Formatter that generates the text displayed to the user. |
| listeners | AgBaseChartListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is clicked. Useful for a chart containing multiple series. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in any series is double-clicked. Useful for a chart containing multiple series. |
| listeners.seriesVisibilityChange | Listener |  | The listener to call when a series visibility is changed. |
| listeners.activeChange | Listener |  | The listener to call when the active state (highlight/tooltip) is changed. |
| listeners.selectionChange | Listener |  | The listener to call when data selection is changed |
| listeners.collapsedChange | Listener |  | The listener to call when collapsed items are changed. |
| listeners.click | Listener |  | The listener to call when the chart is clicked. |
| listeners.doubleClick | Listener |  | The listener to call when the chart is double-clicked. |
| listeners.annotations | Listener |  | The listener to call when the annotations are changed. |
| listeners.zoom | Listener |  | The listener to call when the zoom is changed. |
| targets | AgLinearGaugeTarget[] |  | Configuration for the targets. |
| targets.value (required) | number \| bigint |  | Value to use to position the target |
| targets.text | string |  | Text to use for the target label. |
| targets.shape | AgMarkerShape \| 'line' |  | The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function. |
| targets.placement | 'before' \| 'after' \| 'middle' |  | Placement of target. |
| targets.spacing | PixelSize |  | Spacing of the target. Ignored when placement is 'middle'. |
| targets.size | PixelSize |  | Size of the target. |
| targets.rotation | Degree |  | Rotation of the target, in degrees. |
| targets.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| targets.fillOpacity | Opacity |  | The opacity of the fill colour. |
| targets.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| targets.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| targets.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| targets.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| targets.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| direction | 'vertical' \| 'horizontal' |  | Direction to display the gauge in. |
| thickness | number |  | Width of the gauge, or the height if `direction` is `horizontal`. |
| segmentation | AgGaugeSegmentation |  | Configuration for a segmented appearance. |
| segmentation.enabled | boolean |  | Enable segmentation. |
| segmentation.interval | AgGaugeSegmentationInterval |  | Configuration for the segmentation. |
| segmentation.interval.step | number \| bigint |  | The segmentation interval. If the configured interval results in too many items given the chart size, it will be ignored. |
| segmentation.interval.values | Array<number \| bigint> |  | Array of values for specified intervals along the gauge. |
| segmentation.interval.count | number |  | Number of evenly-divided segments in the gauge. |
| segmentation.spacing | number |  | The spacing between segments. |
| cornerRadius | number |  | Apply rounded corners to the gauge. |
| cornerMode | 'container' \| 'item' | container | Configuration on whether to apply `cornerRadius` only to the ends of the gauge, or each individual item within the gauge. |
| bar | AgLinearGaugeBarStyle |  | Configuration for the bar. |
| bar.enabled | boolean |  | Whether the bar should be shown. |
| bar.thickness | number |  | Width of the bar, or the height if `horizontal` is true. Defaults to the gauge thickness. |
| bar.thicknessRatio | number |  | Thickness of the bar in proportion to the gauge thickness. Ignored if `thickness` is set. |
| bar.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| bar.fillOpacity | Opacity |  | The opacity of the fill colour. |
| bar.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| bar.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| bar.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| bar.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| bar.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| bar.fills | AgGaugeColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| bar.fills.color | string |  | Colour of this category. |
| bar.fills.stop | number \| bigint |  | Stop value of this category. Defaults the maximum value if unset. |
| bar.fillMode | 'continuous' \| 'discrete' | continuous | Configuration the fills should be rendered. |
| scale | AgLinearGaugeScale |  | Configuration for the scale. |
| scale.min | number \| bigint |  | Maximum value of the scale. Any values exceeding this number will be clipped to this maximum. |
| scale.max | number \| bigint |  | Minimum value of the scale. Any values exceeding this number will be clipped to this minimum. |
| scale.label | AgLinearGaugeScaleLabel |  | Configuration for the scale labels. |
| scale.label.placement | 'before' \| 'after' |  | Placement of labels |
| scale.label.enabled | boolean |  | Set to `false` to hide the scale labels. |
| scale.label.fontStyle | FontStyle |  | The font style to use for the labels. |
| scale.label.fontWeight | FontWeight |  | The font weight to use for the labels. |
| scale.label.fontSize | FontSize |  | The font size in pixels to use for the labels. |
| scale.label.fontFamily | FontFamily |  | The font family to use for the labels |
| scale.label.spacing | PixelSize |  | Spacing in pixels between the scale label and the tick. |
| scale.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the labels. A colour string, or a theme-colour reference object. |
| scale.label.rotation | Degree |  | The rotation of the scale labels in degrees. |
| scale.label.avoidCollisions | boolean |  | Avoid scale label collision by automatically reducing the number of ticks displayed. If set to `false`, scale labels may collide. |
| scale.label.minSpacing | PixelSize |  | Minimum gap in pixels between the scale labels before being removed to avoid collisions. |
| scale.label.format | string |  | Format string used when rendering labels. |
| scale.label.formatter | Formatter |  | Function used to render scale labels. If `value` is a number, `fractionDigits` will also be provided, which indicates the number of fractional digits used in the step between ticks; for example, a tick step of `0.0005` would have `fractionDigits` set to `4` |
| scale.interval | AgLinearGaugeScaleInterval |  | Configuration for the ticks interval. |
| scale.interval.values | Array<number \| bigint> |  | Array of values in scale units for specified intervals along the scale. The values in this array must be compatible with the scale type. |
| scale.interval.step | number \| bigint |  | The scale interval. Expressed in the units of the scale. If the configured interval results in too many items given the chart size, it will be ignored. |
| scale.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| scale.fillOpacity | Opacity |  | The opacity of the fill colour. |
| scale.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| scale.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| scale.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| scale.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| scale.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| scale.fills | AgGaugeColorStop[] |  | Configuration for two or more colours, and the values they are rendered at. |
| scale.fills.color | string |  | Colour of this category. |
| scale.fills.stop | number \| bigint |  | Stop value of this category. Defaults the maximum value if unset. |
| scale.fillMode | 'continuous' \| 'discrete' | continuous | Configuration the fills should be rendered. |
| label | AgLinearGaugeLabelOptions |  | Configuration for the labels shown inside the shape. |
| label.text | string |  | Text to always display. |
| label.spacing | PixelSize |  | Distance between the shape edges and the text. |
| label.avoidCollisions | boolean | true | Avoid label collisions with the bar and/or scale. |
| label.placement | AgLinearGaugeLabelPlacement |  | Placement of the label. |
| label.lineHeight | FontSize |  | Line height to use for the label. |
| label.minimumFontSize | FontSize |  | If the label does not fit in the container, setting this will allow the label to pick a font size between its normal `fontSize` and `minimumFontSize` to fit within the container. |
| label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' | 'on-space' | Text wrapping strategy for labels. - `'always'` will always wrap text to fit within the tile. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the tile dimensions, the text will be truncated. - `'never'` disables text wrapping. |
| label.overflowStrategy | 'ellipsis' \| 'hide' |  | Adjusts the behaviour of labels when they overflow - `'ellipsis'` will truncate the text to fit, appending an ellipsis (...) - `'hide'` only displays the label if it completely fits within its bounds, and removes it if it would overflow |
| label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| label.format | string |  | Format string used when rendering labels. |
| label.itemStyler | Styler |  | Function used to style individual datum labels. |
| label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| label.fontFamily | FontFamily |  | The font family for text elements. |
| label.fontStyle | FontStyle |  | The style to use for text elements. |
| label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| label.border | BorderOptions |  | Stroke options for the box border. |
| label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| cursor | string |  | The cursor to use for the gauge. This config is identical to the CSS `cursor` property. |
| highlight | AgHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedItem | AgHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection | AgSelectionOptions |  | Configuration for data selection. |
| selection.enabled | boolean |  | Set to `true` to enable the data-selection on this series. |
| selection.containment | 'any' \| 'all' | chart.selection.containment | Override the drag-to-select containment rule for this series. |
| selection.selectedItem | AgSelectionStyleOptions |  | Styling options for selected items. |
| selection.selectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.selectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.selectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.selectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.selectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.selectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.selectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.selectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedItem | AgSelectionStyleOptions |  | Styling options for unselected items. |
| selection.unselectedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| selection.unselectedSeries | AgSelectionStyleOptions |  | Styling options for series with no selections when there is at least one other selected series. |
| selection.unselectedSeries.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| selection.unselectedSeries.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| selection.unselectedSeries.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| selection.unselectedSeries.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| selection.unselectedSeries.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| selection.unselectedSeries.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| selection.unselectedSeries.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| selection.unselectedSeries.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |