Estaba probando este React Charts llamado Recharts. Hay este RadialBarChart que me gusta usar.

https://recharts.org/en-US/examples/SimpleRadialBarChart

El código para mostrar el gráfico de barras radiales usando el componente funcional es el que se muestra a continuación. De alguna manera, no pude hacer que el gráfico se ejecutara en el sentido de las agujas del reloj.

La línea en el sentido de las agujas del reloj que se incluye a continuación no funciona. Si tiene alguna experiencia en el uso de este gráfico, espero que pueda darme algunas guías sobre cómo configurar el gráfico.

 import React from 'react' import { RadialBarChart, RadialBar, Legend, ResponsiveContainer, } from 'recharts' const data = [ { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8', }, { name: '25-29', uv: 26.69, pv: 4567, fill: '#83a6ed', }, { name: '30-34', uv: 15.69, pv: 1398, fill: '#8dd1e1', }, { name: '35-39', uv: 8.22, pv: 9800, fill: '#82ca9d', }, ] const style = { top: '50%', right: 0, transform: 'translate(0, -50%)', lineHeight: '24px', } export default function App() { return ( <ResponsiveContainer width='100%' aspect={3}> <RadialBarChart cx='50%' cy='50%' innerRadius='10%' outerRadius='80%' barSize={10} data={data} > <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey='uv' /> <Legend iconSize={10} layout='vertical' verticalAlign='middle' wrapperStyle={style} /> </RadialBarChart> </ResponsiveContainer> ) }