๐:1
You can use chartjs-plugin-datalabels. The positioning of the labels is specified by the following definition inside the chart options.
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
}
}
Please have a look at the runnable code snippet below.
const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O'];
const data = labels.map(l => Math.floor(Math.random() * 1000) + 1);
const sortedData = data.slice().sort((a, b) => a - b);
const backgroundColors = data.map(v => sortedData.indexOf(v) >= data.length - 3 ? 'red' : 'green');
Chart.register(ChartDataLabels);
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O'],
datasets: [{
label: "My Dataset",
data: data,
backgroundColor: backgroundColors
}]
},
options: {
layout: {
padding: {
top: 30
}
},
plugins: {
legend: {
display: false
},
datalabels: {
anchor: 'end',
align: 'end'
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="myChart" height="90"></canvas>