I’m hoping someone has figured out how to properly sort “datasets” within their clusters in a ChartJS Bar chart. Below is an example of a bar chart in ChartJS with multiple “datasets”, each with their own label that corresponds with a color/item in the legend.
Here is an image of what the original chart looks like. In each cluster, Respondent 1 is always in first position, Respondent 2 in second position, Respondent 3 in third position.
Chart.JS Bar Example PNG
What I want to do is retain the X-Axis (which is sorted by “Reporting Period”), while having the data points within each X-Axis interval or group be sorted either ascending or descending.
Approaches I have attempted:
- restructuring the
dataproperty in each dataset to match theobjectstructure option - using a singular data object and “parsing” properties in each
datasetin thedatasetsarray - manipulating the
datasetsarray to isolate datapoints across numerousdatasetobjects with the samelabel
What I have found with the first two attempts is that with those approaches, the position of each bar associated with each “dataset” will always follow the ordering (i.e. the datasetIndex) of each dataset in the datasets array within its group…
I found that the third attempt achieved the desired sorting, but that manipulation causes redundant legend labels.
Here is an image of what the desired sorting looks like (ascending in each cluster)
chart clusters sorted
Here is what the “original” display data looks like
Chart Data
{
"datasets": [
{
"label": "Respondent 1",
"data": [
750,
null,
null,
null
],
"borderRadius": 5,
"backgroundColor": "#1E81D3",
"borderColor": "#ccc",
"spanGaps": true,
"order": 0
},
{
"label": "Respondent 2",
"data": [
null,
33921,
100001,
3999
],
"borderRadius": 5,
"backgroundColor": "#063F84",
"borderColor": "#ccc",
"spanGaps": true,
"order": 1
},
{
"label": "Respondent 3",
"data": [
null,
419,
21583,
488
],
"borderRadius": 5,
"backgroundColor": "#0D5AB7",
"borderColor": "#ccc",
"spanGaps": true,
"order": 2
}
],
"labels": [
"2017 Fiscal Year (Jul-Jun) - H2",
"2022 Fiscal Year (Jan-Dec) - H2",
"2023 Fiscal Year (Jan-Dec) - H1",
"2023 Fiscal Year (Jan-Dec) - H2"
],
"yAxisLabel": "Cubic Meters"
}
here is what the data looks like after resorting (3rd attempt outlined above)
{
"datasets": [
{
"label": "Respondent 1",
"data": [
750,
null,
null,
null
],
"backgroundColor": "#1E81D3",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 3",
"data": [
null,
419,
null,
null
],
"backgroundColor": "#0D5AB7",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 2",
"data": [
null,
33921,
null,
null
],
"backgroundColor": "#063F84",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 3",
"data": [
null,
null,
21583,
null
],
"backgroundColor": "#0D5AB7",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 2",
"data": [
null,
null,
100001,
null
],
"backgroundColor": "#063F84",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 3",
"data": [
null,
null,
null,
488
],
"backgroundColor": "#0D5AB7",
"borderColor": "#ccc",
"borderRadius": 5
},
{
"label": "Respondent 2",
"data": [
null,
null,
null,
3999
],
"backgroundColor": "#063F84",
"borderColor": "#ccc",
"borderRadius": 5
}
],
"labels": [
"2017 Fiscal Year (Jul-Jun) - H2",
"2022 Fiscal Year (Jan-Dec) - H2",
"2023 Fiscal Year (Jan-Dec) - H1",
"2023 Fiscal Year (Jan-Dec) - H2"
],
"yAxisLabel": "Cubic Meters"
}
After all that, I thought there must be a better way…
i have conducted some little research and if you want the data bars to be sorted for each year part of these clusters you need to pre define the dataset and sort it like this:
const chartData = {
datasets: [
{
label: "Respondent 1",
data: [750, 700, null, null],
backgroundColor: "#1E81D3",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 3",
data: [null, 419, null, null],
backgroundColor: "#0D5AB7",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 2",
data: [null, 33921, null, null],
backgroundColor: "#063F84",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 3",
data: [null, null, 21583, null],
backgroundColor: "#0D5AB7",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 2",
data: [null, null, 20001, null],
backgroundColor: "#063F84",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 3",
data: [null, null, null, 488],
backgroundColor: "#0D5AB7",
borderColor: "#ccc",
borderRadius: 5
},
{
label: "Respondent 2",
data: [null, null, null, 3999],
backgroundColor: "#063F84",
borderColor: "#ccc",
borderRadius: 5
}
],
labels: [
"2017 Fiscal Year (Jul-Jun) - H2",
"2022 Fiscal Year (Jan-Dec) - H2",
"2023 Fiscal Year (Jan-Dec) - H1",
"2023 Fiscal Year (Jan-Dec) - H2"
],
yAxisLabel: "Cubic Meters"
};
// Sort datasets based on the sum of their `data` values
chartData.datasets.sort((a, b) => {
const sumA = a.data.reduce((sum, val) => sum + (val || 0), 0); // Calculate sum of dataset A
const sumB = b.data.reduce((sum, val) => sum + (val || 0), 0); // Calculate sum of dataset B
return sumB - sumA; // Sort in descending order
});
if i understood you question correctly this would probably be the solution if not please give some clarification of what is wrong with the answer.
2