I was testing this React Charts called Recharts. There is this RadialBarChart that I have like to use.

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

The code to show the radial bar chart using functional component is as shown below. Somehow I was not able to make the chart run in clockwise direction.

The clockwise line included below doesn't work. If you have any experience using this chart, hope that you could give me some guides on how to configure the chart.

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>
  )
}