Custom sorting of bars within x-axis groups

Question

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:

1. restructuring the data property in each dataset to match the object structure option
2. using a singular data object and "parsing" properties in each dataset in the datasets array
3. manipulating the datasets array to isolate datapoints across numerous dataset objects with the same label

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...

Answer 1

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.