chartjs · etimberg · Feb 8, 2017 · Nov 8, 2016 · Nov 13, 2016 · Nov 10, 2016
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@
 .idea
 .vscode
 bower.json
+
+*.swp
diff --git a/LICENSE.md b/LICENSE.md
@@ -1,5 +1,6 @@
 The MIT License (MIT)
-Copyright (c) 2013-2016 Nick Downie
+
+Copyright (c) 2013-2017 Nick Downie
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

diff --git a/docs/00-Getting-Started.md b/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

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
@@ -81,7 +81,7 @@ responsive | Boolean | true | Resizes the chart canvas when its container does.
 responsiveAnimationDuration | Number | 0 | Duration in milliseconds it takes to animate to new size after a resize event.
 maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio `(width / height)` when resizing
 events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | Events that the chart should listen to for tooltips and hovering
-onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements
+onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements
 legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
 onResize | Function | null | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
 
@@ -154,6 +154,7 @@ fontColor | Color | "#666" | Font color inherited from global configuration
 fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family inherited from global configuration
 padding | Number | 10 | Padding between rows of colored boxes
 generateLabels: | Function | `function(chart) {  }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#chart-configuration-legend-item-interface) for details.
+filter | Function | null | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#chart-configuration-legend-item-interface) and the chart data
 usePointStyle | Boolean | false | Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
 
 #### Legend Item Interface
@@ -309,7 +310,7 @@ Name | Type | Default | Description
 mode | String | 'nearest' | Sets which elements appear in the tooltip. See [Interaction Modes](#interaction-modes) for details
 intersect | Boolean | true | if true, the hover mode only applies when the mouse position intersects an item on the chart
 animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes
-onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc)
+onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc)
 
 ### Interaction Modes
 When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
@@ -323,7 +324,7 @@ nearest | Gets the item that is nearest to the point. The nearest item is determ
 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. 
-x-axis (deprecated) | Behaves like `'index'` mode with `intersect = true`
+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
 y | Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
@@ -341,7 +342,7 @@ onComplete | Function | none | Callback called at the end of an animation. Passe
 
 #### Animation Callbacks
 
-The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed an object that implements the following interface. An example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/AnimationCallbacks/progress-bar.html). This sample displays a progress bar showing how far along the animation is.
+The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed an object that implements the following interface. An example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/animation/progress-bar.html). This sample displays a progress bar showing how far along the animation is.
 
 ```javascript
 {

diff --git a/docs/02-Scales.md b/docs/02-Scales.md
@@ -36,7 +36,7 @@ afterFit | Function | undefined | Callback that runs after the scale fits to the
 afterUpdate | Function | undefined | Callback that runs at the end of the update process. Passed a single argument, the scale instance.
 **gridLines** | Object | - | See [grid line configuration](#grid-line-configuration) section.
 **scaleLabel** | Object | | See [scale title configuration](#scale-title-configuration) section.
-**ticks** | Object | | See [ticks configuration](#ticks-configuration) section.
+**ticks** | Object | | See [tick configuration](#tick-configuration) section.
 
 #### Grid Line Configuration
 

diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
@@ -57,7 +57,7 @@ pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 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`. 
+pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRounded', '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
 spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
 steppedLine | `Boolean` | If true, the line is shown as a stepped line and 'lineTension' will be ignored

diff --git a/docs/04-Bar-Chart.md b/docs/04-Bar-Chart.md
@@ -49,6 +49,7 @@ borderSkipped | `String or Array<String>` | Which edge to skip drawing the borde
 hoverBackgroundColor | `Color or Array<Color>` | Bar background color when hovered
 hoverBorderColor | `Color or Array<Color>` | Bar border color when hovered
 hoverBorderWidth | `Number or Array<Number>` | Border width of bar when hovered
+stack | `String` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack)
 
 An example data object using these attributes is shown below.
 

diff --git a/docs/05-Radar-Chart.md b/docs/05-Radar-Chart.md
@@ -46,11 +46,11 @@ pointBackgroundColor | `Color or Array<Color>` | The fill color for points
 pointBorderWidth | `Number or Array<Number>` | The width of the point border in pixels
 pointRadius | `Number or Array<Number>` | The radius of the point shape. If set to 0, nothing is rendered. 
 pointHoverRadius | `Number or Array<Number>` | The radius of the point when hovered
-hitRadius | `Number or Array<Number>` | The pixel size of the non-displayed point that reacts to mouse events
+pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed point that reacts to mouse events
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
+pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
 
 An example data object using these attributes is shown below.
 

diff --git a/docs/07-Pie-Doughnut-Chart.md b/docs/07-Pie-Doughnut-Chart.md
@@ -102,8 +102,10 @@ For example, we could have a doughnut chart that animates by scaling out from th
 ```javascript
 new Chart(ctx,{
 	type:"doughnut",
-	animation:{
-		animateScale:true
+	options: {
+		animation:{
+			animateScale:true
+		}
 	}
 });
 // This will create a chart with all of the default options, merged from the global config,

diff --git a/docs/09-Advanced.md b/docs/09-Advanced.md
@@ -182,7 +182,7 @@ var myPieChart = new Chart(ctx, {
 });
 ```
 
-See `sample/line-customTooltips.html` for examples on how to get started.
+See `samples/tooltips/line-customTooltips.html` for examples on how to get started.
 
 ### Writing New Scale Types
 
@@ -410,8 +410,9 @@ Plugins will be called at the following times
 * After datasets draw
 * Resize
 * 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) { },
@@ -437,6 +438,10 @@ Plugins should derive from Chart.PluginBase and implement the following interfac
 	afterDatasetsDraw: function(chartInstance, easing) { },
 
 	destroy: function(chartInstance) { }
+
+	// Called when an event occurs on the chart
+	beforeEvent: function(chartInstance, event) {}
+	afterEvent: function(chartInstance, event) {}
 }
 ```
 

diff --git a/docs/10-Notes.md b/docs/10-Notes.md
@@ -79,12 +79,13 @@ Built in Chart Types
 
 There are many plugins that add additional functionality to Chart.js. Some particularly notable ones are listed here. In addition, many plugins can be found on the [Chart.js GitHub organization](https://github.com/chartjs).
 
- - <a href="https://github.com/chartjs/Chart.Zoom.js" target="_blank">Chart.Zoom.js</a> - Enable zooming and panning on charts
- - <a href="https://github.com/chartjs/Chart.Annotation.js" target="_blank">Chart.Annotation.js</a> - Draw lines and boxes on chart area
+ - <a href="https://github.com/chartjs/chartjs-plugin-annotation" target="_blank">chartjs-plugin-annotation.js</a> - Draw lines and boxes on chart area
+ - <a href="https://github.com/chartjs/chartjs-plugin-deferred" target="_blank">chartjs-plugin-deferred.js</a> - Defer initial chart update until chart scrolls into viewport
+ - <a href="https://github.com/compwright/chartjs-plugin-draggable" target="_blank">chartjs-plugin-draggable.js</a> - Makes select chart elements draggable with the mouse
+ - <a href="https://github.com/chartjs/chartjs-plugin-zoom" target="_blank">chartjs-plugin-zoom.js</a> - Enable zooming and panning on charts
  - <a href="https://github.com/chartjs/Chart.BarFunnel.js" target="_blank">Chart.BarFunnel.js</a> - Adds a bar funnel chart type
- - <a href="https://github.com/chartjs/Chart.Deferred.js" target="_blank">Chart.Deferred.js</a> - Defer initial chart update until chart scrolls into viewport
- - <a href="https://github.com/chartjs/Chart.smith.js" target="_blank">Chart.Smith.js</a> - Adds a smith chart type
  - <a href="https://github.com/chartjs/Chart.LinearGauge.js" target="_blank">Chart.LinearGauge.js</a> - Adds a linear gauge chart type
+ - <a href="https://github.com/chartjs/Chart.smith.js" target="_blank">Chart.Smith.js</a> - Adds a smith chart type
 
 ### Popular Extensions
 
@@ -101,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>
diff --git a/gulpfile.js b/gulpfile.js
@@ -29,7 +29,7 @@ var header = "/*!\n" +
   " * http://chartjs.org/\n" +
   " * Version: {{ version }}\n" +
   " *\n" +
-  " * Copyright 2016 Nick Downie\n" +
+  " * Copyright 2017 Nick Downie\n" +
   " * Released under the MIT license\n" +
   " * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md\n" +
   " */\n";
@@ -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 })

diff --git a/package.json b/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": {
@@ -25,7 +25,7 @@
     "gulp-replace": "^0.5.4",
     "gulp-size": "~0.4.0",
     "gulp-streamify": "^1.0.2",
-    "gulp-uglify": "~0.2.x",
+    "gulp-uglify": "~2.0.x",
     "gulp-util": "~2.2.x",
     "gulp-zip": "~3.2.0",
     "jasmine": "^2.3.2",

diff --git a/samples/bar/bar-stacked-group.html b/samples/bar/bar-stacked-group.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Stacked Bar Chart with Groups</title>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+</head>
+
+<body>
+    <div style="width: 75%">
+        <canvas id="canvas"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+        var barChartData = {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [{
+                label: 'Dataset 1',
+                backgroundColor: window.chartColors.red,
+                stack: 'Stack 0',
+                data: [
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor()
+                ]
+            }, {
+                label: 'Dataset 2',
+                backgroundColor: window.chartColors.blue,
+                stack: 'Stack 0',
+                data: [
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor()
+                ]
+            }, {
+                label: 'Dataset 3',
+                backgroundColor: window.chartColors.green,
+                stack: 'Stack 1',
+                data: [
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor(), 
+                    randomScalingFactor()
+                ]
+            }]
+
+        };
+        window.onload = function() {
+            var ctx = document.getElementById("canvas").getContext("2d");
+            window.myBar = new Chart(ctx, {
+                type: 'bar',
+                data: barChartData,
+                options: {
+                    title:{
+                        display:true,
+                        text:"Chart.js Bar Chart - Stacked"
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false
+                    },
+                    responsive: true,
+                    scales: {
+                        xAxes: [{
+                            stacked: true,
+                        }],
+                        yAxes: [{
+                            stacked: true
+                        }]
+                    }
+                }
+            });
+        };
+
+        document.getElementById('randomizeData').addEventListener('click', function() {
+            barChartData.datasets.forEach(function(dataset, i) {
+                dataset.data = dataset.data.map(function() {
+                    return randomScalingFactor();
+                });
+            });
+            window.myBar.update();
+        });
+    </script>
+</body>
+
+</html>
diff --git a/samples/line/line-stacked-area.html b/samples/line/line-stacked-area.html
@@ -121,7 +121,7 @@
 		};
 
 		document.getElementById('randomizeData').addEventListener('click', function() {
-			$.each(config.data.datasets, function(i, dataset) {
+			config.data.datasets.forEach(function(dataset) {
 				dataset.data = dataset.data.map(function() {
 					return randomScalingFactor();
 				});

diff --git a/samples/line/point-styles.html b/samples/line/point-styles.html
@@ -70,6 +70,7 @@
                 'circle',
                 'triangle',
                 'rect',
+                'rectRounded',
                 'rectRot',
                 'cross',
                 'crossRot',

diff --git a/samples/radar/radar.html b/samples/radar/radar.html
@@ -32,7 +32,7 @@
     var config = {
         type: 'radar',
         data: {
-            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+            labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
             datasets: [{
                 label: "My First dataset",
                 backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,5 @@ @@
     .idea
     .vscode
     bower.json
+    *.swp