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.