I am having trouble with my chartsjs labels. my graph generates fine, I am trying to set the chart so that the data labels are for the text part of the data and not the numbers part. my code shows the data labels as 4, 6 and 2 where as i need them to show the text: me, you and them.
<script>
var ctx = document.getElementById('myChart4').getContext('2d');
var myChart4 = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ['me','you','them'
],
datasets: [{
label: false,
data: [4,6,2
],
}]
},
options: {
responsive: false,
plugins: {
datalabels: {
color: 'black',
anchor: 'end',
align: 'end',
offset: 15
},
legend: {
display: false
},
title: {
display: true,
text:'Reason'
}
},
responsive: false,
onClick: (evt, activeEls) => {
show();
},
}
});
You can use the formatter function for this:
Chart.register(ChartDataLabels)
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
}]
},
options: {
plugins: {
datalabels: {
color: 'black',
anchor: 'end',
align: 'end',
offset: 15,
formatter: (val, ctx) => (ctx.chart.data.labels[ctx.dataIndex])
},
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>