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

Question

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.

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

Answer 1

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/