How to use linear gradient in rechart

Question

I have to create this graph in React. I am using the rechart npm package to do so. But I am not able to get the corner radiuses and the linear gradient. I am open to use any other library if needed.

Image

What I have tried? I have used rechart Pie component to achieve this. Here is the code

import React from 'react';
import { PieChart, Pie, Sector } from 'recharts';
import getDevice from '../../styles/devices';

const renderActiveShape = (props) => {

    const { cx, cy, startAngle, endAngle, payload, innerRadius, outerRadius, z, cornerRadius } = props;
    console.log(startAngle, endAngle)
  
    return (
        <g>
            <text x={cx} y={cy - 20} dy={8} fontSize={z ? '16px' : "24px"} textAnchor="middle" fill="#001233" fontWeight="bold">
                {/* {parseFloat(payload.value / 1000).toFixed(1)}K */}
                {payload.value < 1000 ? payload.value : `${parseFloat(payload.value / 1000).toFixed(1)}K`}
            </text>
            <text x={cx} y={cy + 5} dy={8} fontSize="12px" textAnchor="middle" fill="#5C677D">
                {payload.name}
            </text>
            <Sector
                cx={cx}
                cy={cy}
                innerRadius={innerRadius}
                outerRadius={outerRadius + 20}
                startAngle={startAngle}
                endAngle={endAngle}
                fill={"#12A4ED"}
                cornerRadius={payload.name === 'Deposit' ? cornerRadius : 0}
            />
            <Sector
                cx={cx}
                cy={cy}
                innerRadius={innerRadius - 18}
                outerRadius={innerRadius - 10}
                startAngle={startAngle}
                endAngle={endAngle}
                fill={"#7674740f"}
            />

            {/* <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
            <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" /> */}
            {/* <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${value}%`}</text> */}
        </g>
    );
};

export default function Chart({ data }) {

    // const [activeIndex, setActiveIndex] = useState(1)

    // const onPieEnter = (_, index) => {
    //     setActiveIndex(index)
    // };
    const { isMobile } = getDevice()
    return (
        <PieChart width={400} height={350}>
            <Pie
                activeIndex={1}
                activeShape={renderActiveShape}
                data={data}
                cx={200}
                innerRadius={isMobile ? 60 : 80}
                outerRadius={isMobile ? 100 : 120}
                cornerRadius={isMobile ? 5 : 10}
                fill="#7DC762"
                dataKey="value"
                z={isMobile}
            >
            </Pie>
        </PieChart>
    );
}

But what I get by using this is

Can anyone help how to achieve this? Any help is appreciated.

Answer 1

To add gradient color to your chart, you can do the following:

This is just an example:

<PieChart width={400} height={350}>
  {/* This will allow to add color based on your need, so update it accordingly  */}
  <defs>
      <linearGradient id="colorUv" x1="1" y1="1" x2="0" y2="0">
        <stop offset="30%" stopColor="#6584FF" stopOpacity={0.5} />
        <stop offset="95%" stopColor="#FFFFFF" stopOpacity={0.5} />
      </linearGradient>
    </defs>
  <Pie
    activeIndex={1}
    activeShape={renderActiveShape}
    data={data}
    cx={200}
    innerRadius={isMobile ? 60 : 80}
    outerRadius={isMobile ? 100 : 120}
    cornerRadius={isMobile ? 5 : 10}
    
    fill="url(#colorUv)"//Add the id 'colorUv' which is used in linearGradient
    dataKey="value"
    z={isMobile}
  ></Pie>
</PieChart>