React ChartsLinear Gauge

Version 14.2.0

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

index.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 />);

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

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

index.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 />);

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

{
    direction: 'horizontal',
}

Customisation Copy Link

Thickness Copy Link

index.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 />);

{
    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 Copy Link

A label can be configured with the label property.

index.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";

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,
      color: { ref: "textColor" },
    },
  });

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

    nextOptions.label!.placement = 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 />);

{
    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 for more details about customising the scale label style and interval.

Segmentation Copy Link

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

index.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 = (event: Event) => {
    const nextOptions = clone(options);

    switch ((event.target as HTMLInputElement).value) {
      case "step":
        nextOptions.segmentation!.interval = { step: 10 };
        break;
      case "count":
        nextOptions.segmentation!.interval = { count: 4 };
        break;
      case "values":
        nextOptions.segmentation!.interval = { values: [40, 50, 60] };
        break;
    }

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <div
            className="button-group"
            role="group"
            aria-label="Segmentation Interval"
          >
            <input
              type="radio"
              id="segmentation-step"
              name="segmentation-interval"
              defaultValue="step"
              onChange={(event) => setSegmentationInterval(event)}
            />
            <label htmlFor="segmentation-step">Step: 10</label>
            <input
              type="radio"
              id="segmentation-count"
              name="segmentation-interval"
              defaultValue="count"
              defaultChecked
              onChange={(event) => setSegmentationInterval(event)}
            />
            <label htmlFor="segmentation-count">Count: 4</label>
            <input
              type="radio"
              id="segmentation-values"
              name="segmentation-interval"
              defaultValue="values"
              onChange={(event) => setSegmentationInterval(event)}
            />
            <label htmlFor="segmentation-values">Values: [40, 50, 60]</label>
          </div>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

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

{
    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 Copy Link

index.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 = (event: Event) => {
    const nextOptions = clone(options);

    nextOptions.cornerMode = (event.target as HTMLInputElement).value as
      | "container"
      | "item";

    setOptions(nextOptions);
  };

  const setSegmentation = (event: Event) => {
    const nextOptions = clone(options);

    nextOptions.segmentation!.enabled =
      (event.target as HTMLInputElement).value === "true";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          <span>Segmentation:</span>
          <div
            className="button-group gap-right"
            role="group"
            aria-label="Segmentation"
          >
            <input
              type="radio"
              id="segmentation-enabled"
              name="segmentation-mode"
              defaultValue="true"
              onChange={(event) => setSegmentation(event)}
            />
            <label htmlFor="segmentation-enabled">Enable</label>
            <input
              type="radio"
              id="segmentation-disabled"
              name="segmentation-mode"
              defaultValue="false"
              defaultChecked
              onChange={(event) => setSegmentation(event)}
            />
            <label htmlFor="segmentation-disabled">Disable</label>
          </div>
          <span>Corners:</span>
          <div className="button-group" role="group" aria-label="Corners">
            <input
              type="radio"
              id="corner-mode-item"
              name="corner-mode"
              defaultValue="item"
              onChange={(event) => setCornerMode(event)}
            />
            <label htmlFor="corner-mode-item">Item</label>
            <input
              type="radio"
              id="corner-mode-container"
              name="corner-mode"
              defaultValue="container"
              defaultChecked
              onChange={(event) => setCornerMode(event)}
            />
            <label htmlFor="corner-mode-container">Container</label>
          </div>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

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

{
    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 Copy Link

Single Colour Copy Link

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

index.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 />);

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

Multiple Colours Copy Link

Multiple colours can be specified using the fills property.

index.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 = (event: Event) => {
    const nextOptions = clone(options);

    nextOptions.bar!.fillMode = (event.target as HTMLInputElement).value as
      | "continuous"
      | "discrete";

    setOptions(nextOptions);
  };

  return (
    <Fragment>
      <div className="example-controls">
        <div className="controls-row">
          Fill Mode:
          <div className="button-group" role="group" aria-label="Fill Mode">
            <input
              type="radio"
              id="fill-mode-continuous"
              name="fill-mode"
              defaultValue="continuous"
              onChange={(event) => setFillMode(event)}
            />
            <label htmlFor="fill-mode-continuous">Continuous</label>
            <input
              type="radio"
              id="fill-mode-discrete"
              name="fill-mode"
              defaultValue="discrete"
              defaultChecked
              onChange={(event) => setFillMode(event)}
            />
            <label htmlFor="fill-mode-discrete">Discrete</label>
          </div>
        </div>
      </div>
      <AgGauge options={options} />
    </Fragment>
  );
};

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

{
    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 Copy Link

index.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 />);

{
    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 Copy Link

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

index.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 />);

{
    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 Copy Link

index.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 />);

{
    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.
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 Copy Link

The Linear Gauge is used to create a Bullet Series.

index.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 />);

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

Linear Gauge Chart Examples Copy Link

See more Linear Gauge Chart examples in the AG Charts Gallery.

Linear Gauge Chart Example

Horizontal Linear Gauge Chart Example

Bullet Chart Example

API Reference Copy Link

Properties available on the AgLinearGaugeOptions interface.

type required 'linear-gauge': Configuration for the Linear Gauge.
value required AgNumericValue: 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 default: 300: Sets the minimum height of the chart. Ignored if `height` is specified.
minWidth PixelSize default: 300: Sets the minimum width of the chart. Ignored if `width` is specified.
padding Padding: 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.
title AgChartCaptionOptions: Configuration for the title shown at the top of the chart.
subtitle AgChartSubtitleOptions: Configuration for the subtitle shown beneath the chart title.
footnote AgChartFooterOptions: Configuration for the footnote shown at the bottom of the chart.
tooltip AgChartTooltipOptions: Global configuration that applies to all tooltips in the chart.
animation AgAnimationOptions: Configuration for chart animations.
contextMenu AgContextMenuOptions: Configuration for the context menu.
context ContextDefault: Context object to use in callbacks.
locale AgLocaleOptions: Configuration for localisation.
listeners AgBaseChartListeners: A map of event names to event listeners.
targets AgLinearGaugeTarget[]: Configuration for the targets.
direction Direction: 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.
cornerRadius number: Apply rounded corners to the gauge.
cornerMode AgGaugeCornerMode default: 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.
scale AgLinearGaugeScale: Configuration for the scale.
label AgLinearGaugeLabelOptions: Configuration for the labels shown inside the shape.
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.
selection AgSelectionOptions: Configuration for data selection.
nodeClickRange InteractionRange: Range from a node that a click triggers the listener.

Getting started

AI Features

Core features

Specialised Charts

Series

Gauges

React ChartsLinear Gauge

Simple Linear Gauge Copy Link

Horizontal Linear Gauge Copy Link

Customisation Copy Link

Thickness Copy Link

Labels Copy Link

Segmentation Copy Link

Corner Radius Copy Link

Colour Options Copy Link

Single Colour Copy Link

Multiple Colours Copy Link

Colour Stops Copy Link

Targets Copy Link

Customisation Copy Link

Bullet Series Copy Link

Linear Gauge Chart Examples Copy Link

API Reference Copy Link