У меня есть составная диаграмма с 3 наборами данных: красный, зеленый, синий. Вот ссылка на JSFiddle: https://jsfiddle.net/bwcfL58v/
Давайте представим, что это слои, которые перекрывают друг друга: Красный как нижний слой, затем Зеленый как средний слой и Синий как верхний слой.
Посмотрите на третий день: мы не видим значение красного, потому что оно стоит за зеленым значением (красный меньше зеленого Вот). Итак, вопрос в том, как переместить зеленый цвет в нижний слой, а красный выше. Мне нужно, чтобы наибольшее значение всегда было внизу, а наименьшее значение - вверху, это позволит нам видеть все наборы данных за каждый день.
Все, что мне нужно, это чтобы наборы данных всегда были видны и не прячьте друг друга.
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Day 1", "Day 2", "Day 3"],
datasets: [
{
label: 'Blueberry',
data: [25, 30, 40],
backgroundColor: 'blue',
},
{
label: 'Greenberry',
data: [50, 60, 100],
backgroundColor: 'green',
},
{
label: 'Strawberry',
data: [100, 120, 50],
backgroundColor: 'red',
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
gridLines: {
drawOnChartArea: false
},
}],
yAxes: [{
stacked: false,
display: false,
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true,
},
}]
},
legend: {
display: false
}
}
});