make every labels different in doughnut chart (react js) - reactjs

Question

i have double doughnut chart in my react js project code. in that double chart dougnut i want to have 3 different labels in 3 different colour, what should i write to make that?
this my code now
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [{
data: [1000],
backgroundColor: [
"#36A2EB"
],
labels: [
'Blue',
]
}, {
data: [400,600],
backgroundColor: [
"#C4D34C",
"#F7464A"
],
labels: [
'Green',
'Red'
],
}],
};
until now with that code the output labels is "blue","green" and "green" again
i want to make 3 different labels in 3 different colour too, anyone can help me?
result :

Answer 1

Ok, so i have read the docs of react-chartjs-2 and their Doughnut Chart does not support rendering two datasets like you want, i came up with this workaround that will help you to achieve what you want.
import React from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";
const App = () => {
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [
{
data: [1000, 0, 0],
//You should set here all the other colors desired from the other datasets so it can be interpreted by the component
backgroundColor: ["#36A2EB"],
labels: ["Blue"],
},
{
data: [400, 600],
backgroundColor: ["#C4D34C", "#F7464A"],
labels: ["Green", "Red"],
},
],
};
const options = {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
console.log(tooltipItem.datasetIndex);
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
},
},
},
};
return (
<MDBContainer>
<h3 className="mt-5">Doughnut chart</h3>
<Doughnut data={dataDoughnut1} options={options} />
</MDBContainer>
);
};
export default App;
Here is the result