Can I make a radial bar chart like this in Rechart?

Question

I want to make a chart like this in Recharts. They have a similar chart but the edges of it's lines are straight and not round like I need. Can it be configured?

Answer 1

Yeah we can make that double radial bar chart using recharts. This is react/ next js Component. You can modify Bar Radius, Inner radius. For Inner text there is a single number given from Recharts you can use Positioning for rendering that inner text and stylings.

import React from 'react';
import { RadialBarChart, PolarAngleAxis, RadialBar } from 'recharts';

const index = () => {
  // Sample data
  const data = [
    { name: 'A', x: 1, fill: 'green' },
    { name: 'B', x: 2, fill: 'yellow' },
    // { name: 'C', x: 3, fill: 'aqua' },
    // { name: 'D', x: 4, fill: 'blue' },
    // { name: 'E', x: 5, fill: 'orange' },
    // { name: 'F', x: 6, fill: 'red' },
    // { name: 'G', x: 7, fill: 'black' },
    // { name: 'H', x: 8, fill: 'purple' },
    // { name: 'I', x: 9, fill: 'gray' },
  ];

  return (
    <RadialBarChart width={143} height={143} data={data}
    // cx={30 / 2}
    // cy={30 / 2}
    innerRadius={25}
    // outerRadius={18}
    barSize={4}
    startAngle={90}
    endAngle={-270}>
      <PolarAngleAxis
        type="number"
        domain={[0, 10]}
        angleAxisId={0}
        tick={false}
      />
      <RadialBar
        background
        dataKey="value"
        cornerRadius={30 / 2}
        fill="#0BEFF2"
      />
      <text
        x={30 / 2}
        y={33 / 2}
        textAnchor="middle"
        dominantBaseline="middle"
        className="progress-label"
      >
        89
      </text>
    </RadialBarChart>
  );
};

export default index;