Question

I'm trying to create a line chart that has different line/background colors when its a specific value.

I've tried alot of different things. First of all i made one dataset with an array of colors using a for-loop to get different colors but it didn't work out.

Then i searched for different options and found this post: https://github.com/chartjs/Chart.js/issues/2430

This is the result i want to become but it doesn't give a solution. Now i'm trying with two datasets and i get this:

https://imgur.com/dmASkro

You can see that i have gaps between the two datasets and thats is the problem i want to solve. If i try spanGaps: true i get this:

https://imgur.com/a/PBCHrxS

var chartData = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [
        {
            data: [null, null, 6, 10, null, null, 8, null, null, null, null, null],
            backgroundColor: 'rgba(255, 0, 0, .3)',
            spanGaps: false

        },
        {
            data: [18, 4, null, null, 2, 8, null, 5, 3, 1, 5, 4],
            backgroundColor: 'rgba(0, 255, 0, .3)',
            spanGaps: false
        }
    ]
};

window.onload = function () {
    var ctx = document.getElementById("canvas").getContext("2d");
    new Chart(ctx, {
        type: "line",
        data: chartData,       
    });
};

I'm trying to get this result:

https://imgur.com/a/DXOzW5a

Chart.js line chart different colors line/background

0 个答案: