简体   繁体   中英

React Recharts: RadialBarChart clockwise

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

please check react chart 2 JS this is highly recommended with more than 500,0000 react chart 2 JS check this website image

Clockwise or anti-clockwise is actually related to the startangle:

<RadialBarChart
        cx='50%'
        cy='50%'
        innerRadius='10%'
        outerRadius='80%'
        barSize={10}
        startAngle={180} 
        endAngle={0}
        data={data}
      >

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM