Chart.js vertically symmetrical chart

Question

I have a chart made in Chart.js like so:

<canvas id="customer_chart" height="50"></canvas>

<script>
var ctx = document.getElementById('customer_chart').getContext('2d');

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['', 'Conference', 'Webinar', 'Trial'],
        datasets: [{
            label: 'Pipeline',
            lineTension: 0.3,
            data: [0, 10, 20, 15],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
            ],
        }],
    }
})
</script>

But what I want is something like this (without the numbers on the left upside down, lazy edit):

But I don't see any immediately obvious way to do this. Any ideas?

score 2 · Accepted Answer · edited May 23 '17 at 11:46

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.

Chart.js vertically symmetrical chart

1 Answers1