Activity gauge components

There are four exported variants: ActivityGaugeXs, ActivityGaugeSm, ActivityGaugeMd and ActivityGaugeLg. They differ in the ResponsiveContainer height (220, 268, 312 and 356) and in the innerRadius/outerRadius passed to RadialBarChart, so pick a variant rather than passing a size prop.

Every variant accepts title and subtitle props, which default to "1,000" and "Active users", so the center text renders even when you pass neither. The center label is only skipped when both are falsy, so pass empty strings (title="" and subtitle="") to suppress it, or an empty string for just one of them to show a single line.

The data prop takes an array of { name, value, className? } objects. name is the legend label, value is plotted through dataKey="value", and className sets the ring color (for example "text-utility-brand-600") because RadialBar is filled with currentColor.

The scale comes from the PolarAngleAxis inside the chart, which is set to domain={[0, 1000]}. Change that upper bound to your own maximum so a value equal to it fills a complete ring.

Yes. The gauge is a Recharts RadialBarChart and imports RadialBar, PolarAngleAxis, Legend, Tooltip and ResponsiveContainer from recharts, so install recharts alongside the charts-base files.

Both are swapped in as custom content: <Tooltip content={<ChartTooltipContent isRadialChart />} /> and <Legend content={<ChartLegendContent />} />, from charts-base. ChartTooltipContent forwards Recharts' formatter and labelFormatter, and ChartLegendContent accepts reversed and className.

The examples set isAnimationActive={false} on RadialBar so the rings render instantly. Remove that prop to fall back to Recharts' default of "auto", or set it to true, to animate the rings in.