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=".js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<canvas id="chart"/>

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./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./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?

• javascript
• line
• chart.js

• what if you add the whole data to the dashed to... – vaso123 Commented May 23, 2016 at 12:27
• 1 @lolka_bolka the dashed line already has all the data points, but it doesn't overlap correctly and you can see part of it behind the solid line – Marco Lepore Commented May 24, 2016 at 13:18

1 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/scs_3/8qqv69ot/