[Chartjs]-Can we draw a Line Chart with both solid and dotted line in it?

by

5👍

Yes, but you have to work around a couple of glitches

Warning: Sub-optimal example to work around glitches

var lineChartData = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, 3, 4],
        borderColor: '#66f',
        borderDash: [20, 30]
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
    }]
};

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        elements: {
            line: {
                fill: false
            }
        }
    }
});

Notice that the first dataset doesn’t have the values set to blank and that 2nd dataset has one extra value than required – these effectively work around a couple of glitches (including https://github.com/nnnick/Chart.js/issues/1284)

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

Leave a comment