GaugeChart

Usage

GaugeChart displays a single value on a radial arc – use it for KPIs, utilization and status indicators. The arc is filled from min (0 by default) up to value, and the value is displayed in the center of the chart.

Unlike most charts in @mantine/charts, GaugeChart does not use recharts – it is rendered as a plain svg element.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} size={200} thickness={12} />;
}

Sections

sections splits the arc into threshold bands. Each section is filled from the upper bound of the previous section up to its own value, so the last section should end at max. Sections are sorted by value automatically.

Note that when sections is set, the arc represents the thresholds rather than the current value: the entire arc is colored and value is displayed only in the center label. To mark where the value falls on the arc, use the target marker:

import { GaugeChart } from '@mantine/charts';
import { sections } from './data';

function Demo() {
  return <GaugeChart value={72} sections={sections} />;
}

Target marker

target draws a line marker across the arc at the given value. Use it to display a goal next to the current value, or to point at the current value on a gauge with sections. targetColor controls its color and targetSize its thickness:

import { GaugeChart } from '@mantine/charts';
import { sections } from './data';

function Demo() {
  return <GaugeChart value={72} target={75} sections={sections} />;
}

Start and end angle

startAngle and endAngle control the span of the arc in degrees, -120 and 120 by default (0 is the top of the chart, positive values go clockwise). The viewBox of the chart is calculated from the resulting arc, so an arc that spans only a part of the circle does not leave empty space around the chart:

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} startAngle={-90} endAngle={90} />;
}

A span of 360 degrees or more renders a full circle, and setting endAngle lower than startAngle sweeps the arc counter-clockwise – sections and target follow the same direction:

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return (
    <>
      {/* Full circle */}
      <GaugeChart value={72} startAngle={0} endAngle={360} />

      {/* Counter-clockwise */}
      <GaugeChart value={72} startAngle={120} endAngle={-120} />
    </>
  );
}

Thickness

thickness controls the width of the arc in px, size controls both the width and the height of the chart:

import { GaugeChart } from '@mantine/charts';
import { Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <GaugeChart value={72} thickness={6} size={160} />
      <GaugeChart value={72} thickness={20} size={160} />
    </Group>
  );
}

Custom label

By default, the center label displays value formatted with valueFormatter. Use the label prop to render any React node instead:

import { GaugeChart } from '@mantine/charts';
import { Text } from '@mantine/core';

function Demo() {
  return (
    <GaugeChart
      value={72}
      label={
        <div>
          <Text ta="center" fz="xl" fw={700}>72%</Text>
          <Text ta="center" fz="xs" c="dimmed">CPU Usage</Text>
        </div>
      }
    />
  );
}

Round caps

Set roundCaps to round the endpoints of the arc. Round caps are not applied to sections – rounded caps of adjacent sections would overlap each other:

import { GaugeChart } from '@mantine/charts';
import { Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <GaugeChart value={72} roundCaps size={160} />
      <GaugeChart value={72} roundCaps={false} size={160} />
    </Group>
  );
}

Accessibility

The root svg element has role="meter" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext attributes. Set aria-label to give the gauge an accessible name:

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} aria-label="CPU utilization" />;
}