I try to implement a stacked bar chart using Chart.js framework (version 2.7) und faced following problem: single data elements are drawn in each bar in the same order as provided in JSON structure (which is absolutely logical and understandable). I would like to have them sorted: biggest elements at the bottom of the bar, smallest at its top.
I suppose it can be accomplished using some plugin customization black magic but can not figure it out.
Any help would be appreciated.
Example:
var chart = new Chart(document.getElementById('canvas'), {
type : 'bar',
data : {
labels : ["2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10"],
datasets : [
{
label: "Dataset 1",
backgroundColor: "red",
data: [ {x: "2018-07-06", y: 1}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 3}]
},
{
label: "Dataset 2",
backgroundColor: "blue",
data: [ {x: "2018-07-06", y: 3}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 1}]
},
{
label: "Dataset 3",
backgroundColor: "green",
data: [ {x: "2018-07-06", y: 2}, {x: "2018-07-07", y: 1}, {x: "2018-07-08", y: 2}]
}
],
borderWidth : 1
},
options : {
responsive : true,
maintainAspectRatio : false,
title : {
display : true,
text : 'Test'
},
scales : {
xAxes : [ {
stacked : true,
time : {
unit : 'day'
}
} ],
yAxes : [ {
stacked : true,
ticks : {
beginAtZero : true
}
} ]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="canvas" height="500" width="500"></canvas>In this example I would like to have order of colors in each column inversed:
blue-green-red in first one,
red-blue-green or blue-red-green in second,
red-green-blue in the third.
Probably it could be done somehow more efficient and / or beautiful, but I had to solve it on my own.
/*
* chart.js do not support stacked bar charts, which are sorted by value,
* therefore it's needed to perform this functionality with custom plugins
*/
Chart.plugins.register({
/*
* Sorts data by value and calculates values for bar stacks
*/
beforeDraw(chart) {
// create data container in chart instance
chart.sortedData = {};
// iterate over datasets
chart.data.datasets.forEach((dataset, datasetIndex) => {
// iterate over dataset records
dataset.data.forEach((data, index) => {
// create data container for bar stack data
if(!chart.sortedData[index]) {
chart.sortedData[index] = {
data: []
};
}
// save data
chart.sortedData[index].data[datasetIndex] = {
datasetIndex: datasetIndex,
hidden: chart.getDatasetMeta(datasetIndex).hidden ? true : false,
color: dataset.backgroundColor,
value: dataset.data[index].y,
y: chart.getDatasetMeta(datasetIndex).data[index]._model.y,
base: chart.getDatasetMeta(datasetIndex).data[index]._model.base,
};
});
});
var chartTop = chart.scales['y-axis-0'].top;
var max = chart.scales['y-axis-0'].max;
var h = chart.scales['y-axis-0'].height / max;
// iterate over datasets
chart.data.datasets.forEach((dataset, datasetIndex) => {
// iterate over dataset records
dataset.data.forEach((data, index) => {
// sort data in bar stack by value
chart.sortedData[index].data = Object.keys(chart.sortedData[index].data)
.map(k => chart.sortedData[index].data[k])
.sort((a, b) => a.value - b.value);
// iterate over stack records
chart.sortedData[index].data.forEach((d, i) => {
// calculate base value
d.base = chartTop + (max - Object.keys(chart.sortedData[index].data)
.map(k => chart.sortedData[index].data[k].value)
.reduce((a, b) => a + b, 0)) * h
+ Object.keys(chart.sortedData[index].data)
.map(k => chart.sortedData[index].data[k])
.filter(d => d.hidden)
.reduce((a, b) => a + b.value, 0) * h;
// increase base value with values of previous records
for (var j = 0; j < i; j++) {
d.base += chart.sortedData[index].data[j].hidden
? 0
: h * chart.sortedData[index].data[j].value;
}
// set y value
d.y = d.base + h * d.value;
});
});
});
},
/*
* Sets values for base and y
*/
beforeDatasetDraw(chart, args) {
chart.getDatasetMeta(args.index).data.forEach((data, index) => {
var el = chart.sortedData[index].data.filter(e => e.datasetIndex === args.index)[0];
data._model.y = el.y;
data._model.base = el.base;
});
}
});
var chart = new Chart(document.getElementById('canvas'), {
type : 'bar',
data : {
labels : ["2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10"],
datasets : [
{
label: "Dataset 1",
backgroundColor: "red",
data: [ {x: "2018-07-06", y: 1}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 3}]
},
{
label: "Dataset 2",
backgroundColor: "blue",
data: [ {x: "2018-07-06", y: 3}, {x: "2018-07-07", y: 2}, {x: "2018-07-08", y: 1}]
},
{
label: "Dataset 3",
backgroundColor: "green",
data: [ {x: "2018-07-06", y: 2}, {x: "2018-07-07", y: 1}, {x: "2018-07-08", y: 2}]
}
],
borderWidth : 1
},
options : {
responsive : true,
maintainAspectRatio : false,
title : {
display : true,
text : 'Test'
},
scales : {
xAxes : [ {
stacked : true,
time : {
unit : 'day'
}
} ],
yAxes : [ {
stacked : true,
ticks : {
beginAtZero : true
}
} ]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="500" width="500"></canvas>