Как показывать разные подсказки на диаграммах (в столбцах)?
Как вывести разные подсказки (tooltips) на столбцах диаграммы?
Вот мой код:
var barChart = {
labels: ["2016", "2017", "2018", "2019", "2020"],
datasets: [{
label: '',
backgroundColor: "rgba(34,42,171, 0.7)",
borderColor: 'rgba(34,42,171, 1)',
borderWidth: 1,
data: [220, 315, 380, 470, 520]
},
{
label: '',
backgroundColor: "#ceb947",
data: [135, 190, 180, 160, 240]
},
]
};
var ctx4 = document.getElementById("canvas").getContext("2d");
window.newBar = new Chart(ctx4, {
type: 'bar',
data: barChart,
options: {
title: {
display: false,
fontStyle: 'bold',
text: "Figure"
},
legend: {
display: false,
position: "bottom",
padding: 20,
labels: {}
},
tooltips: {
mode: 'label',
bodySpacing: 10,
cornerRadius: 0,
titleFontSize: 16,
bodyFontSize: 14,
titleMarginBottom: 15,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
value = value.toString();
value = value.split((/(?=(?:..)?$)/));
value = value.join(',');
return 'Total: ' + value + ' %';
}
}
},
scales: {
xAxes: [{
gridLines: false,
barPercentage: 0.5,
ticks: {
fontColor: 'rgb(37,39,103)',
fontSize: '14',
autoSkip: false,
maxRotation: 45,
minRotation: 45,
padding: 15
}
}],
yAxes: [{
ticks: {
fontColor: 'rgb(37,39,103)',
fontSize: '14',
beginAtZero: true,
stepSize: 100,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:..)?$)/);
value = value.join(',');
return value + ' %';
}
}
}]
},
responsive: true,
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" width="100%" height="60%"></canvas>
Нужно, чтобы выводились данные из:
data: [220, 315, 380, 470, 520]
и
data: [135, 190, 180, 160, 240]
Сейчас дублируется.