diff --git a/docs/README.md b/docs/README.md
index fe0b60c5342..d0b0544ab0c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -14,11 +14,11 @@ In this example, we create a bar chart for a single dataset and render that in o
```html
+
```
Now, we can create a chart. We add a script to our page:
@@ -24,12 +24,12 @@ var chart = new Chart(ctx, {
// The data for our dataset
data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
- label: "My First dataset",
+ label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
- data: [0, 10, 5, 2, 20, 30, 45],
+ data: [0, 10, 5, 2, 20, 30, 45]
}]
},
@@ -40,4 +40,4 @@ var chart = new Chart(ctx, {
It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
-There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).
\ No newline at end of file
+All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index ea9daea2350..783bd13109c 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -40,7 +40,7 @@ If you download or clone the repository, you must [build](../developers/contribu
# Selecting the Correct Build
-Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
+Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**.
## Stand-Alone Build
Files:
@@ -54,4 +54,4 @@ Files:
* `dist/Chart.bundle.js`
* `dist/Chart.bundle.min.js`
-The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
diff --git a/docs/getting-started/integration.md b/docs/getting-started/integration.md
index 95ccbc46d0a..285bf195b92 100644
--- a/docs/getting-started/integration.md
+++ b/docs/getting-started/integration.md
@@ -28,9 +28,9 @@ var myChart = new Chart(ctx, {...});
## Require JS
```javascript
-require(['path/to/chartjs/dist/Chart.js'], function(Chart){
+require(['path/to/chartjs/dist/Chart.js'], function(Chart) {
var myChart = new Chart(ctx, {...});
});
```
-> **Important:** RequireJS [can **not** load CommonJS module as is](http://www.requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
+> **Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the built UMD files instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index 739c838596c..0a0d48b9962 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -11,10 +11,10 @@ To create a chart, we need to instantiate the `Chart` class. To do this, we need
```javascript
// Any of the following formats may be used
-var ctx = document.getElementById("myChart");
-var ctx = document.getElementById("myChart").getContext("2d");
-var ctx = $("#myChart");
-var ctx = "myChart";
+var ctx = document.getElementById('myChart');
+var ctx = document.getElementById('myChart').getContext('2d');
+var ctx = $('#myChart');
+var ctx = 'myChart';
```
Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
@@ -24,11 +24,11 @@ The following example instantiates a bar chart showing the number of votes for d
```html
-```
\ No newline at end of file
+```
diff --git a/docs/notes/README.md b/docs/notes/README.md
index 2795faebc85..94d9a69f2b2 100644
--- a/docs/notes/README.md
+++ b/docs/notes/README.md
@@ -1 +1 @@
-# Additional Notes
\ No newline at end of file
+# Additional Notes
diff --git a/docs/notes/comparison.md b/docs/notes/comparison.md
index 3cb9c99af83..b7a72316392 100644
--- a/docs/notes/comparison.md
+++ b/docs/notes/comparison.md
@@ -9,7 +9,7 @@ Library Features
| SVG | | ✓ | ✓ | ✓ |
| Built-in Charts | ✓ | | ✓ | ✓ |
| 8+ Chart Types | ✓ | ✓ | ✓ | |
-| Extendable to Custom Charts | ✓ | ✓ | | |
+| Extendable to Custom Charts | ✓ | ✓ | | |
| Supports Modern Browsers | ✓ | ✓ | ✓ | ✓ |
| Extensive Documentation | ✓ | ✓ | ✓ | ✓ |
| Open Source | ✓ | ✓ | | ✓ |
@@ -24,9 +24,8 @@ Built in Chart Types
| Horizontal Bar | ✓ | ✓ | ✓ |
| Pie/Doughnut | ✓ | ✓ | ✓ |
| Polar Area | ✓ | ✓ | |
-| Radar | ✓ | | |
+| Radar | ✓ | | |
| Scatter | ✓ | ✓ | ✓ |
| Bubble | ✓ | | |
| Gauges | | ✓ | |
| Maps (Heat/Tree/etc.) | | ✓ | |
-
diff --git a/docs/notes/extensions.md b/docs/notes/extensions.md
index 91d520a8ef5..f8f53f3d564 100644
--- a/docs/notes/extensions.md
+++ b/docs/notes/extensions.md
@@ -65,6 +65,6 @@ In addition, many plugins can be found on the [npm registry](https://www.npmjs.c
### Ember.js
- ember-cli-chart
-
+
### Omi (v5+)
- omi-chart
diff --git a/docs/notes/license.md b/docs/notes/license.md
index 01a0a1da561..9bc3c679231 100644
--- a/docs/notes/license.md
+++ b/docs/notes/license.md
@@ -1,3 +1,3 @@
# License
-Chart.js is open source and available under the MIT license.
\ No newline at end of file
+Chart.js is open source and available under the MIT license.
diff --git a/samples/charts/radar.html b/samples/charts/radar.html
index b08c3e81ccc..3f75863d102 100644
--- a/samples/charts/radar.html
+++ b/samples/charts/radar.html
@@ -102,7 +102,7 @@
label: 'Dataset ' + config.data.datasets.length,
borderColor: newColor,
backgroundColor: color(newColor).alpha(0.2).rgbString(),
- pointBorderColor: newColor,
+ pointBackgroundColor: newColor,
data: [],
};
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index e57d5e2ffb2..5341ac1e6dd 100644
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -44,17 +44,13 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var line = meta.dataset;
var points = meta.data || [];
- var options = me.chart.options;
- var lineElementOptions = options.elements.line;
var scale = me.getScaleForId(meta.yAxisID);
- var i, ilen, custom;
var dataset = me.getDataset();
- var showLine = lineEnabled(dataset, options);
+ var showLine = lineEnabled(dataset, me.chart.options);
+ var i, ilen;
// Update Line
if (showLine) {
- custom = line.custom || {};
-
// Compatibility: If the properties are defined with only the old name, use those values
if ((dataset.tension !== undefined) && (dataset.lineTension === undefined)) {
dataset.lineTension = dataset.tension;
@@ -66,24 +62,7 @@ module.exports = DatasetController.extend({
// Data
line._children = points;
// Model
- line._model = {
- // Appearance
- // The default behavior of lines is to break at null values, according
- // to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
- // This option gives lines the ability to span gaps
- spanGaps: valueOrDefault(dataset.spanGaps, options.spanGaps),
- tension: resolve([custom.tension, dataset.lineTension, lineElementOptions.tension]),
- backgroundColor: resolve([custom.backgroundColor, dataset.backgroundColor, lineElementOptions.backgroundColor]),
- borderWidth: resolve([custom.borderWidth, dataset.borderWidth, lineElementOptions.borderWidth]),
- borderColor: resolve([custom.borderColor, dataset.borderColor, lineElementOptions.borderColor]),
- borderCapStyle: resolve([custom.borderCapStyle, dataset.borderCapStyle, lineElementOptions.borderCapStyle]),
- borderDash: resolve([custom.borderDash, dataset.borderDash, lineElementOptions.borderDash]),
- borderDashOffset: resolve([custom.borderDashOffset, dataset.borderDashOffset, lineElementOptions.borderDashOffset]),
- borderJoinStyle: resolve([custom.borderJoinStyle, dataset.borderJoinStyle, lineElementOptions.borderJoinStyle]),
- fill: resolve([custom.fill, dataset.fill, lineElementOptions.fill]),
- steppedLine: resolve([custom.steppedLine, dataset.steppedLine, lineElementOptions.stepped]),
- cubicInterpolationMode: resolve([custom.cubicInterpolationMode, dataset.cubicInterpolationMode, lineElementOptions.cubicInterpolationMode]),
- };
+ line._model = me._resolveLineOptions(line);
line.pivot();
}
@@ -114,7 +93,7 @@ module.exports = DatasetController.extend({
var xScale = me.getScaleForId(meta.xAxisID);
var x, y;
- var options = me._resolveElementOptions(point, index);
+ var options = me._resolvePointOptions(point, index);
x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
@@ -148,12 +127,11 @@ module.exports = DatasetController.extend({
/**
* @private
*/
- _resolveElementOptions: function(point, index) {
+ _resolvePointOptions: function(element, index) {
var me = this;
var chart = me.chart;
- var datasets = chart.data.datasets;
- var dataset = datasets[me.index];
- var custom = point.custom || {};
+ var dataset = chart.data.datasets[me.index];
+ var custom = element.custom || {};
var options = chart.options.elements.point;
var values = {};
var i, ilen, key;
@@ -194,6 +172,50 @@ module.exports = DatasetController.extend({
return values;
},
+ /**
+ * @private
+ */
+ _resolveLineOptions: function(element) {
+ var me = this;
+ var chart = me.chart;
+ var dataset = chart.data.datasets[me.index];
+ var custom = element.custom || {};
+ var options = chart.options;
+ var elementOptions = options.elements.line;
+ var values = {};
+ var i, ilen, key;
+
+ var keys = [
+ 'backgroundColor',
+ 'borderWidth',
+ 'borderColor',
+ 'borderCapStyle',
+ 'borderDash',
+ 'borderDashOffset',
+ 'borderJoinStyle',
+ 'fill',
+ 'cubicInterpolationMode'
+ ];
+
+ for (i = 0, ilen = keys.length; i < ilen; ++i) {
+ key = keys[i];
+ values[key] = resolve([
+ custom[key],
+ dataset[key],
+ elementOptions[key]
+ ]);
+ }
+
+ // The default behavior of lines is to break at null values, according
+ // to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
+ // This option gives lines the ability to span gaps
+ values.spanGaps = valueOrDefault(dataset.spanGaps, options.spanGaps);
+ values.tension = resolve([custom.tension, dataset.lineTension, elementOptions.tension]);
+ values.steppedLine = resolve([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]);
+
+ return values;
+ },
+
calculatePointY: function(value, index, datasetIndex) {
var me = this;
var chart = me.chart;
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index b0175e8a67f..a552bb58abf 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -584,10 +584,6 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
box.draw(me.chartArea);
}, me);
- if (me.scale) {
- me.scale.draw();
- }
-
me.drawDatasets(easingValue);
me._drawTooltip(easingValue);
diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js
index 303549849ae..6a7d36f196b 100644
--- a/src/core/core.datasetController.js
+++ b/src/core/core.datasetController.js
@@ -319,7 +319,8 @@ helpers.extend(DatasetController.prototype, {
* @private
*/
onDataPush: function() {
- this.insertElements(this.getDataset().data.length - 1, arguments.length);
+ var count = arguments.length;
+ this.insertElements(this.getDataset().data.length - count, count);
},
/**
diff --git a/test/fixtures/scale.radialLinear/border-dash.png b/test/fixtures/scale.radialLinear/border-dash.png
index b7bacfad7c4..e13494fd485 100644
Binary files a/test/fixtures/scale.radialLinear/border-dash.png and b/test/fixtures/scale.radialLinear/border-dash.png differ
diff --git a/test/fixtures/scale.radialLinear/circular-border-dash.png b/test/fixtures/scale.radialLinear/circular-border-dash.png
index fedb709e9a9..28983505526 100644
Binary files a/test/fixtures/scale.radialLinear/circular-border-dash.png and b/test/fixtures/scale.radialLinear/circular-border-dash.png differ
diff --git a/test/fixtures/scale.radialLinear/indexable-gridlines.png b/test/fixtures/scale.radialLinear/indexable-gridlines.png
index 02c0268d879..bc6aca2a522 100644
Binary files a/test/fixtures/scale.radialLinear/indexable-gridlines.png and b/test/fixtures/scale.radialLinear/indexable-gridlines.png differ
diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js
index fed7979e939..d439251fa4f 100644
--- a/test/specs/controller.polarArea.tests.js
+++ b/test/specs/controller.polarArea.tests.js
@@ -281,12 +281,12 @@ describe('Chart.controllers.polarArea', function() {
var chart = this.chart;
var arc = chart.getDatasetMeta(0).data[0];
- jasmine.triggerMouseEvent(chart, 'mousemove', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(49, 135, 221)');
expect(arc._model.borderColor).toBe('rgb(22, 89, 156)');
expect(arc._model.borderWidth).toBe(2);
- jasmine.triggerMouseEvent(chart, 'mouseout', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
@@ -304,12 +304,12 @@ describe('Chart.controllers.polarArea', function() {
chart.update();
- jasmine.triggerMouseEvent(chart, 'mousemove', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
expect(arc._model.borderWidth).toBe(8.4);
- jasmine.triggerMouseEvent(chart, 'mouseout', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
@@ -327,12 +327,12 @@ describe('Chart.controllers.polarArea', function() {
chart.update();
- jasmine.triggerMouseEvent(chart, 'mousemove', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
expect(arc._model.borderWidth).toBe(8.4);
- jasmine.triggerMouseEvent(chart, 'mouseout', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
@@ -350,12 +350,12 @@ describe('Chart.controllers.polarArea', function() {
chart.update();
- jasmine.triggerMouseEvent(chart, 'mousemove', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
expect(arc._model.borderWidth).toBe(8.4);
- jasmine.triggerMouseEvent(chart, 'mouseout', {_model: arc.getCenterPoint()});
+ jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
diff --git a/test/utils.js b/test/utils.js
index c9e9ae012fa..0064689c4ae 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -21,7 +21,7 @@ function readImageData(url, callback) {
}
/**
- * Injects a new canvas (and div wrapper) and creates teh associated Chart instance
+ * Injects a new canvas (and div wrapper) and creates the associated Chart instance
* using the given config. Additional options allow tweaking elements generation.
* @param {object} config - Chart config.
* @param {object} options - Chart acquisition options.
@@ -106,12 +106,27 @@ function waitForResize(chart, callback) {
};
}
+function _resolveElementPoint(el) {
+ var point = {x: 0, y: 0};
+ if (el) {
+ if (typeof el.getCenterPoint === 'function') {
+ point = el.getCenterPoint();
+ } else if (el.x !== undefined && el.y !== undefined) {
+ point = el;
+ } else if (el._model && el._model.x !== undefined && el._model.y !== undefined) {
+ point = el._model;
+ }
+ }
+ return point;
+}
+
function triggerMouseEvent(chart, type, el) {
var node = chart.canvas;
var rect = node.getBoundingClientRect();
+ var point = _resolveElementPoint(el);
var event = new MouseEvent(type, {
- clientX: rect.left + el._model.x,
- clientY: rect.top + el._model.y,
+ clientX: rect.left + point.x,
+ clientY: rect.top + point.y,
cancelable: true,
bubbles: true,
view: window