CODEWITHSUNDEEP
javascriptanalyticschart.js
Arijit Bhattacharya
Arijit Bhattacharya

Reputation: 1285

Can we draw a Line Chart with both solid and dotted line in it?

In real time analytics, you might want to state explicitly, that the present day has not been over yet and the data for the day is incomplete.

So, you might want to draw the line that joins the last and the penultimate point with a dotted stroke.

This is how Mixpanel does it.

enter image description here

Can this be done using the Chart JS v2 pre-alpha?

Upvotes: 5

Views: 7363

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 6

Related Questions