Chart.js: Is it possible to reorder bars in a bar graph?

[TomFevrier]

Hi guys !

Here is the thing : I created a horizontal bar graph whose data is to change according to various inputs. Is it possible to make it so that the bars "rearrange" themselves in ascending or descending order ?
For the moment I'm using a quicksort algorithm to reorder the data and associated labels, but as a result the labels just "change", I would prefer to have an animation showing the bars "reordering".

https://jsbin.com/yocisatawe/edit?js

Note : This is not a support request, I just want to know if this is possible (I could not find anything in the documentation), if it is then how, and if it is not if it could be implemented.

Thank you very much !
Tom.

[etimberg]

@TomFevrier I don't think this is currently possible. The reason is that when updating each dataset controller, here items are not shuffled during updates, ie the 3rd bar object remains the 3rd bar during the update.

To be able to get the animation you desire, the buildOrUpdateElements method probably needs to be extended to do the same sorting. The key though is going to be to make sure that the shuffle happens exactly as required. Then, when update runs on the controller, the x coordinate of the bars will be updated and the animation should work.

[TomFevrier]

@etimberg Thank you very much, so if I understand right I need to edit the buildOrUpdateElements method which is in the source code of Chart.js ? I have absolutely no idea on how to implement this...

[etimberg]

@TomFevrier yeah, you'd need to edit the method on the internal controller for each dataset.

I think with a prebuilt version, this is Chart.DatasetController.prototype.buildOrUpdateElements. You could patch that to add some kind of hook to use to trigger your changes.

Another option is to use the beforeUpdate plugin call to do the shuffle for you. That would make it a lot easier.

Chart.plugins.register({
  beforeUpdate: function(chart) {
    var meta = chart.getDatasetMeta(0); // parameter is the index of the dataset
    // meta.data is the array of elements (bar objects) for the dataset
   // shuffle the meta.dataset array here to be the same order as your new data.
  }
});

Here's an example of what I was thinking (I am surprised it works, I am still in need of a ☕️)
https://jsfiddle.net/fx0a6o6q/1/ I cannot guarantee nothing was broken by this or that this is the most efficient way to solve this problem, it's just the first solution I thought of.

[TomFevrier]

@etimberg Thank you very much, that is exactly what I had in mind, though I don't understand everything you did. The only issue is that the labels (and colors) do not rearrange themselves, do you know how to do this ? And could you explain how this works, I am afraid I am a newbie in JavaScript :stuck_out_tongue:

Have a good :coffee: and thanks for you time !

[etimberg]

@TomFevrier unfortunately the axis labels are not able to animate without a lot of changes to the library internals.

Here's an updated version that moves the colours and adds some comments https://jsfiddle.net/fx0a6o6q/3/

[TomFevrier]

@etimberg Thank you very much, I understand now. It is great even without animated labels, and this will be very useful for my project.

[etimberg]

Closing as resolved

[SerapGorucu]

@etimberg i used your code to create sorted bar graph. My problem is i have 33 data points and i just want to show 10 of them in the bar graph. Does anybody know how can i do this?

Thanks
Serap

[karantewari]

@etimberg man!!! I used your code in my react app, and it worked seamlessly. Thanks a ton :)

[douwevdijk]

This works perfect on initial data load, but how can this be achieved when data changes?

[guillaumelauzier]

What are the alternatives to sort() method in chartjs with text and integer groups?