Can you please tell me how to display values in bars as below in bar chart. I am using ChartJS 3.6 version.
I have tried below code, it didn't work
const chartOptions = {
responsive: false,
plugins: {
legend: {
display: false,
},
datalabels: {
display: true,
align: 'center',
anchor: 'center',
},
},
}
For the datalabels plugin to work you need to install it and register it:
Bundler:
npm install chartjs-plugin-datalabels
import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
Script tag:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
Chart.register(ChartDataLabels);
Please take a look at below runnable code and see how it can be done with chartjs-plugin-datalabels.
Chart.register(ChartDataLabels);
new Chart("barChart", {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Data',
data: [5, 8, 24, 14],
backgroundColor: 'rgb(124, 124, 255)',
barPercentage: 0.5
}]
},
options: {
plugins: {
datalabels: {
color: 'white',
font: {
weight: 'bold'
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="barChart"></canvas>Remove datalabels: "center" and anchor: "center"
