carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
904 stars 184 forks source link

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

Open pratikkarad opened 1 year ago

pratikkarad commented 1 year ago

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 }

Akshat55 commented 1 year ago

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