Одно решение с помощью плагина datalabels - https://chartjs-plugin-datalabels.netlify.com/ и это опции для этикеток:
anchor:'end',
==> наивысшая граница элемента
align: top
==> метка расположена после точки привязки в том же направлении
Для небольшой настройки измените padding
, offset
(отрицательный или положительный), размер шрифта и т. Д. (Большой контроль). Опции datalabels
«Пример Hello World»:
// Change default options for ALL charts
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
formatter: function(value, context) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
opacity: 1,
color: 'black',
borderColor: '#11469e',
anchor: 'end', /*https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html */
align: 'top', /* https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html#alignment-and-offset */
font: {
weight: 'bold',
size: 14,
lineHeight: 1 /* align v center */
},
offset: 0, /* 4 by deafult */
padding:{
bottom: 0 /* 4 by deafult */
}
});
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Population (millions)",
backgroundColor: ["#490A3D", "#BD1550","#E97F02", '#F8CA00'],
data: [1000,1500,2000, 2200]
}]
};
var options = {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
}
},
animation:{
duration: 2000 /* time in ms */
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
}
},
stacked: true
}]
}
};
var myChart = new Chart(document.getElementById("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
Еще один пример (дополнительное наведение и стилизация): https://codepen.io/ezra_siton/pen/bGdYaLd
datalabels
очень классная библиотека. Например, добавьте $
и измените 1000
на 1,000
для данных в 2 строках кода.
formatter: function(value, context) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
Related: Как напечатать число с запятыми в качестве разделителей тысяч в JavaScript