Step line with zero values ​​in chart.js

Question

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

I would like to draw a stepped line that has a gap between 2012 and 2013 . When I set steppedLine to true , it only drew a vertical line in 2011 , but not a horizontal line for connecting 2011 and 2012 , since 2012 is null . If I set spanGaps to true , it will draw a line from 2011 to 2013 with a value of 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 the 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

It may not be exactly what you want, but you can just add another point in 2012 with the same value as 2011 , and then the other data point in 2012 will be null to create a gap between 2012 and 2013 , although it will create a point in 2012 .

Jsfiddle

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

This will be the only change to your current code.