[Chartjs]-Chart.js vertically symmetrical chart

by

2👍

✅

If you happen to take a look in Chart.js docs, you may see you can create plugins for your chart.
Plugins let you handle some events such as beforeUpdate, afterDraw, etc. to edit your graph before displaying it (to add some data) or after everything is draw (to draw something above all).

For what you want, you’d need the beforeInit event since you need to edit your chart before it is created.

By the way, plugins are created like this : 

Chart.pluginService.register({
    beforeInit: function(chart) {
        // what you put here will be done before the chart initiates
    }
});

Now you know what to use to do what you want.

I still made an example, where I created another dataset with the exact same data, but in negative.
You can see the result here.

I needed to use jQuery, to make a clone of the first dataset (see this answer).
I couldn’t make it work without it, but if you find a way, I’d like to hear it.

Leave a comment