Use the dataset backgroundColor, borderWidth, and borderColor, if specified, for...

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 954686e06af39fffff5e006f0aca43db6e68ff5e..e8d08ba0e5db33e329d65b377ae53cbae5c65ee7 100644 (file)
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -169,6 +169,49 @@
                        this.updateBezierControlPoints();
                },
 
+               getPointBackgroundColor: function(point, index) {
+                       var backgroundColor = this.chart.options.elements.point.backgroundColor;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.backgroundColor) {
+                               backgroundColor = point.custom.backgroundColor;
+                       } else if (dataset.pointBackgroundColor) {
+                               backgroundColor = helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, backgroundColor);
+                       } else if (dataset.backgroundColor) {
+                               backgroundColor = dataset.backgroundColor;
+                       }
+
+                       return backgroundColor;
+               },
+               getPointBorderColor: function(point, index) {
+                       var borderColor = this.chart.options.elements.point.borderColor;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.borderColor) {
+                               borderColor = point.custom.borderColor;
+                       } else if (dataset.pointBorderColor) {
+                               borderColor = helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, borderColor);
+                       } else if (dataset.borderColor) {
+                               borderColor = dataset.borderColor;
+                       }
+
+                       return borderColor;
+               },
+               getPointBorderWidth: function(point, index) {
+                       var borderWidth = this.chart.options.elements.point.borderWidth;
+                       var dataset = this.getDataset();
+
+                       if (point.custom && point.custom.borderWidth !== undefined) {
+                               borderWidth = point.custom.borderWidth;
+                       } else if (dataset.pointBorderWidth !== undefined) {
+                               borderWidth = helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, borderWidth);
+                       } else if (dataset.borderWidth !== undefined) {
+                               borderWidth = dataset.borderWidth;
+                       }
+
+                       return borderWidth;
+               },
+
                updateElement: function(point, index, reset) {
                        var yScale = this.getScaleForId(this.getDataset().yAxisID);
                        var xScale = this.getScaleForId(this.getDataset().xAxisID);
@@ -197,9 +240,9 @@
                                        // Appearance
                                        tension: point.custom && point.custom.tension ? point.custom.tension : (this.getDataset().tension || this.chart.options.elements.line.tension),
                                        radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
-                                       backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
-                                       borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
-                                       borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
+                                       backgroundColor: this.getPointBackgroundColor(point, index),
+                                       borderColor: this.getPointBorderColor(point, index),
+                                       borderWidth: this.getPointBorderWidth(point, index),
                                        // Tooltip
                                        hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
                                },
@@ -312,9 +355,9 @@
                        var index = point._index;
 
                        point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius);
-                       point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor);
-                       point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor);
-                       point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
+                       point._model.backgroundColor = this.getPointBackgroundColor(point, index);
+                       point._model.borderColor = this.getPointBorderColor(point, index);
+                       point._model.borderWidth = this.getPointBorderWidth(point, index);
                }
        });
 }).call(this);

diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js
index 7e86c99bdb76d380b0039e0795b18e744ef5d526..20ae0328cd325c81cd13ee4ffc97ca41a0cccd1e 100644 (file)
--- a/test/controller.line.tests.js
+++ b/test/controller.line.tests.js
@@ -516,6 +516,114 @@ describe('Line controller tests', function() {
                });
        });
 
+       it ('should fall back to the line styles for points', function() {
+               var data = {
+                       datasets: [{
+                               data: [0, 0],
+                               label: 'dataset2',
+                               xAxisID: 'firstXScaleID',
+                               yAxisID: 'firstYScaleID',
+
+                               // line styles
+                               backgroundColor: 'rgb(98, 98, 98)',
+                               borderColor: 'rgb(8, 8, 8)',
+                               borderWidth: 0.55,
+                       }],
+                       labels: ['label1', 'label2']
+               };
+               var mockContext = window.createMockContext();
+
+               var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+               var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+               verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.line.scales.yAxes[0]);
+               var yScale = new VerticalScaleConstructor({
+                       ctx: mockContext,
+                       options: verticalScaleConfig,
+                       data: data,
+                       id: 'firstYScaleID'
+               });
+
+               // Update ticks & set physical dimensions
+               var verticalSize = yScale.update(50, 200);
+               yScale.top = 0;
+               yScale.left = 0;
+               yScale.right = verticalSize.width;
+               yScale.bottom = verticalSize.height;
+
+               var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+               var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+               horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.line.scales.xAxes[0]);
+               var xScale = new HorizontalScaleConstructor({
+                       ctx: mockContext,
+                       options: horizontalScaleConfig,
+                       data: data,
+                       id: 'firstXScaleID'
+               });
+
+               // Update ticks & set physical dimensions
+               var horizontalSize = xScale.update(200, 50);
+               xScale.left = yScale.right;
+               xScale.top = yScale.bottom;
+               xScale.right = horizontalSize.width + xScale.left;
+               xScale.bottom = horizontalSize.height + xScale.top;
+
+               var chart = {
+                       chartArea: {
+                               bottom: 200,
+                               left: xScale.left,
+                               right: 200,
+                               top: 0
+                       },
+                       data: data,
+                       config: {
+                               type: 'line'
+                       },
+                       options: {
+                               elements: {
+                                       line: {
+                                               backgroundColor: 'rgb(255, 0, 0)',
+                                               borderCapStyle: 'round',
+                                               borderColor: 'rgb(0, 255, 0)',
+                                               borderDash: [],
+                                               borderDashOffset: 0.1,
+                                               borderJoinStyle: 'bevel',
+                                               borderWidth: 1.2,
+                                               fill: true,
+                                               tension: 0.1,
+                                       },
+                                       point: {
+                                               backgroundColor: Chart.defaults.global.defaultColor,
+                                               borderWidth: 1,
+                                               borderColor: Chart.defaults.global.defaultColor,
+                                               hitRadius: 1,
+                                               hoverRadius: 4,
+                                               hoverBorderWidth: 1,
+                                               radius: 3,
+                                       }
+                               },
+                               scales: {
+                                       xAxes: [{
+                                               id: 'firstXScaleID'
+                                       }],
+                                       yAxes: [{
+                                               id: 'firstYScaleID'
+                                       }]
+                               }
+                       },
+                       scales: {
+                               firstXScaleID: xScale,
+                               firstYScaleID: yScale,
+                       }
+               };
+
+               var controller = new Chart.controllers.line(chart, 0);
+               controller.update();
+
+               expect(chart.data.datasets[0].metaData[0]._model.backgroundColor).toBe('rgb(98, 98, 98)');
+               expect(chart.data.datasets[0].metaData[0]._model.borderColor).toBe('rgb(8, 8, 8)');
+               expect(chart.data.datasets[0].metaData[0]._model.borderWidth).toBe(0.55);
+       });
+
        it('should handle number of data point changes in update', function() {
                var data = {
                        datasets: [{