GaugeChart | Mantine

Usage

GaugeChart displays a single value on a radial arc. The arc is filled from min up to value, and the value is displayed in the center of the chart.

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

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

Sections

Use sections to split the arc into threshold bands. Each section starts where the previous one ends and is filled up to its own value, the last section should end at max.

When sections is set, 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

Set target to draw a line marker across the arc at the given value. Use targetColor and targetSize to change its color and 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:

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

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

A span of 360 degrees renders a full circle. Set endAngle lower than startAngle to draw the arc counter-clockwise:

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:

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} />
      <GaugeChart
        value={72}
        roundCaps
        size={160}
        sections={[
          { value: 60, color: 'teal' },
          { value: 80, color: 'yellow' },
          { value: 100, color: 'red' },
        ]}
      />
    </Group>
  );
}

Accessibility

The chart has role="meter". Set aria-label to give it an accessible name:

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

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

BulletChart

WaffleChart