title: React Recharts: RadialBarChart clockwise
body: <p>I was testing this React Charts called Recharts.  There is this RadialBarChart that I have like to use.</p>
  <p><a href="https://recharts.org/en-US/examples/SimpleRadialBarChart" rel="nofollow noreferrer">https://recharts.org/en-US/examples/SimpleRadialBarChart</a></p>
  <p>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.</p>
  <p>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.</p>
  <pre><code>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 (
      &lt;ResponsiveContainer width='100%' aspect={3}&gt;
        &lt;RadialBarChart
          cx='50%'
          cy='50%'
          innerRadius='10%'
          outerRadius='80%'
          barSize={10}
          data={data}
        &gt;
          &lt;RadialBar
            minAngle={15}
            label={{ position: 'insideStart', fill: '#fff' }}
            background
            clockWise
            dataKey='uv'
          /&gt;
          &lt;Legend
            iconSize={10}
            layout='vertical'
            verticalAlign='middle'
            wrapperStyle={style}
          /&gt;
        &lt;/RadialBarChart&gt;
      &lt;/ResponsiveContainer&gt;
    )
  }
  </code></pre>