RadialBarChart

Concentric progress rings (“actividad del día”): one ring per series with a track, rounded caps, optional gradient, labels at the start of each ring and a centre readout that follows the hovered or focused ring.

Import

import { RadialBarChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/radial-bar-chart.

Usage

<RadialBarChart
  title="Actividad del día"
  data={activity}
  max={100}
  startAngle={0}
  endAngle={270}
  gap={6}
  track
  roundedCaps
  gradient
  height={340}
  centerValue="80%"
  centerLabel="de la meta diaria"
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
description	string
data *	readonly RadialBarDatum[]		Rings from the outside in.
max	number	100	Default full-ring value, 100 unless set (a datum can bring its own).
height	number | "fill"	320
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
startAngle	number	0	Where the rings start and stop, in degrees from 12 o’clock. 0 -> 270 leaves room for ring labels.
endAngle	number	270
thickness	number		Ring thickness in pixels; derived from the size and ring count by default.
gap	number	6	Space between rings, in pixels.
track	boolean	true	Faint full ring behind each progress ring.
roundedCaps	boolean	true
gradient	boolean	true	Soft light-to-full gradient along each ring.
ringLabels	boolean		Name and value at the start of each ring (needs the 12-to-9 o’clock quadrant free).
valueFormat	ValueFormat
centerValue	string		Text in the centre while nothing is hovered.
centerLabel	string
legend	boolean | "top" | "bottom"
tooltip	boolean	true
loading	boolean	false
animate	boolean	true
initialHidden	readonly string[]
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Full Circle
• Solid Sharp
• Single Ring
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/radial-bar-chart/radial-bar-chart.tsx