Radial gauge chart for KPI and status display
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.
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 :
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:
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:
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:
thickness controls the width of the arc in px, size controls both the width and the height of the chart:
By default, the center label displays value formatted with valueFormatter . Use the label prop to render any React node instead:
Set roundCaps to round the endpoints of the arc. With sections , only the outer ends of the first and last sections are rounded – adjacent sections keep straight edges so they do not overlap each other:
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: