diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md index 75950eada..bf90e5b3c 100644 --- a/docs/01-Chart-Configuration.md +++ b/docs/01-Chart-Configuration.md @@ -355,6 +355,7 @@ borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozil borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) fill | Boolean | true | If true, the line is filled. +stepped | `Boolean` | If true, the line is shown as a steeped line and 'tension' will be ignored #### Point Configuration diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md index d4b6ea902..bc7a71a6c 100644 --- a/docs/03-Line-Chart.md +++ b/docs/03-Line-Chart.md @@ -59,6 +59,7 @@ pointHoverBorderWidth | `Number or Array` | Border width of point when h pointStyle | `String, Array, Image, Array` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. showLine | `Boolean` | If false, the line is not drawn for this dataset spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data +steppedLine | `Boolean` | If true, the line is shown as a steeped line and 'lineTension' will be ignored An example data object using these attributes is shown below. ```javascript diff --git a/samples/line-stepped.html b/samples/line-stepped.html new file mode 100644 index 000000000..f9e456493 --- /dev/null +++ b/samples/line-stepped.html @@ -0,0 +1,224 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + + + + + + diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index f3d7328d4..caee9c683 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -89,6 +89,7 @@ module.exports = function(Chart) { borderDashOffset: custom.borderDashOffset ? custom.borderDashOffset : (dataset.borderDashOffset || lineElementOptions.borderDashOffset), borderJoinStyle: custom.borderJoinStyle ? custom.borderJoinStyle : (dataset.borderJoinStyle || lineElementOptions.borderJoinStyle), fill: custom.fill ? custom.fill : (dataset.fill !== undefined ? dataset.fill : lineElementOptions.fill), + steppedLine: custom.steppedLine ? custom.steppedLine : helpers.getValueOrDefault(dataset.steppedLine, lineElementOptions.stepped), // Scale scaleTop: scale.top, scaleBottom: scale.bottom, @@ -202,6 +203,7 @@ module.exports = function(Chart) { borderColor: me.getPointBorderColor(point, index), borderWidth: me.getPointBorderWidth(point, index), tension: meta.dataset._model ? meta.dataset._model.tension : 0, + steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false, // Tooltip hitRadius: custom.hitRadius || helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, pointOptions.hitRadius) }; diff --git a/src/elements/element.line.js b/src/elements/element.line.js index ba7fdf703..21a609544 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -27,6 +27,9 @@ module.exports = function(Chart) { skipHandler.call(me, previousPoint, point, nextPoint); } else if (previousPoint._view.skip && !spanGaps) { previousSkipHandler.call(me, previousPoint, point, nextPoint); + } else if (point._view.steppedLine === true) { + ctx.lineTo(point._view.x, previousPoint._view.y); + ctx.lineTo(point._view.x, point._view.y); } else if (point._view.tension === 0) { ctx.lineTo(point._view.x, point._view.y); } else {