React-Chartjs-2: How do I add gradients in the doughnut chart?

Asked Dec 19 '22 at 21:15

Active Dec 19 '22 at 21:37

Viewed 105 times

I want to create this:

Aspiration

So far, I have managed to create this:

crap

I want to move the color label descriptions that are appearing above the chart to the left side.

Here's my code:

const data = {
    datasets: [
      {
        data: [20, 30, 50],
        backgroundColor: ["#EB6262", "#39BDE7", "#0B8878"],
        borderWidth: 8,
        borderColor: theme.palette.white,
        hoverBorderColor: theme.palette.white,
      },
    ],
    labels: ["Pending", "In Process", "Completed"],
  };

<Doughnut data={data} />

edited Dec 19 '22 at 21:37

asked Dec 19 '22 at 21:15

emma

const options = { responsive: true, plugins: { legend: { display: true, position: "bottom" }, }, }; – DreamBold Dec 19 '22 at 21:38
Please try to these options, ` – DreamBold Dec 19 '22 at 21:38
@DreamBold Hi, thanks for the response, would you have an idea on how to make labels circles like in the top picture instead of a line representing the color? – emma Dec 19 '22 at 21:43
Did you try the above options? – DreamBold Dec 19 '22 at 21:48
@DreamBold Yes, have done the same, but edited the question before your comment – emma Dec 19 '22 at 22:32

React-Chartjs-2: How do I add gradients in the doughnut chart?

0 Answers0