Stepped line with null values in chart.js

Question

I have data: [10,5,null,10,5], and labels: [2010, 2011, 2012, 2013, 2014]

I'd like to draw a stepped line which has a gap between 2012 and 2013. When I set steppedLine to true, it only drew a vertical line at 2011 but no horizontal line to connect 2011 and 2012, as the value of 2012 is null. If I set spanGaps to true, it will draw a line from 2011 to 2013 at value 5.

Basically what I'm looking for is to draw a line if the starting value is a number and the ending value is null, but not vice versa

JSFiddle

Related codes in controller:

    _this.lines = {};
    _this.lines.labels = [2010,2011,2012,2013,2014];
    _this.lines.data = [
        [10, 5, null, 10, 5]    
    ];
    _this.lines.series = ['Now'];
    _this.lines.options = {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    parser: 'DD MMM YYYY'
                }
            }],
            yAxes: [{
                type: 'linear',
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };
    _this.lines.datasetOverride = [{
        fill: false,
        spanGaps: true,
        steppedLine: true
        },
    ];

HTML:

<canvas class="chart chart-line" chart-labels="ctrl.lines.labels" chart-data="ctrl.lines.data" chart-options="ctrl.lines.options" chart-series="ctrl.lines.series" chart-dataset-override="ctrl.lines.datasetOverride" height="140" responsive=true></canvas>

Answer 1

This might not be exactly what you want but you can just add another point at 2012 with the same value as 2011 and then another data point at 2012 will null so it'll create a gap between 2012 and 2013, although it will create a point at 2012.

JSFiddle

_this.lines.labels = [2010,2011,2012,2012,2013,2014];
_this.lines.data = [
    [10, 5,5,null, 10, 5]    
];

This would be the only change to your current code