ReactJS - Labeling multi dimension array with chartJS-2 - reactjs

Question

The chart below I'm trying to create:
I am trying to add labels to my chart but it's showing as undefined. When I enter
labels: ["1", "2", "3"],
it gives the variable '1' to all the 1st variables. Any help on this would be brilliant. Thank you
const DummyChart = () => (
<Doughnut data={data} options={options} width={360} height={360} />
);
const data = {
datasets: [
{
label: "Dummy 1",
data: [487, 189],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
},
{
label: "Dummy 2",
data: [236, 764],
backgroundColor: ["rgba(0, 135, 136)"],
borderColor: ["rgba(0, 135, 136)"],
borderWidth: 1
},
{
label: "Dummy 3",
data: [811, 189],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
}
]
};
const options = {
responsive: true,
legend: {
display: false
},
rotation: Math.PI,
circumference: Math.PI,
cutout: 50
};
export default DummyChart;

Answer 1

Have you tried using point Labels on the chart. Additional chart js contains a label plugin which allows for more customization.
You can install it using this - npm i chartjs-plugin-labels.
Heres a link to a few demo's - https://emn178.github.io/chartjs-plugin-labels/samples/demo/

Answer 2

As per react-chartjs-2 examples there is a separate key named labels for that. You also have to use the tooltips options so you will be able to customize your labels. See the working example I made below:
var Doughnut = reactChartjs2.Doughnut;
const DummyChart = () => ( <Doughnut data={data} options = {options} width={360} height={360} />);
const data = {
labels: [
'Dummy 1',
'Dummy 2',
'Dummy 3',
],
datasets: [{
data: [487, 1000],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
},
{
data: [236, 1000],
backgroundColor: ["rgba(0, 135, 136)"],
borderColor: ["rgba(0, 135, 136)"],
borderWidth: 1
},
{
data: [811, 1000],
backgroundColor: ["rgba(0, 193, 189)"],
borderColor: ["rgba(0, 193, 189)"],
borderWidth: 1
}
]
};
const options = {
responsive: true,
legend: {
display: false
},
rotation: Math.PI,
circumference: Math.PI,
cutout: 50,
tooltips: {
callbacks: {
label: function(item, data) {
return data.labels[item.datasetIndex] + ' ' + data.datasets[item.datasetIndex].data[0] + '/' + data.datasets[item.datasetIndex].data[1]
}
}
}
};
ReactDOM.render(
<DummyChart /> ,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src='https://unpkg.com/chart.js#2.6.0/dist/Chart.js'></script>
<script src='https://unpkg.com/react-chartjs-2#2.1.0/dist/react-chartjs-2.js'>
</script>
<div id='app'></div>