carbon-charts icon indicating copy to clipboard operation
carbon-charts copied to clipboard

[Question] Is it possible to sort x axis data on Simple Bar chart

Open pratikkarad opened this issue 2 years ago • 1 comments

Current behavior:

I am not able to sort the X-axis labels based on Y-axis values

Expected behavior:

As a user, I want to sort the X-axis labels based on Y-axis values. So for the following chart,

image

I want to see the X-axis labels Qty, Restocking, Sold, More, Misc respectively. So options prop should contain the facility to sort the X-axis labels. Something like this data: {}, options: { sortable: true }

pratikkarad avatar Oct 12 '22 13:10 pratikkarad

Apologies for the late response.

There is no sorting option currently, the order of the X-axis labels is based on the order of the data that is passed. The array of data is traversed & every unique category stored, at least in this case.

However, if you do know the X-axis labels you can set a custom order by passing in an array of all domain values as such:

const options = {
  axes: {
    bottom: {
      domain: ["Qty", "Restocking", "Sold", "More", "Misc"]
    }
  }
};

You can view the example with the custom ordering of x-labels here: https://codesandbox.io/s/distracted-davinci-iegcbh?file=/src/index.js

Akshat55 avatar Oct 19 '22 21:10 Akshat55