Chartist - area fill different colours above and below threshold

180 Views Asked by At

I am using chartist.js, there doesn't seem to be a forum anywhere :o(

I have created a chart using the threshold plugin and area fill. With a threshold of 0 it looks like this with the enclosed areas above and below the threshold filled. Pretty cool and easy.

enter image description here

But I would like it to look like the chart below, where the enclosed areas above and the not-enclosed areas below are filled.

enter image description here

This is for a flood level alert system where I want below the threshold to appear "safe" but when above the threshold, i.e. flooded, it is red and therefore highlighted.

Is this possible with chartist?

new Chartist.Line('.ct-chart', {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
        [5, -4, 3, -7, -10, -2, 3, 4, 0, -4, 6, -8]
    ]
}, 
{
    axisY: {
        onlyInteger: true
    },
    width: 600,
    height: 400,
    //showArea: true,
    lineSmooth: false,
    low: -15,
    plugins: [
        Chartist.plugins.ctThreshold({
            threshold: 0
        })
    ]
});
0

There are 0 best solutions below