diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md index 7f92c0dd6..d3e89dcb3 100644 --- a/docs/02-Line-Chart.md +++ b/docs/02-Line-Chart.md @@ -120,6 +120,7 @@ The default options for line chart are defined in `Chart.defaults.Line`. Name | Type | Default | Description --- | --- | --- | --- +showLines | Boolean | true | If false, the lines between points are not drawn stacked | Boolean | false | If true, lines stack on top of each other along the y axis. *hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset. scales | - | - | - diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 3e87c9532..fcef8af47 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -7,6 +7,8 @@ helpers = Chart.helpers; Chart.defaults.line = { + showLines: true, + hover: { mode: "label" }, @@ -58,7 +60,8 @@ this.getDataset().metaData.splice(index, 0, point); // Make sure bezier control points are updated - this.updateBezierControlPoints(); + if (this.chart.options.showLines) + this.updateBezierControlPoints(); }, update: function update(reset) { @@ -78,38 +81,41 @@ } // Update Line - helpers.extend(line, { - // Utility - _scale: yScale, - _datasetIndex: this.index, - // Data - _children: points, - // Model - _model: { - // Appearance - tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), - backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), - borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), - borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), - borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle), - borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash), - borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset), - borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle), - fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill), - // Scale - scaleTop: yScale.top, - scaleBottom: yScale.bottom, - scaleZero: scaleBase, - }, - }); - line.pivot(); + if (this.chart.options.showLines) { + helpers.extend(line, { + // Utility + _scale: yScale, + _datasetIndex: this.index, + // Data + _children: points, + // Model + _model: { + // Appearance + tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), + backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), + borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), + borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), + borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle), + borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash), + borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset), + borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle), + fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill), + // Scale + scaleTop: yScale.top, + scaleBottom: yScale.bottom, + scaleZero: scaleBase, + }, + }); + line.pivot(); + } // Update Points helpers.each(points, function(point, index) { this.updateElement(point, index, reset); }, this); - this.updateBezierControlPoints(); + if (this.chart.options.showLines) + this.updateBezierControlPoints(); }, getPointBackgroundColor: function(point, index) { @@ -258,7 +264,8 @@ }, this); // Transition and Draw the line - this.getDataset().metaDataset.transition(easingDecimal).draw(); + if (this.chart.options.showLines) + this.getDataset().metaDataset.transition(easingDecimal).draw(); // Draw the points helpers.each(this.getDataset().metaData, function(point) { diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js index 1b918dff9..136c93c17 100644 --- a/test/controller.line.tests.js +++ b/test/controller.line.tests.js @@ -87,6 +87,7 @@ describe('Line controller tests', function() { type: 'line' }, options: { + showLines: true, scales: { xAxes: [{ id: 'firstXScaleID' @@ -114,6 +115,45 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1); }); + it('should draw all elements except lines', function() { + var chart = { + data: { + datasets: [{ + data: [10, 15, 0, -4] + }] + }, + config: { + type: 'line' + }, + options: { + showLines: false, + scales: { + xAxes: [{ + id: 'firstXScaleID' + }], + yAxes: [{ + id: 'firstYScaleID' + }] + } + } + }; + + var controller = new Chart.controllers.line(chart, 0); + + spyOn(chart.data.datasets[0].metaDataset, 'draw'); + spyOn(chart.data.datasets[0].metaData[0], 'draw'); + spyOn(chart.data.datasets[0].metaData[1], 'draw'); + spyOn(chart.data.datasets[0].metaData[2], 'draw'); + spyOn(chart.data.datasets[0].metaData[3], 'draw'); + + controller.draw(); + + expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(0); + expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1); + expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1); + expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1); + }); + it('should update elements', function() { var data = { datasets: [{ @@ -177,6 +217,7 @@ describe('Line controller tests', function() { type: 'line' }, options: { + showLines: true, elements: { line: { backgroundColor: 'rgb(255, 0, 0)',