Merge branch 'master'

Conflicts:
	src/scales/scale.time.js
	test/scale.time.tests.js

docs/00-Getting-Started.md

@@ -44,11 +44,11 @@ To import Chart.js using an awesome module loader:
 ```javascript
 
 // Using CommonJS
-var Chart = require('src/chart.js')
+var Chart = require('chart.js')
 var myChart = new Chart({...})
 
 // ES6
-import Chart from 'src/chart.js'
+import Chart from 'chart.js'
 let myChart = new Chart({...})
 
 // Using requirejs

docs/01-Chart-Configuration.md

@@ -21,7 +21,7 @@ yLabels | Array[string] | Optional parameter that is used with the category axis
 To create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -42,13 +42,13 @@ The following example would set the hover mode to 'nearest' for all charts where
 Chart.defaults.global.hover.mode = 'nearest';
 
 // Hover mode is set to nearest because it was not overridden here
-var chartInstanceHoverModeNearest = new Chart(ctx, {
+var chartHoverModeNearest = new Chart(ctx, {
     type: 'line',
     data: data,
 });
 
 // This chart would have the hover mode that was passed in
-var chartInstanceDifferentHoverMode = new Chart(ctx, {
+var chartDifferentHoverMode = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -115,7 +115,7 @@ text | String | '' | Title text
 The example below would enable a title of 'Custom Chart Title' on the chart that is created.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -200,7 +200,7 @@ Items passed to the legend `onClick` function are the ones returned from `labels
 The following example will create a chart with the legend enabled and turn all of the text red in color.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'bar',
     data: data,
     options: {
@@ -267,7 +267,7 @@ afterTitle | `Array[tooltipItem], data` | Text to render after the title
 beforeBody | `Array[tooltipItem], data` | Text to render before the body section
 beforeLabel | `tooltipItem, data` | Text to render before an individual label
 label | `tooltipItem, data` | Text to render for an individual item in the tooltip
-labelColor | `tooltipItem, chartInstance` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
+labelColor | `tooltipItem, chart` | Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
 afterLabel | `tooltipItem, data` | Text to render after an individual label
 afterBody | `Array[tooltipItem], data` | Text to render after the body section
 beforeFooter | `Array[tooltipItem], data` | Text to render before the footer section
@@ -317,13 +317,13 @@ When configuring interaction with the graph via hover or tooltips, a number of d
 
 The following table details the modes and how they behave in conjunction with the `intersect` setting
 
-Mode | Behaviour 
---- | --- 
+Mode | Behaviour
+--- | ---
 point | Finds all of the items that intersect the point
 nearest | Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
 single (deprecated) | Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.
 label (deprecated) | See `'index'` mode
-index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index. 
+index | Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
 x-axis (deprecated) | Behaves like `'index'` mode with `intersect = false`
 dataset | Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
 x | Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts
@@ -346,8 +346,8 @@ The `onProgress` and `onComplete` callbacks are useful for synchronizing an exte
 
 ```javascript
 {
-    // Chart object
-    chartInstance,
+    // Chart instance
+    chart,
 
     // Contains details of the on-going animation
     animationObject,

docs/02-Scales.md

@@ -98,7 +98,7 @@ The `callback` method may be used for advanced tick customization. In the follow
 If the callback returns `null` or `undefined` the associated grid line will be hidden.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -153,7 +153,7 @@ suggestedMin | Number | - | User defined minimum number for the scale, overrides
 The following example creates a line chart with a vertical axis that goes from 0 to 5 in 0.5 sized steps.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -188,7 +188,7 @@ max | Number | - | User defined maximum number for the scale, overrides maximum
 The following example creates a chart with a logarithmic X axis that ranges from 1 to 1000.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -250,7 +250,7 @@ year | 'YYYY'
 For example, to set the display format for the 'quarter' unit to show the month and year, the following config would be passed to the chart constructor.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
@@ -285,7 +285,7 @@ The following time measurements are supported. The names can be passed as string
 For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
 
 ```javascript
-var chartInstance = new Chart(ctx, {
+var chart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {

docs/09-Advanced.md

@@ -412,39 +412,36 @@ Plugins will be called at the following times
 * Before an animation is started
 * When an event occurs on the canvas (mousemove, click, etc). This requires the `options.events` property handled
 
-Plugins should derive from Chart.PluginBase and implement the following interface
+Plugins should implement the `IPlugin` interface:
 ```javascript
 {
-	beforeInit: function(chartInstance) { },
-	afterInit: function(chartInstance) { },
+	beforeInit: function(chart) { },
+	afterInit: function(chart) { },
 
-	resize: function(chartInstance, newChartSize) { },
+	resize: function(chart, newChartSize) { },
 
-	beforeUpdate: function(chartInstance) { },
-	afterScaleUpdate: function(chartInstance) { }
-	beforeDatasetsUpdate: function(chartInstance) { }
-	afterDatasetsUpdate: function(chartInstance) { }
-	afterUpdate: function(chartInstance) { },
+	beforeUpdate: function(chart) { },
+	afterScaleUpdate: function(chart) { }
+	beforeDatasetsUpdate: function(chart) { }
+	afterDatasetsUpdate: function(chart) { }
+	afterUpdate: function(chart) { },
 
 	// This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw
 	// to do something on each animation frame
-	beforeRender: function(chartInstance) { },
+	beforeRender: function(chart) { },
 
 	// Easing is for animation
-	beforeDraw: function(chartInstance, easing) { },
-	afterDraw: function(chartInstance, easing) { },
+	beforeDraw: function(chart, easing) { },
+	afterDraw: function(chart, easing) { },
 	// Before the datasets are drawn but after scales are drawn
-	beforeDatasetsDraw: function(chartInstance, easing) { },
-	afterDatasetsDraw: function(chartInstance, easing) { },
+	beforeDatasetsDraw: function(chart, easing) { },
+	afterDatasetsDraw: function(chart, easing) { },
 
-	destroy: function(chartInstance) { }
+	destroy: function(chart) { }
 
-	/**
-	 * Called when an event occurs on the chart
-	 * @param e {Core.Event} the Chart.js wrapper around the native event. e.native is the original event
-	 * @return {Boolean} true if the chart is changed and needs to re-render
-	 */
-	onEvent: function(chartInstance, e) {}
+	// Called when an event occurs on the chart
+	beforeEvent: function(chart, event) {}
+	afterEvent: function(chart, event) {}
 }
 ```
 

docs/10-Notes.md

@@ -102,10 +102,14 @@ There are many extensions which are available for use with popular frameworks. S
  - <a href="https://github.com/gor181/react-chartjs-2" target="_blank">react-chartjs-2</a>
 
 #### Django
+ - <a href="https://github.com/matthisk/django-jchart" target="_blank">Django JChart</a>
  - <a href="https://github.com/novafloss/django-chartjs" target="_blank">Django Chartjs</a>
 
 #### Ruby on Rails
  - <a href="https://github.com/airblade/chartjs-ror" target="_blank">chartjs-ror</a>
 
 #### Laravel
  - <a href="https://github.com/fxcosta/laravel-chartjs" target="_blank">laravel-chartjs</a>
+
+#### Vue.js
+ - <a href="https://github.com/apertureless/vue-chartjs/" target="_blank">vue-chartjs</a>

gulpfile.js

@@ -71,7 +71,15 @@ function bowerTask() {
       homepage: package.homepage,
       license: package.license,
       version: package.version,
-      main: outDir + "Chart.js"
+      main: outDir + "Chart.js",
+      ignore: [
+        '.github',
+        '.codeclimate.yml',
+        '.gitignore',
+        '.npmignore',
+        '.travis.yml',
+        'scripts'
+      ]
     }, null, 2);
 
   return file('bower.json', json, { src: true })

package.json

@@ -2,7 +2,7 @@
   "name": "chart.js",
   "homepage": "http://www.chartjs.org",
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "MIT",
   "main": "src/chart.js",
   "repository": {

samples/data_labelling.html

@@ -30,12 +30,12 @@
                 backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                 borderColor: window.chartColors.red,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
                     randomScalingFactor(),
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -44,12 +44,12 @@
                 backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                 borderColor: window.chartColors.blue,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
                     randomScalingFactor(),
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }, {
@@ -58,25 +58,25 @@
                 backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
                 borderColor: window.chartColors.green,
                 data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
                     randomScalingFactor(),
-                    randomScalingFactor(), 
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
                     randomScalingFactor()
                 ]
             }]
         };
 
         // Define a plugin to provide data labels
         Chart.plugins.register({
-            afterDatasetsDraw: function(chartInstance, easing) {
+            afterDatasetsDraw: function(chart, easing) {
                 // To only draw at the end of animation, check for easing === 1
-                var ctx = chartInstance.chart.ctx;
+                var ctx = chart.ctx;
 
-                chartInstance.data.datasets.forEach(function (dataset, i) {
-                    var meta = chartInstance.getDatasetMeta(i);
+                chart.data.datasets.forEach(function (dataset, i) {
+                    var meta = chart.getDatasetMeta(i);
                     if (!meta.hidden) {
                         meta.data.forEach(function(element, index) {
                             // Draw the text in black, with the specified font
@@ -120,7 +120,7 @@
 
         document.getElementById('randomizeData').addEventListener('click', function() {
             barChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() { 
+                dataset.data = dataset.data.map(function() {
                     return randomScalingFactor();
                 })
             });

src/chart.js

@@ -6,8 +6,8 @@ var Chart = require('./core/core.js')();
 require('./core/core.helpers')(Chart);
 require('./platforms/platform.js')(Chart);
 require('./core/core.canvasHelpers')(Chart);
-require('./core/core.plugin.js')(Chart);
 require('./core/core.element')(Chart);
+require('./core/core.plugin.js')(Chart);
 require('./core/core.animation')(Chart);
 require('./core/core.controller')(Chart);
 require('./core/core.datasetController')(Chart);

src/controllers/controller.bar.js

@@ -143,7 +143,7 @@ module.exports = function(Chart) {
 			var xScale = me.getScaleForId(meta.xAxisID);
 			var stackCount = me.getStackCount();
 
-			var tickWidth = xScale.width / xScale.ticks.length;
+			var tickWidth = xScale.width / xScale.ticks.length;
 			var categoryWidth = tickWidth * xScale.options.categoryPercentage;
 			var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
 			var fullBarWidth = categoryWidth / stackCount;
@@ -169,7 +169,7 @@ module.exports = function(Chart) {
 			if (xScale.options.barThickness) {
 				return xScale.options.barThickness;
 			}
-			return ruler.barWidth;
+			return ruler.barWidth;
 		},
 
 		// Get stack index from the given dataset index accounting for stacks and the fact that not all bars are visible
@@ -219,7 +219,7 @@ module.exports = function(Chart) {
 				(yScale.options.stacked === undefined && meta.stack !== undefined)) {
 				var base = yScale.getBaseValue();
 				var sumPos = base,
-					sumNeg = base;
+					sumNeg = base;
 
 				for (var i = 0; i < datasetIndex; i++) {
 					var ds = me.chart.data.datasets[i];
@@ -246,19 +246,20 @@ module.exports = function(Chart) {
 
 		draw: function(ease) {
 			var me = this;
+			var chart = me.chart;
 			var easingDecimal = ease || 1;
 			var metaData = me.getMeta().data;
 			var dataset = me.getDataset();
 			var i, len;
 
-			Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
+			Chart.canvasHelpers.clipArea(chart.ctx, chart.chartArea);
 			for (i = 0, len = metaData.length; i < len; ++i) {
 				var d = dataset.data[i];
 				if (d !== null && d !== undefined && !isNaN(d)) {
 					metaData[i].transition(easingDecimal).draw();
 				}
 			}
-			Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
+			Chart.canvasHelpers.unclipArea(chart.ctx);
 		},
 
 		setHoverStyle: function(rectangle) {
@@ -483,7 +484,7 @@ module.exports = function(Chart) {
 				}
 			}
 
-			return stacks.length - 1;
+			return stacks.length - 1;
 		},
 
 		calculateBarX: function(index, datasetIndex) {
@@ -496,7 +497,7 @@ module.exports = function(Chart) {
 				(xScale.options.stacked === undefined && meta.stack !== undefined)) {
 				var base = xScale.getBaseValue();
 				var sumPos = base,
-					sumNeg = base;
+					sumNeg = base;
 
 				for (var i = 0; i < datasetIndex; i++) {
 					var ds = me.chart.data.datasets[i];