Charts

<RingChart data={ringData} size={250}>
  {ringData.map((item, index) => (
    <Ring index={index} key={item.label} />
  ))}
  <RingCenter defaultLabel="Sessions" />
</RingChart>

<RingChart data={ringData} size={250}>
  {ringData.map((item, index) => (
    <Ring index={index} key={item.label} lineCap="butt" />
  ))}
  <RingCenter defaultLabel="Sessions" />
</RingChart>

<RingChart data={financeData} ringGap={8} size={250} strokeWidth={18}>
  {financeData.map((item, index) => (
    <Ring index={index} key={item.label} />
  ))}
  <RingCenter defaultLabel="Total" formatOptions={{ notation: "compact" }} prefix="$" />
</RingChart>

<RingChart
  data={goalData}
  endAngle={Math.PI / 2}
  size={250}
  startAngle={-Math.PI}
>
  {goalData.map((item, index) => (
    <Ring index={index} key={item.label} />
  ))}
  <RingCenter defaultLabel="Activity" />
</RingChart>

<RingChart
  data={ringData}
  endAngle={0}
  size={250}
  startAngle={-Math.PI}
>
  {ringData.map((item, index) => (
    <Ring index={index} key={item.label} />
  ))}
</RingChart>

const [hoveredIndex, setHoveredIndex] = useState(null);

<RingChart
  data={ringData}
  hoveredIndex={hoveredIndex}
  onHoverChange={setHoveredIndex}
  size={180}
>
  {ringData.map((_, i) => <Ring index={i} key={i} />)}
  <RingCenter defaultLabel="Sessions" />
</RingChart>
<Legend
  hoveredIndex={hoveredIndex}
  items={ringData}
  onHoverChange={setHoveredIndex}
>
  <LegendItemComponent>
    <LegendMarker />
    <LegendLabel />
    <LegendValue showPercentage />
    <LegendProgress />
  </LegendItemComponent>
</Legend>