pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
pointStyle | `String, Array<String>, Image, Array<Image>` | 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
An example data object using these attributes is shown below.
```javascript
}
};
+ function lineEnabled(dataset, options) {
+ return helpers.getValueOrDefault(dataset.showLine, options.showLines);
+ }
+
Chart.controllers.line = Chart.DatasetController.extend({
datasetElementType: Chart.elements.Line,
Chart.DatasetController.prototype.addElementAndReset.call(me, index);
// Make sure bezier control points are updated
- if (options.showLines && meta.dataset._model.tension !== 0) {
+ if (lineEnabled(me.getDataset(), options) && meta.dataset._model.tension !== 0) {
me.updateBezierControlPoints();
}
},
var options = me.chart.options;
var lineElementOptions = options.elements.line;
var scale = me.getScaleForId(meta.yAxisID);
- var i, ilen, dataset, custom;
+ var i, ilen, custom;
+ var dataset = me.getDataset();
+ var showLine = lineEnabled(dataset, options);
// Update Line
- if (options.showLines) {
- dataset = me.getDataset();
+ if (showLine) {
custom = line.custom || {};
// Compatibility: If the properties are defined with only the old name, use those values
me.updateElement(points[i], i, reset);
}
- if (options.showLines && line._model.tension !== 0) {
+ if (showLine && line._model.tension !== 0) {
me.updateBezierControlPoints();
}
},
draw: function(ease) {
+ var me = this;
var meta = this.getMeta();
var points = meta.data || [];
var easingDecimal = ease || 1;
}
// Transition and Draw the line
- if (this.chart.options.showLines) {
+ if (lineEnabled(me.getDataset(), me.chart.options)) {
meta.dataset.transition(easingDecimal).draw();
}
expect(meta.data[3].draw.calls.count()).toBe(1);
});
+ it('should draw all elements except lines turned off per dataset', function() {
+ var chart = window.acquireChart({
+ type: 'line',
+ data: {
+ datasets: [{
+ data: [10, 15, 0, -4],
+ label: 'dataset1',
+ showLine: false
+ }],
+ labels: ['label1', 'label2', 'label3', 'label4']
+ },
+ options: {
+ showLines: true
+ }
+ });
+
+ var meta = chart.getDatasetMeta(0);
+ spyOn(meta.dataset, 'draw');
+ spyOn(meta.data[0], 'draw');
+ spyOn(meta.data[1], 'draw');
+ spyOn(meta.data[2], 'draw');
+ spyOn(meta.data[3], 'draw');
+
+ chart.update();
+
+ expect(meta.dataset.draw.calls.count()).toBe(0);
+ expect(meta.data[0].draw.calls.count()).toBe(1);
+ expect(meta.data[1].draw.calls.count()).toBe(1);
+ expect(meta.data[2].draw.calls.count()).toBe(1);
+ expect(meta.data[3].draw.calls.count()).toBe(1);
+ });
+
it('should update elements when modifying data', function() {
var chart = window.acquireChart({
type: 'line',