Chart.js: Line chart with partial dashed line

Question

I'm trying to draw a line chart which should display a line partially solid and partially dashed (to represent real and expected data). I've found this example that works perfectly on version 2.0.0-alpha

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],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

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

<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<canvas id="chart"/>

But when I run the same code with the current 2.1.3 version the lines don't overlap correctly (between points D and E):

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],
        pointBackgroundColor: "transparent"
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
        pointBackgroundColor: "transparent"
    }]
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="chart"/>

Unfortunately I cannot use the alpha version because of other bugs that are resolved in the current release. Any way to replicate the graph in the first snippet with the release version?

Answer 1

One solution may be: set values of dataset(1) to null when it isn't visible. This line does not create a bezier Curve, it's the inconvenience.

Example:

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

};

https://jsfiddle.net/scs_3/8qqv69ot/