diff --git a/docs/01-Scales.md b/docs/01-Scales.md index efb3a893f..ceacdaa56 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -63,8 +63,8 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update *ticks*.display | Boolean | true | If true, show the ticks. *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value. *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value. -*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. -*ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value +*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. +*ticks*.max | Number | - | User defined maximum number for the scale, overrides maximum value *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart. diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md index 011f1e1c1..c2795dece 100644 --- a/docs/03-Bar-Chart.md +++ b/docs/03-Bar-Chart.md @@ -79,7 +79,6 @@ The default options for bar chart are defined in `Chart.defaults.bar`. Name | Type | Default | Description --- |:---:| --- | --- -stacked | Boolean | false | *hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset. scales | Object | - | - *scales*.xAxes | Array | | The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes. @@ -87,6 +86,7 @@ scales | Object | - | - type | String | "Category" | As defined in [Scales](#scales-category-scale). display | Boolean | true | If true, show the scale. id | String | "x-axis-1" | Id of the axis so that data can bind to it +stacked | Boolean | false | If true, bars are stacked on the x-axis categoryPercentage | Number | 0.8 | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [Read More](#bar-chart-barpercentage-vs-categorypercentage) barPercentage | Number | 0.9 | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [Read More](#bar-chart-barpercentage-vs-categorypercentage) gridLines | Object | [See Scales](#scales) | @@ -97,6 +97,7 @@ gridLines | Object | [See Scales](#scales) | type | String | "linear" | As defined in [Scales](#scales-linear-scale). display | Boolean | true | If true, show the scale. id | String | "y-axis-1" | Id of the axis so that data can bind to it. +stacked | Boolean | false | If true, bars are stacked on the y-axis You can override these for your `Chart` instance by passing a second argument into the `Bar` method as an object with the keys you want to override. @@ -156,4 +157,4 @@ Sample: |==============| Bar: |1.||1.| Category: | .5 | Sample: |==============| -``` \ No newline at end of file +``` diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 0f7d4a117..4c35167f6 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -299,8 +299,8 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[rectangle._datasetIndex]; var index = rectangle._index; - rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(rectangle._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(rectangle._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + rectangle._model.backgroundColor = rectangle.custom && rectangle.custom.hoverBackgroundColor ? rectangle.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(rectangle._model.backgroundColor)); + rectangle._model.borderColor = rectangle.custom && rectangle.custom.hoverBorderColor ? rectangle.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(rectangle._model.borderColor)); rectangle._model.borderWidth = rectangle.custom && rectangle.custom.hoverBorderWidth ? rectangle.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, rectangle._model.borderWidth); }, diff --git a/src/controllers/controller.bubble.js b/src/controllers/controller.bubble.js index 82ff94bc1..23500c29f 100644 --- a/src/controllers/controller.bubble.js +++ b/src/controllers/controller.bubble.js @@ -146,8 +146,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : (helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.chart.options.elements.point.hoverRadius)) + this.getRadius(this.getDataset().data[point._index]); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, point._model.borderWidth); }, @@ -161,4 +161,4 @@ module.exports = function(Chart) { point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth); } }); -}; \ No newline at end of file +}; diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 7170ecccf..347386b66 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -250,8 +250,8 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[arc._datasetIndex]; var index = arc._index; - arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(arc._model.backgroundColor)); + arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(arc._model.borderColor)); arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth); }, diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 81733785f..e863399b8 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -291,8 +291,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); }, diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 0b64c9248..e08365add 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -209,8 +209,8 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[arc._datasetIndex]; var index = arc._index; - arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(arc._model.backgroundColor)); + arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(arc._model.borderColor)); arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth); }, diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 2c13fa817..423c3ed97 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -191,8 +191,8 @@ module.exports = function(Chart) { var index = point._index; point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); - point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.getHoverColor(point._model.backgroundColor)); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.getHoverColor(point._model.borderColor)); point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth); }, @@ -206,4 +206,4 @@ module.exports = function(Chart) { point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth); } }); -}; \ No newline at end of file +}; diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js index 7d3983fa8..5d4094713 100644 --- a/src/core/core.helpers.js +++ b/src/core/core.helpers.js @@ -943,5 +943,10 @@ module.exports = function(Chart) { fn.apply(_tArg, args); } }; - + helpers.getHoverColor = function(color) { + /* global CanvasPattern */ + return (color instanceof CanvasPattern) ? + color : + helpers.color(color).saturate(0.5).darken(0.1).rgbString(); + }; }; diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js index e7b981062..3815620e7 100644 --- a/test/core.helpers.tests.js +++ b/test/core.helpers.tests.js @@ -688,4 +688,29 @@ describe('Core helper tests', function() { }); }); + describe('Background hover color helper', function() { + it('should return a CanvasPattern when called with a CanvasPattern', function(done) { + var dots = new Image(); + dots.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAD1BMVEUAAAD///////////////+PQt5oAAAABXRSTlMAHlFhZsfk/BEAAAAqSURBVHgBY2BgZGJmYmSAAUYWEIDzmcBcJhiXGcxlRpPFrhdmMiqgvX0AcGIBEUAo6UAAAAAASUVORK5CYII='; + dots.onload = function() { + var chartContext = document.createElement('canvas').getContext('2d'); + var patternCanvas = document.createElement('canvas'); + var patternContext = patternCanvas.getContext('2d'); + var pattern = patternContext.createPattern(dots, 'repeat'); + patternContext.fillStyle = pattern; + + var backgroundColor = helpers.getHoverColor(chartContext.createPattern(patternCanvas, 'repeat')); + + expect(backgroundColor instanceof CanvasPattern).toBe(true); + + done(); + } + }); + + it('should return a modified version of color when called with a color', function() { + var originalColorRGB = 'rgb(70, 191, 189)'; + + expect(helpers.getHoverColor('#46BFBD')).not.toEqual(originalColorRGB); + }); + }); });