[Chartjs]-ChartJs: Different Fill Colour Between Data Points

by

11👍

✅

The fill color is for the entire series and not for areas between points.

However, since you don’t have tooltips (you had tooltipEvents set to an empty array), you can achieve what you want using 3 different series and the fact that Chart.js does not plot null values.

Different fillColors for a Line

Here’s what its going to look like

enter image description here

We make 3 series (you could do this programmatically if your data and ranges are dynamic – that’s more of a JavaScript question than a Chart.js one though)

var data = {
    labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
    datasets: [{
        data: [12.5, 3.1, null, null, null],
        fillColor: "rgba(151,205,187,0.2)",
        strokeColor: "rgba(151,205,187,1)",
        pointColor: "rgba(151,205,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,205,187,1)",
    }, {
        data: [null, 3.1, 3.3, 4.2, null],
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
    }, {
        data: [null, null, null, 4.2, 15.5],
        fillColor: "rgba(205,151,187,0.2)",
        strokeColor: "rgba(205,151,187,1)",
        pointColor: "rgba(205,151,187,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(205,151,187,1)",
    }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var options = {
   showTooltips: false,
   datasetFill: true,
}

var chart = new Chart(ctx).Line(data, options);

I’ve just adapted the code from your fiddle to show the relevant bits (it would work equally well with your LineWithLine extension)

You can rearrange the series if you want a certain color to come up on top at the junctions (-10m and -2m in your data). The later series’ color takes precedence.

Fiddle – https://jsfiddle.net/kurtybra/

Leave a comment