Chartjs Plugin Sorting

The Chart.js sorting plugin is a plugin that allows you to quickly sort the bar chart ASC (low to high), DESC (high to low) and reset the values back to initial load. 

The idea came based on a comment of a viewer who was wondering why Chart.js sorting option has been so complicated and this simple feature should be built in. After contemplating it, realizing it would be quite doable this plugin was made. 

Chartjs Plugin Sorting or better the Sorting Plugin for Chart.js makes sorting a breeze. Removing the option to code you own. 

Débuter

How to install? To install this you will need to add the JavaScript file of the sorting plugin into your HTML file. Make sure you add this after the Chart.js Library file. 

Once you did that you need to activate the file. It has been added but it is still on standby. To activate the file we need to register the Chart.js plugin. Understanding that it is now ready to start. 

To do this we use the command with the plugin name, which is ‘ChartjsPluginSorting’.  

// Register ChartjsPluginSorting
Chart.register(ChartjsPluginSorting)

Once registered, and loaded correctly you will see the three buttons immediately and the bar chart can be sorted. All the buttons are nested within a DIV container. 

The three Buttons

The Sorting Plugin for Chart.js has three buttons. All buttons are built in HTML. Which means that adding css styling to these buttons is easy by assigning a class to each specific button. 

There buttons are: 

• ASC or Low to High Button
• DESC or High to Low Button
• Reset Button

ASC or Low to High Button

The ASC or Low to High Button will sort the values from low to high. If there are multiple identical values it will sort them according to lowest values and alphabetical order based on the x scale labels of the category scale type. 

How to customize the ASC Button:

DESC or High to Low Button

The DESC or High to Low Button will sort the values from high to low. If there are multiple identical values it will sort them according to highest values and the reversed alphabetical order based on the x scale labels of the category scale type. 

How to customize the DESC Button:

Reset Button

The reset button is self explanatory and will reset the values back to initial load.

How to customize the Reset Button.