Doughnut/Pie fixes

Nested configs + major code refactors

.gitignore

@@ -5,3 +5,5 @@ node_modules/*
 custom/*
 
 docs/index.md
+
+bower_components/

README.md

@@ -1,7 +1,8 @@
 # Chart.js 
 
-[![Build Status](https://travis-ci.org/nnnick/Chart.js.svg?branch=master)](https://travis-ci.org/nnnick/Chart.js) [![Code Climate](https://codeclimate.com/github/nnnick/Chart.js/badges/gpa.svg)](https://codeclimate.com/github/nnnick/Chart.js)
+[![Build Status](https://travis-ci.org/nnnick/Chart.js.svg?branch=v2.0-dev)](https://travis-ci.org/nnnick/Chart.js) [![Code Climate](https://codeclimate.com/github/nnnick/Chart.js/badges/gpa.svg)](https://codeclimate.com/github/nnnick/Chart.js)
 
+# Version 2.0 is in early alpha. We are changing the internal data model to reduce copying, increase performance and expose a more flexible API.
 
 *Simple HTML5 Charts using the canvas element* [chartjs.org](http://www.chartjs.org)
 

bower.json

@@ -1,11 +1,13 @@
 {
-  "name": "Chart.js",
-  "version": "1.0.2",
-  "description": "Simple HTML5 Charts using the canvas element",
-  "homepage": "https://github.com/nnnick/Chart.js",
-  "author": "nnnick",
-  "main": [
-    "Chart.js"
-  ],
-  "dependencies": {}
-}
+    "name": "Chart.js",
+    "version": "2.0.0-alpha",
+    "description": "Simple HTML5 Charts using the canvas element",
+    "homepage": "https://github.com/nnnick/Chart.js",
+    "author": "nnnick",
+    "main": [
+        "Chart.js"
+    ],
+    "devDependencies": {
+        "jquery": "~2.1.4"
+    }
+}

docs/00-Getting-Started.md

@@ -31,6 +31,10 @@ You can also grab Chart.js using bower:
 bower install Chart.js --save
 ```
 
+Also, Chart.js is available from CDN:
+
+https://cdnjs.com/libraries/chart.js
+
 ###Creating a chart
 
 To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example.
@@ -70,127 +74,207 @@ This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow
 
 ```javascript
 Chart.defaults.global = {
-	// Boolean - Whether to animate the chart
-	animation: true,
+    // Animation settings
+    animation: {
+    	// Length that animation should take in ms assuming 60fps. 
+    	// Set to 0 to disable animation
+        duration: 1000,
 
-	// Number - Number of animation steps
-	animationSteps: 60,
+        // Easing type. Possible values are:
+        // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
+        //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
+        //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
+        //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
+        //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
+        //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
+        //  easeOutElastic, easeInCubic]
+        easing: "easeOutQuart",
 
-	// String - Animation easing effect
-	animationEasing: "easeOutQuart",
+        // Function - function to call each time an animation step occurs
+        onProgress: function() {},
 
-	// Boolean - If we should show the scale at all
-	showScale: true,
+        // Function - function to call when animations finish
+        onComplete: function() {},
+    },
 
-	// Boolean - If we want to override with a hard coded scale
-	scaleOverride: false,
+    // Boolean - if true, resize the charts when the page resizes
+    responsive: false,
 
-	// ** Required if scaleOverride is true **
-	// Number - The number of steps in a hard coded scale
-	scaleSteps: null,
-	// Number - The value jump in the hard coded scale
-	scaleStepWidth: null,
-	// Number - The scale starting value
-	scaleStartValue: null,
+    // Boolean - if true, try to maintain the screen aspect ratio
+    maintainAspectRatio: true,
 
-	// String - Colour of the scale line
-	scaleLineColor: "rgba(0,0,0,.1)",
+    // Array - events to bind tooltips to
+    events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
 
-	// Number - Pixel width of the scale line
-	scaleLineWidth: 1,
+    // Hover settings
+    hover: {
+    	// Function - called when the user hovers over the items.
+    	// Parameters: array of active elements
+        onHover: null,
 
-	// Boolean - Whether to show labels on the scale
-	scaleShowLabels: true,
+        // String - hover mode. Options are 'single', 'label', and 'dataset'
+        // 		'single' gets the nearest element
+        //		'label' gets all of the elements at the given dataset index (do not use for scatter charts)
+        //		'dataset' gets all the elements in the given dataset
+        mode: 'single',
 
-	// Interpolated JS string - can access value
-	scaleLabel: "<%=value%>",
+        // Number - duration (in ms) of the tooltip animation. 0 to disable
+        animationDuration: 400,
+    },
 
-	// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
-	scaleIntegersOnly: true,
+    // Function - click handler to bind to chart area
+    onClick: null,
 
-	// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
-	scaleBeginAtZero: false,
+    // Tooltip configuration
+    tooltips: {
+    	// Boolean - if true show tooltips
+        enabled: true,
 
-	// String - Scale label font declaration for the scale label
-	scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+        // Function - custom tooltip function to use
+        custom: null,
 
-	// Number - Scale label font size in pixels
-	scaleFontSize: 12,
+        // String - color of tooltip background
+        backgroundColor: "rgba(0,0,0,0.8)",
 
-	// String - Scale label font weight style
-	scaleFontStyle: "normal",
+        // String - fonts to use
+        fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
-	// String - Scale label font colour
-	scaleFontColor: "#666",
+        // Number - font size
+        fontSize: 10,
 
-	// Boolean - whether or not the chart should be responsive and resize when the browser does.
-	responsive: false,
+        // String - font style
+        fontStyle: "normal",
 
-	// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
-	maintainAspectRatio: true,
+        // String - font color
+        fontColor: "#fff",
 
-	// Boolean - Determines whether to draw tooltips on the canvas or not
-	showTooltips: true,
+        // String - title fonts
+        titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
-	// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
-	customTooltips: false,
+        // Number - title font size
+        titleFontSize: 12,
 
-	// Array - Array of string names to attach tooltip events
-	tooltipEvents: ["mousemove", "touchstart", "touchmove"],
+        // String - title font style
+        titleFontStyle: "bold",
 
-	// String - Tooltip background colour
-	tooltipFillColor: "rgba(0,0,0,0.8)",
+        // String - title font color
+        titleFontColor: "#fff",
 
-	// String - Tooltip label font declaration for the scale label
-	tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+        // Number - 
+        yPadding: 6,
 
-	// Number - Tooltip label font size in pixels
-	tooltipFontSize: 14,
+        // Number - 
+        xPadding: 6,
 
-	// String - Tooltip font weight style
-	tooltipFontStyle: "normal",
+        // Number - 
+        caretSize: 8,
 
-	// String - Tooltip label font colour
-	tooltipFontColor: "#fff",
+        // Number - radius of rounded corners
+        cornerRadius: 6,
 
-	// String - Tooltip title font declaration for the scale label
-	tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+        // Number - 
+        xOffset: 10,
 
-	// Number - Tooltip title font size in pixels
-	tooltipTitleFontSize: 14,
+        // String - template string to use for tooltips in single mode
+        template: [
+            '<% if(label){ %>',
+            '<%=label %>:',
+            '<% } %>',
+            '<%=value %>',
+        ].join(''),
 
-	// String - Tooltip title font weight style
-	tooltipTitleFontStyle: "bold",
+        // String - template string to use for tooltips in label mode
+        multiTemplate: [
+            '<%if (datasetLabel){ %>',
+            '<%=datasetLabel %>:',
+            '<% } %>',
+            '<%=value %>'
+        ].join(''),
 
-	// String - Tooltip title font colour
-	tooltipTitleFontColor: "#fff",
+        // String -
+        multiKeyBackground: '#fff',
+    },
 
-	// Number - pixel width of padding around tooltip text
-	tooltipYPadding: 6,
+    // String - default grey color. 'rgba(0,0,0,0.1)'
+    defaultColor: defaultColor, 
 
-	// Number - pixel width of padding around tooltip text
-	tooltipXPadding: 6,
+    // Element defaults
+    elements: {
+    	// Default settings for all line elements
+        line: {
+        	// Number - Bezier curve tension. Set to 0 for no bezier curves
+            tension: 0.4,
 
-	// Number - Size of the caret on the tooltip
-	tooltipCaretSize: 8,
+            // String - the fill color
+            backgroundColor: defaultColor,
 
-	// Number - Pixel radius of the tooltip border
-	tooltipCornerRadius: 6,
+            // Number - width of the line
+            borderWidth: 3,
 
-	// Number - Pixel offset from point x to tooltip edge
-	tooltipXOffset: 10,
-	{% raw %}
-	// String - Template string for single tooltips
-	tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
-	{% endraw %}
-	// String - Template string for multiple tooltips
-	multiTooltipTemplate: "<%= value %>",
+            // String = color of the line
+            borderColor: defaultColor,
+            
+            // Boolean - if true fill in the area between the line and the x axis with the background color
+            fill: true,
 
-	// Function - Will fire on animation progression.
-	onAnimationProgress: function(){},
+            // Boolean - 
+            skipNull: true,
 
-	// Function - Will fire on animation completion.
-	onAnimationComplete: function(){}
+            // Boolean - 
+            drawNull: false,
+        },
+        // Settings for all point elements
+        point: {
+        	// Number - radius of point circle
+            radius: 3,
+
+            // String - fill color of point
+            backgroundColor: defaultColor,
+
+            // Number - width of stroke of point circle
+            borderWidth: 1,
+
+            // String - stroke color for point
+            borderColor: defaultColor,
+
+            // Number - extra radius added to radius for hit detection
+            hitRadius: 6,
+
+            // Number - radius of point circle when hovered
+            hoverRadius: 4,
+
+            // Number - radius of circle stroke when hovered
+            hoverBorderWidth: 2,
+        },
+        // Settings for all bar elements
+        bar: {
+        	// String - fill color of bar
+            backgroundColor: defaultColor,
+
+            // Number - width of stroke of line surrounding bar fill
+            borderWidth: 0,
+
+            // String - Border color
+            borderColor: defaultColor,
+
+            // Number - 
+            valueSpacing: 5,
+
+            // Number - 
+            datasetSpacing: 1,
+        },
+        // Settings for all slice elements
+        slice: {
+        	// String - fill color
+            backgroundColor: defaultColor,
+
+            // String - border color
+            borderColor: "#fff",
+
+            // Number - border stroke width
+            borderWidth: 2,
+        },
+    }
 }
 ```
 

docs/01-Line-Chart.md

@@ -13,7 +13,10 @@ Often, it is used to show trend data, and the comparison of two data sets.
 
 ###Example usage
 ```javascript
-var myLineChart = new Chart(ctx).Line(data, options);
+var myLineChart = new Chart(ctx).Line({
+	data: data, 
+	options: options
+});
 ```
 ###Data structure
 
@@ -23,22 +26,57 @@ var data = {
 	datasets: [
 		{
 			label: "My First dataset",
-			fillColor: "rgba(220,220,220,0.2)",
-			strokeColor: "rgba(220,220,220,1)",
-			pointColor: "rgba(220,220,220,1)",
-			pointStrokeColor: "#fff",
-			pointHighlightFill: "#fff",
-			pointHighlightStroke: "rgba(220,220,220,1)",
-			data: [65, 59, 80, 81, 56, 55, 40]
+
+			// Boolean - if true fill the area under the line
+			fill: false,
+
+			// String - the color to fill the area under the line with if fill is true
+			backgroundColor: "rgba(220,220,220,0.2)",
+
+			// The properties below allow an array to be specified to change the value of the item at the given index
+
+			// String or array - Line color
+			borderColor: "rgba(220,220,220,1)",
+
+			// String or array - Point stroke color
+			pointBorderColor: "rgba(220,220,220,1)",
+
+			// String or array - Point fill color
+			pointBackgroundColor: "#fff",
+
+			// Number or array - Stroke width of point border
+			pointBorderWidth: 1,
+
+			// Number or array - Radius of point when hovered
+			pointHoverRadius: 5,
+
+			// String or array - point background color when hovered
+			pointHoverBackgroundColor: "rgba(220,220,220,1)",
+
+			// Point border color when hovered
+			pointHoverBorderColor: "rgba(220,220,220,1)",
+
+			// Number or array - border width of point when hovered
+			pointBorderWidth: 2,
+
+			// The actual data
+			data: [65, 59, 80, 81, 56, 55, 40],
+
+			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
+			yAxisID: "y-axis-1",
 		},
 		{
 			label: "My Second dataset",
-			fillColor: "rgba(151,187,205,0.2)",
-			strokeColor: "rgba(151,187,205,1)",
-			pointColor: "rgba(151,187,205,1)",
-			pointStrokeColor: "#fff",
-			pointHighlightFill: "#fff",
-			pointHighlightStroke: "rgba(151,187,205,1)",
+			fill: false,
+			backgroundColor: "rgba(220,220,220,0.2)",
+			borderColor: "rgba(220,220,220,1)",
+			pointBorderColor: "rgba(220,220,220,1)",
+			pointBackgroundColor: "#fff",
+			pointBorderWidth: 1,
+			pointHoverRadius: 5,
+			pointHoverBackgroundColor: "rgba(220,220,220,1)",
+			pointHoverBorderColor: "rgba(220,220,220,1)",
+			pointBorderWidth: 2,
 			data: [28, 48, 40, 19, 86, 27, 90]
 		}
 	]
@@ -56,62 +94,164 @@ These are the customisation options specific to Line charts. These options are m
 
 ```javascript
 {
+	// Boolean - if true, line stack on top of each other along the y axis
+	stacked: false,
 
-	///Boolean - Whether grid lines are shown across the chart
-	scaleShowGridLines : true,
+	hover: {
+		// String - We use a label hover mode since the x axis displays data by the index in the dataset
+		mode: "label"
+	},
 
-	//String - Colour of the grid lines
-	scaleGridLineColor : "rgba(0,0,0,.05)",
+	scales: {
+		// The line 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. 
+		xAxes: [{
+			// String - type of axis to use. Should not be changed from 'dataset'. To use a 'linear' axis on the x, use the scatter chart type
+			scaleType: "dataset", // scatter should not use a dataset axis
 
-	//Number - Width of the grid lines
-	scaleGridLineWidth : 1,
+			// Boolean - if true, show the scale
+			display: true,
 
-	//Boolean - Whether to show horizontal lines (except X axis)
-	scaleShowHorizontalLines: true,
+			// String - position of the scale. possible options are "top" and "bottom" for dataset scales
+			position: "bottom",
 
-	//Boolean - Whether to show vertical lines (except Y axis)
-	scaleShowVerticalLines: true,
+			// String - id of the axis so that data can bind to it
+			id: "x-axis-1", // need an ID so datasets can reference the scale
 
-	//Boolean - Whether the line is curved between points
-	bezierCurve : true,
+			// grid line settings
+			gridLines: {
+				// Boolean - if true, show the grid lines
+				show: true,
 
-	//Number - Tension of the bezier curve between points
-	bezierCurveTension : 0.4,
+				// String - color of the grid lines
+				color: "rgba(0, 0, 0, 0.05)",
 
-	//Boolean - Whether to show a dot for each point
-	pointDot : true,
+				// Number - width of the grid lines
+				lineWidth: 1,
 
-	//Number - Radius of each point dot in pixels
-	pointDotRadius : 4,
+				// Boolean - if true draw lines on the chart area
+				drawOnChartArea: true,
 
-	//Number - Pixel width of point dot stroke
-	pointDotStrokeWidth : 1,
+				// Boolean - if true draw ticks in the axis area
+				drawTicks: true,
 
-	//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
-	pointHitDetectionRadius : 20,
+				// Number - width of the grid line for the first index (index 0)
+				zeroLineWidth: 1,
 
-	//Boolean - Whether to show a stroke for datasets
-	datasetStroke : true,
+				// String - color of the grid line for the first index
+				zeroLineColor: "rgba(0,0,0,0.25)",
 
-	//Number - Pixel width of dataset stroke
-	datasetStrokeWidth : 2,
+				// Boolean - if true, offset labels from grid lines
+				offsetGridLines: false,
+			},
 
-	//Boolean - Whether to fill the dataset with a colour
-	datasetFill : true,
-	{% raw %}
-	//String - A legend template
-	legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
-	{% endraw %}
+			// label settings
+			labels: {
+				// Boolean - if true show labels
+				show: true,
+
+				// String - template string for labels
+				template: "<%=value%>",
+
+				// Number - label font size
+				fontSize: 12,
+
+				// String - label font style
+				fontStyle: "normal",
+
+				// String - label font color
+				fontColor: "#666",
+
+				// String - label font family
+				fontFamily: "Helvetica Neue",
+			},
+		}],
+		yAxes: [{
+			// String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
+			scaleType: "linear",
+
+			// Boolean - if true, show the scale
+			display: true,
+
+			// String - position of axis. Vertical axes can have either "left" or "right"
+			position: "left",
+
+			// ID of the axis for data binding
+			id: "y-axis-1",
+
+			// grid line settings
+			gridLines: {
+				// Boolean - if true, show the grid lines
+				show: true,
+
+				// String - color of the grid lines
+				color: "rgba(0, 0, 0, 0.05)",
+
+				// Number - width of the grid lines
+				lineWidth: 1,
+
+				// Boolean - if true draw lines on the chart area
+				drawOnChartArea: true,
+
+				// Boolean - if true draw ticks in the axis area
+				drawTicks: true,
+
+				// Number - width of the grid line representing a numerical value of 0
+				zeroLineWidth: 1,
+
+				// String - color of the grid line representing a numerical value of 0
+				zeroLineColor: "rgba(0,0,0,0.25)",
+			},
+
+			// Boolean - if true ensures that the scale always has a 0 point
+			beginAtZero: false,
+
+			// Object - if specified, allows the user to override the step generation algorithm.
+			//			Contains the following values
+			//				start: // number to start at
+			//				stepWidth: // size of step
+			//				steps: // number of steps
+			override: null,
+
+			// label settings
+			labels: {
+				// Boolean - if true show labels
+				show: true,
+
+				// String - template string for labels
+				template: "<%=value%>",
+
+				// Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
+				userCallback: null,
+
+				// Number - label font size
+				fontSize: 12,
+
+				// String - label font style
+				fontStyle: "normal",
+
+				// String - label font color
+				fontColor: "#666",
+
+				// String - label font family
+				fontFamily: "Helvetica Neue",
+			},
+		}],
+	}
 };
 ```
 
-You can override these for your `Chart` instance by passing a second argument into the `Line` method as an object with the keys you want to override.
+You can override these for your `Chart` instance by passing a member `options` into the `Line` method.
 
-For example, we could have a line chart without bezier curves between points by doing the following:
+For example, we could have a line chart display without an x axis by doing the following. The config merge is smart enough to handle arrays so that you do not need to specify all axis settings to change one thing.
 
 ```javascript
-new Chart(ctx).Line(data, {
-	bezierCurve: false
+new Chart(ctx).Line({
+	data: data, 
+	options: {
+		xAxes: [{
+			show: false
+		}]
+	}
 });
 // This will create a chart with all of the default options, merged from the global config,
 // and the Line chart defaults, but this particular instance will have `bezierCurve` set to false.

docs/02-Bar-Chart.md

@@ -14,7 +14,10 @@ It is sometimes used to show trend data, and the comparison of multiple data set
 
 ### Example usage
 ```javascript
-var myBarChart = new Chart(ctx).Bar(data, options);
+var myBarChart = new Chart(ctx).Bar({
+	data: data, 
+	options: options
+});
 ```
 
 ### Data structure
@@ -25,18 +28,36 @@ var data = {
 	datasets: [
 		{
 			label: "My First dataset",
-			fillColor: "rgba(220,220,220,0.5)",
-			strokeColor: "rgba(220,220,220,0.8)",
-			highlightFill: "rgba(220,220,220,0.75)",
-			highlightStroke: "rgba(220,220,220,1)",
-			data: [65, 59, 80, 81, 56, 55, 40]
+
+			// The properties below allow an array to be specified to change the value of the item at the given index
+			// String  or array - the bar color
+			backgroundColor: "rgba(220,220,220,0.2)",
+
+			// String or array - bar stroke color
+			borderColor: "rgba(220,220,220,1)",
+
+			// Number or array - bar border width
+			borderWidth: 1,
+
+			// String or array - fill color when hovered
+			hoverBackgroundColor: "rgba(220,220,220,0.2)",
+
+			// String or array - border color when hovered
+			hoverBorderColor: "rgba(220,220,220,1)",
+
+			// The actual data
+			data: [65, 59, 80, 81, 56, 55, 40],
+
+			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
+			yAxisID: "y-axis-1",
 		},
 		{
 			label: "My Second dataset",
-			fillColor: "rgba(151,187,205,0.5)",
-			strokeColor: "rgba(151,187,205,0.8)",
-			highlightFill: "rgba(151,187,205,0.75)",
-			highlightStroke: "rgba(151,187,205,1)",
+			backgroundColor: "rgba(220,220,220,0.2)",
+			borderColor: "rgba(220,220,220,1)",
+			borderWidth: 1,
+			hoverBackgroundColor: "rgba(220,220,220,0.2)",
+			hoverBorderColor: "rgba(220,220,220,1)",
 			data: [28, 48, 40, 19, 86, 27, 90]
 		}
 	]
@@ -53,40 +74,150 @@ These are the customisation options specific to Bar charts. These options are me
 
 ```javascript
 {
-	//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
-	scaleBeginAtZero : true,
+	// Boolean - if true, bars stack on top of each other
+	stacked: false,
 
-	//Boolean - Whether grid lines are shown across the chart
-	scaleShowGridLines : true,
+	hover: {
+		// String - We use a label hover mode since the x axis displays data by the index in the dataset
+		mode: "label"
+	},
 
-	//String - Colour of the grid lines
-	scaleGridLineColor : "rgba(0,0,0,.05)",
+	scales: {
+		// 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. 
+		xAxes: [{
+			// String - type of axis to use. Should not be changed from 'dataset'.
+			scaleType: "dataset", // scatter should not use a dataset axis
 
-	//Number - Width of the grid lines
-	scaleGridLineWidth : 1,
+			// Boolean - if true, show the scale
+			display: true,
 
-	//Boolean - Whether to show horizontal lines (except X axis)
-	scaleShowHorizontalLines: true,
+			// String - position of the scale. possible options are "top" and "bottom" for dataset scales
+			position: "bottom",
 
-	//Boolean - Whether to show vertical lines (except Y axis)
-	scaleShowVerticalLines: true,
+			// String - id of the axis so that data can bind to it
+			id: "x-axis-1", // need an ID so datasets can reference the scale
 
-	//Boolean - If there is a stroke on each bar
-	barShowStroke : true,
+			// grid line settings
+			gridLines: {
+				// Boolean - if true, show the grid lines
+				show: true,
 
-	//Number - Pixel width of the bar stroke
-	barStrokeWidth : 2,
+				// String - color of the grid lines
+				color: "rgba(0, 0, 0, 0.05)",
 
-	//Number - Spacing between each of the X value sets
-	barValueSpacing : 5,
+				// Number - width of the grid lines
+				lineWidth: 1,
 
-	//Number - Spacing between data sets within X values
-	barDatasetSpacing : 1,
-	{% raw %}
-	//String - A legend template
-	legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
-	{% endraw %}
-}
+				// Boolean - if true draw lines on the chart area
+				drawOnChartArea: true,
+
+				// Boolean - if true draw ticks in the axis area
+				drawTicks: true,
+
+				// Number - width of the grid line for the first index (index 0)
+				zeroLineWidth: 1,
+
+				// String - color of the grid line for the first index
+				zeroLineColor: "rgba(0,0,0,0.25)",
+
+				// Boolean - if true, offset labels from grid lines
+				offsetGridLines: false,
+			},
+
+			// label settings
+			labels: {
+				// Boolean - if true show labels
+				show: true,
+
+				// String - template string for labels
+				template: "<%=value%>",
+
+				// Number - label font size
+				fontSize: 12,
+
+				// String - label font style
+				fontStyle: "normal",
+
+				// String - label font color
+				fontColor: "#666",
+
+				// String - label font family
+				fontFamily: "Helvetica Neue",
+			},
+		}],
+		yAxes: [{
+			// String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
+			scaleType: "linear",
+
+			// Boolean - if true, show the scale
+			display: true,
+
+			// String - position of axis. Vertical axes can have either "left" or "right"
+			position: "left",
+
+			// ID of the axis for data binding
+			id: "y-axis-1",
+
+			// grid line settings
+			gridLines: {
+				// Boolean - if true, show the grid lines
+				show: true,
+
+				// String - color of the grid lines
+				color: "rgba(0, 0, 0, 0.05)",
+
+				// Number - width of the grid lines
+				lineWidth: 1,
+
+				// Boolean - if true draw lines on the chart area
+				drawOnChartArea: true,
+
+				// Boolean - if true draw ticks in the axis area
+				drawTicks: true,
+
+				// Number - width of the grid line representing a numerical value of 0
+				zeroLineWidth: 1,
+
+				// String - color of the grid line representing a numerical value of 0
+				zeroLineColor: "rgba(0,0,0,0.25)",
+			},
+
+			// Boolean - if true ensures that the scale always has a 0 point
+			beginAtZero: false,
+
+			// Object - if specified, allows the user to override the step generation algorithm.
+			//			Contains the following values
+			//				start: // number to start at
+			//				stepWidth: // size of step
+			//				steps: // number of steps
+			override: null,
+
+			// label settings
+			labels: {
+				// Boolean - if true show labels
+				show: true,
+
+				// String - template string for labels
+				template: "<%=value%>",
+
+				// Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
+				userCallback: null,
+
+				// Number - label font size
+				fontSize: 12,
+
+				// String - label font style
+				fontStyle: "normal",
+
+				// String - label font color
+				fontColor: "#666",
+
+				// String - label font family
+				fontFamily: "Helvetica Neue",
+			},
+		}],
+	},
+};
 ```
 
 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.
@@ -94,8 +225,11 @@ You can override these for your `Chart` instance by passing a second argument in
 For example, we could have a bar chart without a stroke on each bar by doing the following:
 
 ```javascript
-new Chart(ctx).Bar(data, {
-	barShowStroke: false
+new Chart(ctx).Bar({
+	data: data, 
+	options: {
+		barShowStroke: false
+	}
 });
 // This will create a chart with all of the default options, merged from the global config,
 //  and the Bar chart defaults but this particular instance will have `barShowStroke` set to false.

docs/04-Polar-Area-Chart.md

@@ -83,7 +83,7 @@ These are the customisation options specific to Polar Area charts. These options
 	//Boolean - Stroke a line around each segment in the chart
 	segmentShowStroke : true,
 
-	//String - The colour of the stroke on each segement.
+	//String - The colour of the stroke on each segment.
 	segmentStrokeColor : "#fff",
 
 	//Number - The width of the stroke value in pixels
@@ -169,4 +169,4 @@ Calling `removeData(index)` on your Chart instance will remove segment at that p
 ```javascript
 myPolarAreaChart.removeData();
 // Other segments will update to fill the empty space left.
-```
+```

docs/05-Pie-Doughnut-Chart.md

@@ -55,7 +55,7 @@ var data = [
 ]
 ```
 
-For a pie chart, you must pass in an array of objects with a value and a color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
+For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
 
 ### Chart options
 

docs/06-Advanced.md

@@ -158,8 +158,10 @@ new Chart(ctx).LineAlt(data);
 
 ### Community extensions
 
-- <a href="https://github.com/Regaddi/Chart.StackedBar.js" target"_blank">Stacked Bar Chart</a> by <a href="https://twitter.com/Regaddi" target="_blank">@Regaddi</a>
-- <a href="https://github.com/CAYdenberg/Chart.js" target"_blank">Error bars (bar and line charts)</a> by <a href="https://twitter.com/CAYdenberg" target="_blank">@CAYdenberg</a>
+- <a href="https://github.com/Regaddi/Chart.StackedBar.js" target="_blank">Stacked Bar Chart</a> by <a href="https://twitter.com/Regaddi" target="_blank">@Regaddi</a>
+- <a href="https://github.com/tannerlinsley/Chart.StackedArea.js" target="_blank">Stacked Bar Chart</a> by <a href="https://twitter.com/tannerlinsley" target="_blank">@tannerlinsley</a>
+- <a href="https://github.com/CAYdenberg/Chart.js" target="_blank">Error bars (bar and line charts)</a> by <a href="https://twitter.com/CAYdenberg" target="_blank">@CAYdenberg</a>
+- <a href="http://dima117.github.io/Chart.Scatter/" target="_blank">Scatter chart (number & date scales are supported)</a> by <a href="https://github.com/dima117" target="_blank">@dima117</a>
 
 ### Creating custom builds
 

gulpfile.js

@@ -28,13 +28,14 @@ gulp.task('build', function(){
 		isCustom = !!(util.env.types),
 		outputDir = (isCustom) ? 'custom' : '.';
 	if (isCustom){
-		util.env.types.split(',').forEach(function(type){ return srcFiles.push(FileName(type))});
+		util.env.types.split(',').forEach(function(type){ return srcFiles.push(FileName(type));});
 	}
 	else{
 		// Seems gulp-concat remove duplicates - nice!
 		// So we can use this to sort out dependency order - aka include Core first!
 		srcFiles.push(srcDir+'*');
 	}
+	srcFiles.push('./node_modules/color/dist/color.min.js');
 
 	return gulp.src(srcFiles)
 		.pipe(concat('Chart.js'))
@@ -46,7 +47,7 @@ gulp.task('build', function(){
 
 	function FileName(moduleName){
 		return srcDir+'Chart.'+moduleName+'.js';
-	};
+	}
 });
 
 /*
@@ -109,7 +110,7 @@ gulp.task('module-sizes', function(){
 	.pipe(size({
 		showFiles: true,
 		gzip: true
-	}))
+	}));
 });
 
 gulp.task('watch', function(){

package.json

@@ -1,28 +1,31 @@
 {
-  "name": "chart.js",
-  "homepage": "http://www.chartjs.org",
-  "description": "Simple HTML5 charts using the canvas element.",
-  "version": "1.0.2",
-  "main": "Chart.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nnnick/Chart.js.git"
-  },
-  "dependences": {},
-  "devDependencies": {
-    "gulp": "3.5.x",
-    "gulp-concat": "~2.1.x",
-    "gulp-connect": "~2.0.5",
-    "gulp-jshint": "~1.5.1",
-    "gulp-replace": "^0.4.0",
-    "gulp-size": "~0.4.0",
-    "gulp-uglify": "~0.2.x",
-    "gulp-util": "~2.2.x",
-    "gulp-html-validator": "^0.0.2",
-    "inquirer": "^0.5.1",
-    "semver": "^3.0.1"
-  },
-  "spm": {
-    "main": "Chart.js"
-  }
-}
+    "name": "chart.js",
+    "homepage": "http://www.chartjs.org",
+    "description": "Simple HTML5 charts using the canvas element.",
+    "version": "2.0.0-alpha",
+    "main": "Chart.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/nnnick/Chart.js.git"
+    },
+    "dependences": {},
+    "devDependencies": {
+        "color": "git://github.com/chartjs/color",
+        "gulp": "3.5.x",
+        "gulp-concat": "~2.1.x",
+        "gulp-connect": "~2.0.5",
+        "gulp-html-validator": "^0.0.2",
+        "gulp-jshint": "~1.5.1",
+        "gulp-replace": "^0.4.0",
+        "gulp-size": "~0.4.0",
+        "gulp-uglify": "~0.2.x",
+        "gulp-util": "~2.2.x",
+        "inquirer": "^0.5.1",
+        "jquery": "^2.1.4",
+        "onecolor": "^2.5.0",
+        "semver": "^3.0.1"
+    },
+    "spm": {
+        "main": "Chart.js"
+    }
+}

samples/bar-multi-axis.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Bar Chart Multi Axis</title>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../Chart.js"></script>
+</head>
+
+<body>
+    <div style="width: 50%">
+        <canvas id="canvas" height="450" width="600"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
+    var randomColor = function() {
+        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+    };
+
+    var barChartData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [{
+            label: 'Dataset 1',
+            backgroundColor: "rgba(220,220,220,0.5)",
+            yAxisID: "y-axis-1",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 2',
+            backgroundColor: "rgba(151,187,205,0.5)",
+            yAxisID: "y-axis-2",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 3',
+            backgroundColor: [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()],
+            yAxisID: "y-axis-1",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }]
+
+    };
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myBar = new Chart(ctx).Bar({
+            data: barChartData, 
+            options: {
+                responsive: true,
+                hoverMode: 'label',
+                hoverAnimationDuration: 400,
+                stacked: false,
+                scales: {
+                    yAxes: [{
+                        scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                        display: true,
+                        position: "left",
+                        id: "y-axis-1",
+                
+                        // grid line settings
+                        gridLines: {
+                            show: true,
+                            color: "rgba(0, 0, 0, 0.05)",
+                            lineWidth: 1,
+                            drawOnChartArea: true,
+                            drawTicks: true,
+                            zeroLineWidth: 1,
+                            zeroLineColor: "rgba(0,0,0,0.25)",
+                        },
+
+                        // scale numbers
+                        beginAtZero: false,
+                        integersOnly: false,
+                        override: null,
+
+                        // label settings
+                        labels: {
+                            show: true,
+                            template: "<%=value%>",
+                            fontSize: 12,
+                            fontStyle: "normal",
+                            fontColor: "#666",
+                            fontFamily: "Helvetica Neue",
+                        }
+                    }, {
+                        scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                        display: true,
+                        position: "right",
+                        id: "y-axis-2",
+                
+                        // grid line settings
+                        gridLines: {
+                            show: true,
+                            color: "rgba(0, 0, 0, 0.05)",
+                            lineWidth: 1,
+                            drawOnChartArea: false, // only want the grid lines for one axis to show up
+                            drawTicks: false,
+                            zeroLineWidth: 1,
+                            zeroLineColor: "rgba(0,0,0,0.25)",
+                        },
+
+                        // scale numbers
+                        beginAtZero: false,
+                        integersOnly: false,
+                        override: null,
+
+                        // label settings
+                        labels: {
+                            show: true,
+                            template: "<%=value%>",
+                            fontSize: 12,
+                            fontStyle: "normal",
+                            fontColor: "#666",
+                            fontFamily: "Helvetica Neue",
+                        }
+                    }],
+                }
+            }
+        });
+    };
+
+    $('#randomizeData').click(function() {
+        $.each(barChartData.datasets, function(i, dataset) {
+            if (Chart.helpers.isArray(dataset.backgroundColor)) {
+                dataset.backgroundColor= [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()];
+            } else {
+                dataset.backgroundColor= randomColor();
+            }
+
+            dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        });
+        window.myBar.update();
+    });
+    </script>
+</body>
+
+</html>

samples/bar.html

@@ -1,45 +1,61 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Bar Chart</title>
-		<script src="../Chart.js"></script>
-	</head>
-	<body>
-		<div style="width: 50%">
-			<canvas id="canvas" height="450" width="600"></canvas>
-		</div>
 
+<head>
+    <title>Bar Chart</title>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../Chart.js"></script>
+</head>
 
-	<script>
-	var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
+<body>
+    <div style="width: 50%">
+        <canvas id="canvas" height="450" width="600"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
 
-	var barChartData = {
-		labels : ["January","February","March","April","May","June","July"],
-		datasets : [
-			{
-				fillColor : "rgba(220,220,220,0.5)",
-				strokeColor : "rgba(220,220,220,0.8)",
-				highlightFill: "rgba(220,220,220,0.75)",
-				highlightStroke: "rgba(220,220,220,1)",
-				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
-			},
-			{
-				fillColor : "rgba(151,187,205,0.5)",
-				strokeColor : "rgba(151,187,205,0.8)",
-				highlightFill : "rgba(151,187,205,0.75)",
-				highlightStroke : "rgba(151,187,205,1)",
-				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
-			}
-		]
+    var barChartData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [{
+            label: 'Dataset 1',
+            backgroundColor: "rgba(220,220,220,0.5)",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 2',
+            backgroundColor: "rgba(151,187,205,0.5)",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }, {
+            label: 'Dataset 3',
+            backgroundColor: "rgba(151,187,205,0.5)",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+        }]
 
-	}
-	window.onload = function(){
-		var ctx = document.getElementById("canvas").getContext("2d");
-		window.myBar = new Chart(ctx).Bar(barChartData, {
-			responsive : true
-		});
-	}
+    };
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myBar = new Chart(ctx).Bar({
+            data: barChartData,
+            options: {
+                responsive: true,
+            }
+        });
+    };
+
+    $('#randomizeData').click(function() {
+        $.each(barChartData.datasets, function(i, dataset) {
+            dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+            dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        });
+        window.myBar.update();
+    });
+    </script>
+</body>
 
-	</script>
-	</body>
 </html>

samples/doughnut.color.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+	<head>
+		<title>Doughnut Chart</title>
+		<script src="../src/Chart.Core.js"></script>
+		<script src="../src/Chart.Doughnut.js"></script>
+		<style>
+			body{
+				padding: 0;
+				margin: 0;
+			}
+			#canvas-holder{
+				width:30%;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="canvas-holder">
+			<canvas id="chart-area" width="500" height="500"/>
+		</div>
+
+
+	<script>
+
+		var doughnutData = [
+				{
+					value: 1,
+					label: "One"
+				},
+				{
+					value: 2,
+					label: "Two"
+				},
+				{
+					value: 3,
+					label: "Three"
+				},
+				{
+					value: 4,
+					label: "Four"
+				},
+				{
+					value: 5,
+					label: "Five"
+				}
+
+			];
+
+			window.onload = function(){
+				var ctx = document.getElementById("chart-area").getContext("2d");
+				window.myDoughnut = new Chart(ctx).Doughnut({
+					data: doughnutData, 
+					options: {
+						responsive : true
+					}
+				});
+			};
+
+
+
+	</script>
+	</body>
+</html>

samples/doughnut.html

@@ -1,67 +1,110 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Doughnut Chart</title>
-		<script src="../Chart.js"></script>
-		<style>
-			body{
-				padding: 0;
-				margin: 0;
-			}
-			#canvas-holder{
-				width:30%;
-			}
-		</style>
-	</head>
-	<body>
-		<div id="canvas-holder">
-			<canvas id="chart-area" width="500" height="500"/>
-		</div>
 
+<head>
+    <title>Doughnut Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    body {
+        padding: 0;
+        margin: 0;
+    }
+    
+    #canvas-holder {
+        width: 30%;
+    }
+    </style>
+</head>
 
-	<script>
+<body>
+    <div id="canvas-holder" style="width:100%">
+        <canvas id="chart-area" width="500" height="500" />
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
 
-		var doughnutData = [
-				{
-					value: 300,
-					color:"#F7464A",
-					highlight: "#FF5A5E",
-					label: "Red"
-				},
-				{
-					value: 50,
-					color: "#46BFBD",
-					highlight: "#5AD3D1",
-					label: "Green"
-				},
-				{
-					value: 100,
-					color: "#FDB45C",
-					highlight: "#FFC870",
-					label: "Yellow"
-				},
-				{
-					value: 40,
-					color: "#949FB1",
-					highlight: "#A8B3C5",
-					label: "Grey"
-				},
-				{
-					value: 120,
-					color: "#4D5360",
-					highlight: "#616774",
-					label: "Dark Grey"
-				}
+    var config = {
+        data: {
+            datasets: [{
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }, {
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }, {
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }],
+            labels: [
+                "Red",
+                "Green",
+                "Yellow",
+                "Grey",
+                "Dark Grey"
+            ]
+        },
+        options: {
+            responsive: true
+        }
+    };
 
-			];
+    window.onload = function() {
+        var ctx = document.getElementById("chart-area").getContext("2d");
+        window.myDoughnut = new Chart(ctx).Doughnut(config);
+    };
 
-			window.onload = function(){
-				var ctx = document.getElementById("chart-area").getContext("2d");
-				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
-			};
+    $('#randomizeData').click(function() {
+        $.each(config.data.datasets, function(i, piece) {
+            $.each(piece.data, function(j, value) {
+                config.data.datasets[i].data[j] = randomScalingFactor();
+            });
+        });
+        window.myDoughnut.update();
+    });
+    </script>
+</body>
 
-
-
-	</script>
-	</body>
 </html>

samples/line-customTooltips.html

@@ -112,10 +112,13 @@
 
     window.onload = function() {
         var ctx1 = document.getElementById("chart1").getContext("2d");
-        window.myLine = new Chart(ctx1).Line(lineChartData, {
-        	showScale: false,
-        	pointDot : true,
-            responsive: true
+        window.myLine = new Chart(ctx1).Line({
+            data: lineChartData, 
+            options: {
+        	   showScale: false,
+        	   pointDot : true,
+                responsive: true
+            }
         });
 
         var ctx2 = document.getElementById("chart2").getContext("2d");

samples/line-multi-axis.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Line Chart Multiple Axes</title>
+    <script src="../Chart.js"></script>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+</head>
+
+<body>
+    <div style="width:50%">
+        <div>
+            <canvas id="canvas" height="450" width="600"></canvas>
+        </div>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+    };
+    var randomColor = function(opacity) {
+        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
+    };
+
+    var lineChartData = {
+        labels: ["January", "February", "March", "April", "May", "June", "July"],
+        datasets: [{
+            label: "My First dataset",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+            yAxisID: "y-axis-1",
+        }, {
+            label: "My Second dataset",
+            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+            yAxisID: "y-axis-2"
+        }]
+    };
+
+    $.each(lineChartData.datasets, function(i, dataset) {
+        dataset.borderColor = randomColor(0.4);
+        dataset.backgroundColor = randomColor(1);
+        dataset.pointBorderColor = randomColor(0.7);
+        dataset.pointBackgroundColor = randomColor(0.5);
+        dataset.pointBorderWidth = 1;
+    });
+
+    console.log(lineChartData);
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myLine = new Chart(ctx).Line({
+            data: lineChartData, 
+            options: {
+                responsive: true,
+                hoverMode: 'label',
+                stacked: false,
+                scales: {
+                    xAxes: [{
+                        gridLines: {
+                            offsetGridLines: false
+                        }
+                    }],
+                    yAxes: [{
+                        scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                        display: true,
+                        position: "left",
+                        id: "y-axis-1",
+                
+                        // grid line settings
+                        gridLines: {
+                            show: true,
+                            color: "rgba(0, 0, 0, 0.05)",
+                            lineWidth: 1,
+                            drawOnChartArea: true,
+                            drawTicks: true,
+                            zeroLineWidth: 1,
+                            zeroLineColor: "rgba(0,0,0,0.25)",
+                        },
+
+                        // scale numbers
+                        beginAtZero: false,
+                        integersOnly: false,
+                        override: null,
+
+                        // label settings
+                        labels: {
+                            show: true,
+                            template: "<%=value%>",
+                            fontSize: 12,
+                            fontStyle: "normal",
+                            fontColor: "#666",
+                            fontFamily: "Helvetica Neue",
+                        }
+                    }, {
+                        scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                        display: true,
+                        position: "right",
+                        id: "y-axis-2",
+                
+                        // grid line settings
+                        gridLines: {
+                            show: true,
+                            color: "rgba(0, 0, 0, 0.05)",
+                            lineWidth: 1,
+                            drawOnChartArea: false, // only want the grid lines for one axis to show up
+                            drawTicks: false,
+                            zeroLineWidth: 1,
+                            zeroLineColor: "rgba(0,0,0,0.25)",
+                        },
+
+                        // scale numbers
+                        beginAtZero: false,
+                        integersOnly: false,
+                        override: null,
+
+                        // label settings
+                        labels: {
+                            show: true,
+                            template: "<%=value%>",
+                            fontSize: 12,
+                            fontStyle: "normal",
+                            fontColor: "#666",
+                            fontFamily: "Helvetica Neue",
+                        }
+                    }],
+                }
+            }
+        });
+    };
+
+    $('#randomizeData').click(function() {
+        lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        window.myLine.update();
+    });
+    </script>
+</body>
+
+</html>

samples/line.html

@@ -1,54 +1,67 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Line Chart</title>
-		<script src="../Chart.js"></script>
-	</head>
-	<body>
-		<div style="width:30%">
-			<div>
-				<canvas id="canvas" height="450" width="600"></canvas>
-			</div>
-		</div>
 
+<head>
+    <title>Line Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+</head>
 
-	<script>
-		var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
-		var lineChartData = {
-			labels : ["January","February","March","April","May","June","July"],
-			datasets : [
-				{
-					label: "My First dataset",
-					fillColor : "rgba(220,220,220,0.2)",
-					strokeColor : "rgba(220,220,220,1)",
-					pointColor : "rgba(220,220,220,1)",
-					pointStrokeColor : "#fff",
-					pointHighlightFill : "#fff",
-					pointHighlightStroke : "rgba(220,220,220,1)",
-					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
-				},
-				{
-					label: "My Second dataset",
-					fillColor : "rgba(151,187,205,0.2)",
-					strokeColor : "rgba(151,187,205,1)",
-					pointColor : "rgba(151,187,205,1)",
-					pointStrokeColor : "#fff",
-					pointHighlightFill : "#fff",
-					pointHighlightStroke : "rgba(151,187,205,1)",
-					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
-				}
-			]
+<body>
+    <div style="width:50%">
+        <div>
+            <canvas id="canvas" height="450" width="600"></canvas>
+        </div>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+    };
+    var randomColor = function(opacity) {
+        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
+    };
 
-		}
+    var config = {
+        data: {
+            labels: ["January", "February", "March", "April", "May", "June", "July"],
+            datasets: [{
+                label: "My First dataset",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+                fill: false,
+            }, {
+                label: "My Second dataset",
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+            }]
+        },
+        options: {
+            responsive: true
+        }
+    };
 
-	window.onload = function(){
-		var ctx = document.getElementById("canvas").getContext("2d");
-		window.myLine = new Chart(ctx).Line(lineChartData, {
-			responsive: true
-		});
-	}
+    $.each(config.data.datasets, function(i, dataset) {
+        dataset.borderColor = randomColor(0.4);
+        dataset.backgroundColor = randomColor(0.5);
+        dataset.pointBorderColor = randomColor(0.7);
+        dataset.pointBackgroundColor = randomColor(0.5);
+        dataset.pointBorderWidth = 1;
+    });
 
+    console.log(config.data);
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myLine = new Chart(ctx).Line(config);
+    };
+
+    $('#randomizeData').click(function() {
+        config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        window.myLine.update();
+    });
+    </script>
+</body>
 
-	</script>
-	</body>
 </html>

samples/pie-customTooltips.html

@@ -145,10 +145,14 @@
 
     window.onload = function() {
         var ctx1 = document.getElementById("chart-area1").getContext("2d");
-        window.myPie = new Chart(ctx1).Pie(pieData);
+        window.myPie = new Chart(ctx1).Pie({
+            data: pieData
+        });
 
         var ctx2 = document.getElementById("chart-area2").getContext("2d");
-        window.myPie = new Chart(ctx2).Pie(pieData);
+        window.myPie = new Chart(ctx2).Pie({
+            data: pieData
+        });
     };
     </script>
 </body>

samples/pie.html

@@ -1,58 +1,101 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Pie Chart</title>
-		<script src="../Chart.js"></script>
-	</head>
-	<body>
-		<div id="canvas-holder">
-			<canvas id="chart-area" width="300" height="300"/>
-		</div>
 
+<head>
+    <title>Pie Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
 
-	<script>
+<body>
+    <div id="canvas-holder">
+        <canvas id="chart-area" width="300" height="300" />
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
 
-		var pieData = [
-				{
-					value: 300,
-					color:"#F7464A",
-					highlight: "#FF5A5E",
-					label: "Red"
-				},
-				{
-					value: 50,
-					color: "#46BFBD",
-					highlight: "#5AD3D1",
-					label: "Green"
-				},
-				{
-					value: 100,
-					color: "#FDB45C",
-					highlight: "#FFC870",
-					label: "Yellow"
-				},
-				{
-					value: 40,
-					color: "#949FB1",
-					highlight: "#A8B3C5",
-					label: "Grey"
-				},
-				{
-					value: 120,
-					color: "#4D5360",
-					highlight: "#616774",
-					label: "Dark Grey"
-				}
+    var config = {
+        data: {
+            datasets: [{
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }, {
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }, {
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+            }],
+            labels: [
+                "Red",
+                "Green",
+                "Yellow",
+                "Grey",
+                "Dark Grey"
+            ]
+        },
+        options: {
+            responsive: true
+        }
+    };
 
-			];
+    window.onload = function() {
+        var ctx = document.getElementById("chart-area").getContext("2d");
+        window.myPie = new Chart(ctx).Pie(config);
+    };
 
-			window.onload = function(){
-				var ctx = document.getElementById("chart-area").getContext("2d");
-				window.myPie = new Chart(ctx).Pie(pieData);
-			};
+    $('#randomizeData').click(function() {
+        $.each(config.data.datasets, function(i, piece) {
+            $.each(piece.data, function(j, value) {
+                config.data.datasets[i].data[j] = randomScalingFactor();
+                //config.data.datasets.backgroundColor[i] = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+            });
+        });
+        window.myPie.update();
+    });
+    </script>
+</body>
 
-
-
-	</script>
-	</body>
 </html>

samples/polar-area.html

@@ -1,60 +1,71 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Polar Area Chart</title>
-		<script src="../Chart.js"></script>
-	</head>
-	<body>
-		<div id="canvas-holder" style="width:30%">
-			<canvas id="chart-area" width="300" height="300"/>
-		</div>
 
+<head>
+    <title>Polar Area Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
 
-	<script>
+<body>
+    <div id="canvas-holder" style="width:100%">
+        <canvas id="chart-area" width="300" height="300" />
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
 
-		var polarData = [
-				{
-					value: 300,
-					color:"#F7464A",
-					highlight: "#FF5A5E",
-					label: "Red"
-				},
-				{
-					value: 50,
-					color: "#46BFBD",
-					highlight: "#5AD3D1",
-					label: "Green"
-				},
-				{
-					value: 100,
-					color: "#FDB45C",
-					highlight: "#FFC870",
-					label: "Yellow"
-				},
-				{
-					value: 40,
-					color: "#949FB1",
-					highlight: "#A8B3C5",
-					label: "Grey"
-				},
-				{
-					value: 120,
-					color: "#4D5360",
-					highlight: "#616774",
-					label: "Dark Grey"
-				}
+    var config = {
+        data: {
+            datasets: [{
+                data: [
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                    randomScalingFactor(),
+                ],
+                backgroundColor: [
+                    "#F7464A",
+                    "#46BFBD",
+                    "#FDB45C",
+                    "#949FB1",
+                    "#4D5360",
+                ],
+                labels: [
+                    "Red",
+                    "Green",
+                    "Yellow",
+                    "Grey",
+                    "Dark Grey"
+                ]
+            }],
+        },
+        options: {
+            responsive: true
+        }
+    };
 
-			];
+    window.onload = function() {
+        var ctx = document.getElementById("chart-area").getContext("2d");
+        window.myPolarArea = new Chart(ctx).PolarArea(config);
+    };
 
-			window.onload = function(){
-				var ctx = document.getElementById("chart-area").getContext("2d");
-				window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
-					responsive:true
-				});
-			};
+    $('#randomizeData').click(function() {
+        $.each(config.data.datasets, function(i, piece) {
+            $.each(piece.data, function(j, value) {
+                config.data.datasets[i].data[j] = randomScalingFactor();
+                //config.data.datasets.backgroundColor[i] = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
+            });
+        });
+        window.myPolarArea.update();
+    });
+    </script>
+</body>
 
-
-
-	</script>
-	</body>
 </html>

samples/radar.html

@@ -1,53 +1,61 @@
 <!doctype html>
 <html>
-	<head>
-		<title>Radar Chart</title>
-		<script src="../Chart.js"></script>
-		<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
-		<style>
-			canvas{
-			}
-		</style>
-	</head>
-	<body>
-		<div style="width:30%">
-			<canvas id="canvas" height="450" width="450"></canvas>
-		</div>
 
+<head>
+    <title>Radar Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
 
-	<script>
-	var radarChartData = {
-		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
-		datasets: [
-			{
-				label: "My First dataset",
-				fillColor: "rgba(220,220,220,0.2)",
-				strokeColor: "rgba(220,220,220,1)",
-				pointColor: "rgba(220,220,220,1)",
-				pointStrokeColor: "#fff",
-				pointHighlightFill: "#fff",
-				pointHighlightStroke: "rgba(220,220,220,1)",
-				data: [65,59,90,81,56,55,40]
-			},
-			{
-				label: "My Second dataset",
-				fillColor: "rgba(151,187,205,0.2)",
-				strokeColor: "rgba(151,187,205,1)",
-				pointColor: "rgba(151,187,205,1)",
-				pointStrokeColor: "#fff",
-				pointHighlightFill: "#fff",
-				pointHighlightStroke: "rgba(151,187,205,1)",
-				data: [28,48,40,19,96,27,100]
-			}
-		]
-	};
+<body>
+    <div style="width:100%">
+        <canvas id="canvas" height="450" width="450"></canvas>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return Math.round(Math.random() * 100);
+    };
+    var randomColorFactor = function() {
+        return Math.round(Math.random() * 255);
+    };
 
-	window.onload = function(){
-		window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
-			responsive: true
-		});
-	}
+    var config = {
+        data: {
+            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+            datasets: [{
+                label: "My First dataset",
+                backgroundColor: "rgba(220,220,220,0.2)",
+                pointBackgroundColor: "rgba(220,220,220,1)",
+                data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }, {
+                label: "My Second dataset",
+                backgroundColor: "rgba(151,187,205,0.2)",
+                pointBackgroundColor: "rgba(151,187,205,1)",
+                hoverPointBackgroundColor: "#fff",
+                pointHighlightStroke: "rgba(151,187,205,1)",
+                data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+            }]
+        },
+        options: {
+            responsive: true
+        }
+    };
+
+    window.onload = function() {
+        window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(config);
+    };
+
+    $('#randomizeData').click(function() {
+        config.data.datasets[0].backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+        config.data.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        config.data.datasets[1].backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.3)';
+        config.data.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+
+        window.myRadar.update();
+    });
+    </script>
+</body>
 
-	</script>
-	</body>
 </html>

samples/scatter-multi-axis.html

@@ -0,0 +1,223 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Scatter Chart Multi Axis</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
+
+<body>
+    <div style="width:50%">
+        <div>
+            <canvas id="canvas" height="450" width="600"></canvas>
+        </div>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    };
+    var randomColor = function(opacity) {
+        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
+    };
+
+    var scatterChartData = {
+        datasets: [{
+            label: "My First dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-1",
+			data: [{
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}]
+        }, {
+            label: "My Second dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-2",
+            data: [{
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}]
+        }]
+    };
+
+    $.each(scatterChartData.datasets, function(i, dataset) {
+        dataset.borderColor = randomColor(0.4);
+        dataset.backgroundColor = randomColor(0.1);
+        dataset.pointBorderColor = randomColor(0.7);
+        dataset.pointBackgroundColor = randomColor(0.5);
+        dataset.pointBorderWidth = 1;
+    });
+
+    console.log(scatterChartData);
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myScatter = new Chart(ctx).Scatter({
+        	data: scatterChartData,
+        	options: {
+	            responsive: true,
+	            hoverMode: 'single',
+	            scales: {
+	            	xAxes: [{
+	            		position: "bottom",
+	            		gridLines: {
+	            			zeroLineColor: "rgba(0,0,0,1)"
+	            		}
+	            	}],
+	            	yAxes: [{
+		                scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+		                display: true,
+		                position: "left",
+		                id: "y-axis-1",
+		        
+		                // grid line settings
+		                gridLines: {
+		                    show: true,
+		                    color: "rgba(0, 0, 0, 0.05)",
+		                    lineWidth: 1,
+		                    drawOnChartArea: true,
+		                    drawTicks: true,
+		                    zeroLineWidth: 1,
+		                    zeroLineColor: "rgba(0,0,0,0.25)",
+		                },
+
+		                // scale numbers
+		                beginAtZero: false,
+		                integersOnly: false,
+		                override: null,
+
+		                // label settings
+		                labels: {
+		                    show: true,
+		                    template: "<%=value%>",
+		                    fontSize: 12,
+		                    fontStyle: "normal",
+		                    fontColor: "#666",
+		                    fontFamily: "Helvetica Neue",
+		                }
+		            }, {
+		                scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+		                display: true,
+		                position: "right",
+		                id: "y-axis-2",
+		        
+		                // grid line settings
+		                gridLines: {
+		                    show: true,
+		                    color: "rgba(0, 0, 0, 0.05)",
+		                    lineWidth: 1,
+		                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+		                    drawTicks: false,
+		                    zeroLineWidth: 1,
+		                    zeroLineColor: "rgba(0,0,0,0.25)",
+		                },
+
+		                // scale numbers
+		                beginAtZero: false,
+		                integersOnly: false,
+		                override: null,
+
+		                // label settings
+		                labels: {
+		                    show: true,
+		                    template: "<%=value%>",
+		                    fontSize: 12,
+		                    fontStyle: "normal",
+		                    fontColor: "#666",
+		                    fontFamily: "Helvetica Neue",
+		                }
+		            }],
+	            }
+	        }
+        });
+    };
+
+    $('#randomizeData').click(function() {
+        scatterChartData.datasets[0].data = [{
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}];
+        scatterChartData.datasets[1].data = [{
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}]
+        window.myScatter.update();
+    });
+    </script>
+</body>
+
+</html>

samples/scatter.html

@@ -0,0 +1,155 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Scatter Chart</title>
+    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+</head>
+
+<body>
+    <div style="width:50%">
+        <div>
+            <canvas id="canvas" height="450" width="600"></canvas>
+        </div>
+    </div>
+    <button id="randomizeData">Randomize Data</button>
+    <script>
+    var randomScalingFactor = function() {
+        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+    };
+    var randomColor = function(opacity) {
+        return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
+    };
+
+    var scatterChartData = {
+        datasets: [{
+            label: "My First dataset",
+			data: [{
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}]
+        }, {
+            label: "My Second dataset",
+            data: [{
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}, {
+				x: randomScalingFactor(),
+				y: randomScalingFactor(),
+			}]
+        }]
+    };
+
+    $.each(scatterChartData.datasets, function(i, dataset) {
+        dataset.borderColor = randomColor(0.4);
+        dataset.backgroundColor = randomColor(0.1);
+        dataset.pointBorderColor = randomColor(0.7);
+        dataset.pointBackgroundColor = randomColor(0.5);
+        dataset.pointBorderWidth = 1;
+    });
+
+    console.log(scatterChartData);
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myScatter = new Chart(ctx).Scatter({
+        	data: scatterChartData,
+        	options: {
+	            responsive: true,
+	            hoverMode: 'single', // should always use single for a scatter chart
+	            scales: {
+	            	xAxes: [{
+	            		gridLines: {
+	            			zeroLineColor: "rgba(0,0,0,1)"
+	            		}
+	            	}]
+	            }
+            }
+        });
+    };
+
+    $('#randomizeData').click(function() {
+        scatterChartData.datasets[0].data = [{
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}];
+        scatterChartData.datasets[1].data = [{
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}, {
+			x: randomScalingFactor(),
+			y: randomScalingFactor(),
+		}]
+        window.myScatter.update();
+    });
+    </script>
+</body>
+
+</html>

src/Chart.Bar.js

@@ -1,302 +1,561 @@
-(function(){
-	"use strict";
+(function() {
+    "use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+    var root = this,
+        Chart = root.Chart,
+        helpers = Chart.helpers;
+
+    var defaultConfig = {
+
+        stacked: false,
+
+        hover: {
+            mode: "label"
+        },
+
+        scales: {
+            xAxes: [{
+                scaleType: "dataset", // scatter should not use a dataset axis
+                display: true,
+                position: "bottom",
+                id: "x-axis-1", // need an ID so datasets can reference the scale
+
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true,
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                    offsetGridLines: true,
+                },
+
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                },
+            }],
+            yAxes: [{
+                scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                display: true,
+                position: "left",
+                id: "y-axis-1",
+
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true, // draw ticks extending towards the label
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                },
+
+                // scale numbers
+                beginAtZero: false,
+                override: null,
+
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                }
+            }],
+        },
+
+    };
 
 
-	var defaultConfig = {
-		//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
-		scaleBeginAtZero : true,
+    Chart.Type.extend({
+        name: "Bar",
+        defaults: defaultConfig,
+        initialize: function() {
 
-		//Boolean - Whether grid lines are shown across the chart
-		scaleShowGridLines : true,
+            var _this = this;
 
-		//String - Colour of the grid lines
-		scaleGridLineColor : "rgba(0,0,0,.05)",
+            // Events
+            helpers.bindEvents(this, this.options.events, this.events);
 
-		//Number - Width of the grid lines
-		scaleGridLineWidth : 1,
+            //Create a new bar for each piece of data
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                dataset.metaData = [];
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Rectangle({
+                        _chart: this.chart,
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                    }));
+                }, this);
 
-		//Boolean - Whether to show horizontal lines (except X axis)
-		scaleShowHorizontalLines: true,
+                // The bar chart only supports a single x axis because the x axis is always a dataset axis
+                dataset.xAxisID = this.options.scales.xAxes[0].id;
 
-		//Boolean - Whether to show vertical lines (except Y axis)
-		scaleShowVerticalLines: true,
+                if (!dataset.yAxisID) {
+                    dataset.yAxisID = this.options.scales.yAxes[0].id;
+                }
+            }, this);
 
-		//Boolean - If there is a stroke on each bar
-		barShowStroke : true,
+            // Build and fit the scale. Needs to happen after the axis IDs have been set
+            this.buildScale();
 
-		//Number - Pixel width of the bar stroke
-		barStrokeWidth : 2,
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
 
-		//Number - Spacing between each of the X value sets
-		barValueSpacing : 5,
+            // Need to fit scales before we reset elements. 
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
 
-		//Number - Spacing between data sets within X values
-		barDatasetSpacing : 1,
+            // So that we animate from the baseline
+            this.resetElements();
 
-		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+            // Update the chart with the latest data.
+            this.update();
+        },
+        resetElements: function() {
+            // Update the points
+            this.eachElement(function(bar, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
 
-	};
+                var yScalePoint;
+
+                if (yScale.min < 0 && yScale.max <0) {
+                    // all less than 0. use the top
+                    yScalePoint = yScale.getPixelForValue(yScale.max);
+                } else if (yScale.min > 0 && yScale.max > 0) {
+                    yScalePoint = yScale.getPixelForValue(yScale.min);
+                } else {
+                    yScalePoint = yScale.getPixelForValue(0);
+                }
+
+                helpers.extend(bar, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+                        y: yScalePoint,
+
+                        // Appearance
+                        base: yScale.calculateBarBase(datasetIndex, index),
+                        width: xScale.calculateBarWidth(this.data.datasets.length),
+                        backgroundColor: bar.custom && bar.custom.backgroundColor ? bar.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].backgroundColor, index, this.options.elements.bar.backgroundColor),
+                        borderColor: bar.custom && bar.custom.borderColor ? bar.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderColor, index, this.options.elements.bar.borderColor),
+                        borderWidth: bar.custom && bar.custom.borderWidth ? bar.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderWidth, index, this.options.elements.bar.borderWidth),
+
+                        // Tooltip
+                        label: this.data.labels[index],
+                        datasetLabel: this.data.datasets[datasetIndex].label,
+                    },
+                });
+                bar.pivot();
+            }, this);
+        },
+        update: function() {
+            // Update the scale sizes
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // Update the points
+            this.eachElement(function(bar, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                helpers.extend(bar, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.calculateBarX(this.data.datasets.length, datasetIndex, index),
+                        y: yScale.calculateBarY(datasetIndex, index),
+
+                        // Appearance
+                        base: yScale.calculateBarBase(datasetIndex, index),
+                        width: xScale.calculateBarWidth(this.data.datasets.length),
+                        backgroundColor: bar.custom && bar.custom.backgroundColor ? bar.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].backgroundColor, index, this.options.elements.bar.backgroundColor),
+                        borderColor: bar.custom && bar.custom.borderColor ? bar.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderColor, index, this.options.elements.bar.borderColor),
+                        borderWidth: bar.custom && bar.custom.borderWidth ? bar.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].borderWidth, index, this.options.elements.bar.borderWidth),
+
+                        // Tooltip
+                        label: this.data.labels[index],
+                        datasetLabel: this.data.datasets[datasetIndex].label,
+                    },
+                });
+                bar.pivot();
+            }, this);
 
 
-	Chart.Type.extend({
-		name: "Bar",
-		defaults : defaultConfig,
-		initialize:  function(data){
+            this.render();
+        },
+        buildScale: function(labels) {
+            var self = this;
 
-			//Expose options as a scope variable here so we can access it in the ScaleClass
-			var options = this.options;
+            // Function to determine the range of all the 
+            var calculateYRange = function() {
+                this.min = null;
+                this.max = null;
 
-			this.ScaleClass = Chart.Scale.extend({
-				offsetGridLines : true,
-				calculateBarX : function(datasetCount, datasetIndex, barIndex){
-					//Reusable method for calculating the xPosition of a given bar based on datasetIndex & width of the bar
-					var xWidth = this.calculateBaseWidth(),
-						xAbsolute = this.calculateX(barIndex) - (xWidth/2),
-						barWidth = this.calculateBarWidth(datasetCount);
+                var positiveValues = [];
+                var negativeValues = [];
 
-					return xAbsolute + (barWidth * datasetIndex) + (datasetIndex * options.barDatasetSpacing) + barWidth/2;
-				},
-				calculateBaseWidth : function(){
-					return (this.calculateX(1) - this.calculateX(0)) - (2*options.barValueSpacing);
-				},
-				calculateBarWidth : function(datasetCount){
-					//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
-					var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * options.barDatasetSpacing);
+                if (self.options.stacked) {
+                    helpers.each(self.data.datasets, function(dataset) {
+                        if (dataset.yAxisID === this.id) {
+                            helpers.each(dataset.data, function(value, index) {
+                                positiveValues[index] = positiveValues[index] || 0;
+                                negativeValues[index] = negativeValues[index] || 0;
 
-					return (baseWidth / datasetCount);
-				}
-			});
+                                if (self.options.relativePoints) {
+                                    positiveValues[index] = 100;
+                                } else {
+                                    if (value < 0) {
+                                        negativeValues[index] += value;
+                                    } else {
+                                        positiveValues[index] += value;
+                                    }
+                                }
+                            }, this);
+                        }
+                    }, this);
 
-			this.datasets = [];
+                    var values = positiveValues.concat(negativeValues);
+                    this.min = helpers.min(values);
+                    this.max = helpers.max(values);
 
-			//Set up tooltip events on the chart
-			if (this.options.showTooltips){
-				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
-					var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
+                } else {
+                    helpers.each(self.data.datasets, function(dataset) {
+                        if (dataset.yAxisID === this.id) {
+                            helpers.each(dataset.data, function(value, index) {
+                                if (this.min === null) {
+                                    this.min = value;
+                                } else if (value < this.min) {
+                                    this.min = value;
+                                }
 
-					this.eachBars(function(bar){
-						bar.restore(['fillColor', 'strokeColor']);
-					});
-					helpers.each(activeBars, function(activeBar){
-						activeBar.fillColor = activeBar.highlightFill;
-						activeBar.strokeColor = activeBar.highlightStroke;
-					});
-					this.showTooltip(activeBars);
-				});
-			}
+                                if (this.max === null) {
+                                    this.max = value;
+                                } else if (value > this.max) {
+                                    this.max = value;
+                                }
+                            }, this);
+                        }
+                    }, this);
+                }
+            };
 
-			//Declare the extension of the default point, to cater for the options passed in to the constructor
-			this.BarClass = Chart.Rectangle.extend({
-				strokeWidth : this.options.barStrokeWidth,
-				showStroke : this.options.barShowStroke,
-				ctx : this.chart.ctx
-			});
+            // Map of scale ID to scale object so we can lookup later 
+            this.scales = {};
 
-			//Iterate through each of the datasets, and build this into a property of the chart
-			helpers.each(data.datasets,function(dataset,datasetIndex){
+            // Build the x axis. The line chart only supports a single x axis
+            var ScaleClass = Chart.scales.getScaleConstructor(this.options.scales.xAxes[0].scaleType);
+            var xScale = new ScaleClass({
+                ctx: this.chart.ctx,
+                options: this.options.scales.xAxes[0],
+                id: this.options.scales.xAxes[0].id,
+                calculateRange: function() {
+                    this.labels = self.data.labels;
+                    this.min = 0;
+                    this.max = this.labels.length;
+                },
+                calculateBaseWidth: function() {
+                    return (this.getPixelForValue(null, 1, true) - this.getPixelForValue(null, 0, true)) - (2 * self.options.elements.bar.valueSpacing);
+                },
+                calculateBarWidth: function(datasetCount) {
+                    //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
+                    var baseWidth = this.calculateBaseWidth() - ((datasetCount - 1) * self.options.elements.bar.datasetSpacing);
 
-				var datasetObject = {
-					label : dataset.label || null,
-					fillColor : dataset.fillColor,
-					strokeColor : dataset.strokeColor,
-					bars : []
-				};
+                    if (self.options.stacked) {
+                        return baseWidth;
+                    }
+                    return (baseWidth / datasetCount);
+                },
+                calculateBarX: function(datasetCount, datasetIndex, elementIndex) {
+                    var xWidth = this.calculateBaseWidth(),
+                        xAbsolute = this.getPixelForValue(null, elementIndex, true) - (xWidth / 2),
+                        barWidth = this.calculateBarWidth(datasetCount);
 
-				this.datasets.push(datasetObject);
+                    if (self.options.stacked) {
+                        return xAbsolute + barWidth / 2;
+                    }
 
-				helpers.each(dataset.data,function(dataPoint,index){
-					//Add a new point for each piece of data, passing any required data to draw.
-					datasetObject.bars.push(new this.BarClass({
-						value : dataPoint,
-						label : data.labels[index],
-						datasetLabel: dataset.label,
-						strokeColor : dataset.strokeColor,
-						fillColor : dataset.fillColor,
-						highlightFill : dataset.highlightFill || dataset.fillColor,
-						highlightStroke : dataset.highlightStroke || dataset.strokeColor
-					}));
-				},this);
+                    return xAbsolute + (barWidth * datasetIndex) + (datasetIndex * self.options.elements.bar.datasetSpacing) + barWidth / 2;
+                },
+            });
+            this.scales[xScale.id] = xScale;
 
-			},this);
+            // Build up all the y scales
+            helpers.each(this.options.scales.yAxes, function(yAxisOptions) {
+                var ScaleClass = Chart.scales.getScaleConstructor(yAxisOptions.scaleType);
+                var scale = new ScaleClass({
+                    ctx: this.chart.ctx,
+                    options: yAxisOptions,
+                    calculateRange: calculateYRange,
+                    calculateBarBase: function(datasetIndex, index) {
+                        var base = 0;
 
-			this.buildScale(data.labels);
+                        if (self.options.stacked) {
 
-			this.BarClass.prototype.base = this.scale.endPoint;
+                            var value = self.data.datasets[datasetIndex].data[index];
 
-			this.eachBars(function(bar, index, datasetIndex){
-				helpers.extend(bar, {
-					width : this.scale.calculateBarWidth(this.datasets.length),
-					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-					y: this.scale.endPoint
-				});
-				bar.save();
-			}, this);
+                            if (value < 0) {
+                                for (var i = 0; i < datasetIndex; i++) {
+                                    if (self.data.datasets[i].yAxisID === this.id) {
+                                        base += self.data.datasets[i].data[index] < 0 ? self.data.datasets[i].data[index] : 0;
+                                    }
+                                }
+                            } else {
+                                for (var j = 0; j < datasetIndex; j++) {
+                                    if (self.data.datasets[j].yAxisID === this.id) {
+                                        base += self.data.datasets[j].data[index] > 0 ? self.data.datasets[j].data[index] : 0;
+                                    }
+                                }
+                            }
 
-			this.render();
-		},
-		update : function(){
-			this.scale.update();
-			// Reset any highlight colours before updating.
-			helpers.each(this.activeElements, function(activeElement){
-				activeElement.restore(['fillColor', 'strokeColor']);
-			});
+                            return this.getPixelForValue(base);
+                        }
 
-			this.eachBars(function(bar){
-				bar.save();
-			});
-			this.render();
-		},
-		eachBars : function(callback){
-			helpers.each(this.datasets,function(dataset, datasetIndex){
-				helpers.each(dataset.bars, callback, this, datasetIndex);
-			},this);
-		},
-		getBarsAtEvent : function(e){
-			var barsArray = [],
-				eventPosition = helpers.getRelativePosition(e),
-				datasetIterator = function(dataset){
-					barsArray.push(dataset.bars[barIndex]);
-				},
-				barIndex;
+                        base = this.getPixelForValue(this.min);
 
-			for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
-				for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
-					if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){
-						helpers.each(this.datasets, datasetIterator);
-						return barsArray;
-					}
-				}
-			}
+                        if (this.beginAtZero || ((this.min <= 0 && this.max >= 0) || (this.min >= 0 && this.max <= 0))) {
+                            base = this.getPixelForValue(0);
+                            base += this.options.gridLines.lineWidth;
+                        } else if (this.min < 0 && this.max < 0) {
+                            // All values are negative. Use the top as the base
+                            base = this.getPixelForValue(this.max);
+                        }
 
-			return barsArray;
-		},
-		buildScale : function(labels){
-			var self = this;
+                        return base;
 
-			var dataTotal = function(){
-				var values = [];
-				self.eachBars(function(bar){
-					values.push(bar.value);
-				});
-				return values;
-			};
+                    },
+                    calculateBarY: function(datasetIndex, index) {
 
-			var scaleOptions = {
-				templateString : this.options.scaleLabel,
-				height : this.chart.height,
-				width : this.chart.width,
-				ctx : this.chart.ctx,
-				textColor : this.options.scaleFontColor,
-				fontSize : this.options.scaleFontSize,
-				fontStyle : this.options.scaleFontStyle,
-				fontFamily : this.options.scaleFontFamily,
-				valuesCount : labels.length,
-				beginAtZero : this.options.scaleBeginAtZero,
-				integersOnly : this.options.scaleIntegersOnly,
-				calculateYRange: function(currentHeight){
-					var updatedRanges = helpers.calculateScaleRange(
-						dataTotal(),
-						currentHeight,
-						this.fontSize,
-						this.beginAtZero,
-						this.integersOnly
-					);
-					helpers.extend(this, updatedRanges);
-				},
-				xLabels : labels,
-				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
-				lineWidth : this.options.scaleLineWidth,
-				lineColor : this.options.scaleLineColor,
-				showHorizontalLines : this.options.scaleShowHorizontalLines,
-				showVerticalLines : this.options.scaleShowVerticalLines,
-				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
-				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
-				padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
-				showLabels : this.options.scaleShowLabels,
-				display : this.options.showScale
-			};
+                        var value = self.data.datasets[datasetIndex].data[index];
 
-			if (this.options.scaleOverride){
-				helpers.extend(scaleOptions, {
-					calculateYRange: helpers.noop,
-					steps: this.options.scaleSteps,
-					stepValue: this.options.scaleStepWidth,
-					min: this.options.scaleStartValue,
-					max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
-				});
-			}
+                        if (self.options.stacked) {
 
-			this.scale = new this.ScaleClass(scaleOptions);
-		},
-		addData : function(valuesArray,label){
-			//Map the values array for each of the datasets
-			helpers.each(valuesArray,function(value,datasetIndex){
-				//Add a new point for each piece of data, passing any required data to draw.
-				this.datasets[datasetIndex].bars.push(new this.BarClass({
-					value : value,
-					label : label,
-					x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
-					y: this.scale.endPoint,
-					width : this.scale.calculateBarWidth(this.datasets.length),
-					base : this.scale.endPoint,
-					strokeColor : this.datasets[datasetIndex].strokeColor,
-					fillColor : this.datasets[datasetIndex].fillColor
-				}));
-			},this);
+                            var sumPos = 0,
+                                sumNeg = 0;
 
-			this.scale.addXLabel(label);
-			//Then re-render the chart.
-			this.update();
-		},
-		removeData : function(){
-			this.scale.removeXLabel();
-			//Then re-render the chart.
-			helpers.each(this.datasets,function(dataset){
-				dataset.bars.shift();
-			},this);
-			this.update();
-		},
-		reflow : function(){
-			helpers.extend(this.BarClass.prototype,{
-				y: this.scale.endPoint,
-				base : this.scale.endPoint
-			});
-			var newScaleProps = helpers.extend({
-				height : this.chart.height,
-				width : this.chart.width
-			});
-			this.scale.update(newScaleProps);
-		},
-		draw : function(ease){
-			var easingDecimal = ease || 1;
-			this.clear();
+                            for (var i = 0; i < datasetIndex; i++) {
+                                if (self.data.datasets[i].data[index] < 0) {
+                                    sumNeg += self.data.datasets[i].data[index] || 0;
+                                } else {
+                                    sumPos += self.data.datasets[i].data[index] || 0;
+                                }
+                            }
 
-			var ctx = this.chart.ctx;
+                            if (value < 0) {
+                                return this.getPixelForValue(sumNeg + value);
+                            } else {
+                                return this.getPixelForValue(sumPos + value);
+                            }
 
-			this.scale.draw(easingDecimal);
+                            return this.getPixelForValue(value);
+                        }
 
-			//Draw all the bars for each dataset
-			helpers.each(this.datasets,function(dataset,datasetIndex){
-				helpers.each(dataset.bars,function(bar,index){
-					if (bar.hasValue()){
-						bar.base = this.scale.endPoint;
-						//Transition then draw
-						bar.transition({
-							x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-							y : this.scale.calculateY(bar.value),
-							width : this.scale.calculateBarWidth(this.datasets.length)
-						}, easingDecimal).draw();
-					}
-				},this);
+                        var offset = 0;
 
-			},this);
-		}
-	});
+                        for (var j = datasetIndex; j < self.data.datasets.length; j++) {
+                            if (j === datasetIndex && value) {
+                                offset += value;
+                            } else {
+                                offset = offset + value;
+                            }
+                        }
+
+                        return this.getPixelForValue(value);
+                    },
+                    id: yAxisOptions.id,
+                });
+
+                this.scales[scale.id] = scale;
+            }, this);
+        },
+        draw: function(ease) {
+
+            var easingDecimal = ease || 1;
+            this.clear();
+
+            // Draw all the scales
+            helpers.each(this.scales, function(scale) {
+                scale.draw(this.chartArea);
+            }, this);
+
+            //Draw all the bars for each dataset
+            this.eachElement(function(bar, index, datasetIndex) {
+                bar.transition(easingDecimal).draw();
+            }, this);
+
+            // Finally draw the tooltip
+            this.tooltip.transition(easingDecimal).draw();
+        },
+        events: function(e) {
+
+
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
+
+            this.lastActive = this.lastActive || [];
+
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getElementAtEvent(e);
+                    case 'label':
+                        return this.getElementsAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+            if (e.type == 'mouseup' || e.type == 'click') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.bar.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.bar.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.bar.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.bar.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.bar.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.bar.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.active[0]._model.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.active[i]._model.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
+
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
+
+
+            this.tooltip.pivot();
+
+            // Hover animations
+            if (!this.animating) {
+                var changed;
+
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
+
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
+
+                    this.stop();
+                    this.render(this.options.hoverAnimationDuration);
+                }
+            }
+
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+        },
+    });
 
 
 }).call(this);

src/Chart.Doughnut.js

@@ -1,184 +1,367 @@
-(function(){
-	"use strict";
+(function() {
+    "use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		//Cache a local reference to Chart.helpers
-		helpers = Chart.helpers;
+    var root = this,
+        Chart = root.Chart,
+        //Cache a local reference to Chart.helpers
+        helpers = Chart.helpers;
 
-	var defaultConfig = {
-		//Boolean - Whether we should show a stroke on each segment
-		segmentShowStroke : true,
+    var defaultConfig = {
 
-		//String - The colour of each segment stroke
-		segmentStrokeColor : "#fff",
+        animation: {
+            //Boolean - Whether we animate the rotation of the Doughnut
+            animateRotate: true,
 
-		//Number - The width of each segment stroke
-		segmentStrokeWidth : 2,
+            //Boolean - Whether we animate scaling the Doughnut from the centre
+            animateScale: false,
+        },
 
-		//The percentage of the chart that we cut out of the middle.
-		percentageInnerCutout : 50,
+        hover: {
+            mode: 'single'
+        },
 
-		//Number - Amount of animation steps
-		animationSteps : 100,
+        //The percentage of the chart that we cut out of the middle.
 
-		//String - Animation easing effect
-		animationEasing : "easeOutBounce",
+        cutoutPercentage: 50,
 
-		//Boolean - Whether we animate the rotation of the Doughnut
-		animateRotate : true,
+    };
 
-		//Boolean - Whether we animate scaling the Doughnut from the centre
-		animateScale : false,
+    Chart.Type.extend({
+        //Passing in a name registers this chart in the Chart namespace
+        name: "Doughnut",
+        //Providing a defaults will also register the deafults in the chart namespace
+        defaults: defaultConfig,
+        //Initialize is fired when the chart is initialized - Data is passed in as a parameter
+        //Config is automatically merged by the core of Chart.js, and is available at this.options
+        initialize: function() {
 
-		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
+            //Set up tooltip events on the chart
+            helpers.bindEvents(this, this.options.events, this.events);
 
-	};
+            //Create a new bar for each piece of data
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                dataset.metaData = [];
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Arc({
+                        _chart: this.chart,
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                        _model: {}
+                    }));
+                }, this);
+            }, this);
+
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
+
+            this.resetElements();
+
+            // Update the chart with the latest data.
+            this.update();
+
+        },
+
+        calculateCircumference: function(dataset, value) {
+            if (dataset.total > 0) {
+                return (Math.PI * 2) * (value / dataset.total);
+            } else {
+                return 0;
+            }
+        },
+        resetElements: function() {
+            this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.elements.slice.borderWidth / 2) / 2;
+            this.innerRadius = this.options.cutoutPercentage ? (this.outerRadius / 100) * (this.options.cutoutPercentage) : 1;
+            this.radiusLength = (this.outerRadius - this.innerRadius) / this.data.datasets.length;
+
+            // Update the points
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                // So that calculateCircumference works
+                dataset.total = 0;
+                helpers.each(dataset.data, function(value) {
+                    dataset.total += Math.abs(value);
+                }, this);
+
+                dataset.outerRadius = this.outerRadius - (this.radiusLength * datasetIndex);
+                dataset.innerRadius = dataset.outerRadius - this.radiusLength;
+
+                helpers.each(dataset.metaData, function(slice, index) {
+                    helpers.extend(slice, {
+                        _model: {
+                            x: this.chart.width / 2,
+                            y: this.chart.height / 2,
+                            startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
+                            circumference: (this.options.animation.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value),
+                            outerRadius: (this.options.animation.animateScale) ? 0 : dataset.outerRadius,
+                            innerRadius: (this.options.animation.animateScale) ? 0 : dataset.innerRadius,
+
+                            backgroundColor: slice.custom && slice.custom.backgroundColor ? slice.custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor),
+                            hoverBackgroundColor: slice.custom && slice.custom.hoverBackgroundColor ? slice.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, this.options.elements.slice.hoverBackgroundColor),
+                            borderWidth: slice.custom && slice.custom.borderWidth ? slice.custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth),
+                            borderColor: slice.custom && slice.custom.borderColor ? slice.custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor),
+
+                            label: helpers.getValueAtIndexOrDefault(dataset.label, index, this.data.labels[index])
+                        },
+                    });
+
+                    slice.pivot();
+                }, this);
+
+            }, this);
+        },
+        update: function() {
+
+            this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.elements.slice.borderWidth / 2) / 2;
+            this.innerRadius = this.options.cutoutPercentage ? (this.outerRadius / 100) * (this.options.cutoutPercentage) : 1;
+            this.radiusLength = (this.outerRadius - this.innerRadius) / this.data.datasets.length;
 
 
-	Chart.Type.extend({
-		//Passing in a name registers this chart in the Chart namespace
-		name: "Doughnut",
-		//Providing a defaults will also register the deafults in the chart namespace
-		defaults : defaultConfig,
-		//Initialize is fired when the chart is initialized - Data is passed in as a parameter
-		//Config is automatically merged by the core of Chart.js, and is available at this.options
-		initialize:  function(data){
+            // Update the points
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 
-			//Declare segments as a static property to prevent inheriting across the Chart type prototype
-			this.segments = [];
-			this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) -	this.options.segmentStrokeWidth/2)/2;
+                dataset.total = 0;
+                helpers.each(dataset.data, function(value) {
+                    dataset.total += Math.abs(value);
+                }, this);
 
-			this.SegmentArc = Chart.Arc.extend({
-				ctx : this.chart.ctx,
-				x : this.chart.width/2,
-				y : this.chart.height/2
-			});
 
-			//Set up tooltip events on the chart
-			if (this.options.showTooltips){
-				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
-					var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
+                dataset.outerRadius = this.outerRadius - (this.radiusLength * datasetIndex);
 
-					helpers.each(this.segments,function(segment){
-						segment.restore(["fillColor"]);
-					});
-					helpers.each(activeSegments,function(activeSegment){
-						activeSegment.fillColor = activeSegment.highlightColor;
-					});
-					this.showTooltip(activeSegments);
-				});
-			}
-			this.calculateTotal(data);
+                dataset.innerRadius = dataset.outerRadius - this.radiusLength;
 
-			helpers.each(data,function(datapoint, index){
-				this.addData(datapoint, index, true);
-			},this);
+                helpers.each(dataset.metaData, function(slice, index) {
 
-			this.render();
-		},
-		getSegmentsAtEvent : function(e){
-			var segmentsArray = [];
+                    helpers.extend(slice, {
+                        // Utility
+                        _chart: this.chart,
+                        _datasetIndex: datasetIndex,
+                        _index: index,
 
-			var location = helpers.getRelativePosition(e);
+                        // Desired view properties
+                        _model: {
+                            x: this.chart.width / 2,
+                            y: this.chart.height / 2,
+                            circumference: this.calculateCircumference(dataset, dataset.data[index]),
+                            outerRadius: dataset.outerRadius,
+                            innerRadius: dataset.innerRadius,
 
-			helpers.each(this.segments,function(segment){
-				if (segment.inRange(location.x,location.y)) segmentsArray.push(segment);
-			},this);
-			return segmentsArray;
-		},
-		addData : function(segment, atIndex, silent){
-			var index = atIndex || this.segments.length;
-			this.segments.splice(index, 0, new this.SegmentArc({
-				value : segment.value,
-				outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
-				innerRadius : (this.options.animateScale) ? 0 : (this.outerRadius/100) * this.options.percentageInnerCutout,
-				fillColor : segment.color,
-				highlightColor : segment.highlight || segment.color,
-				showStroke : this.options.segmentShowStroke,
-				strokeWidth : this.options.segmentStrokeWidth,
-				strokeColor : this.options.segmentStrokeColor,
-				startAngle : Math.PI * 1.5,
-				circumference : (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
-				label : segment.label
-			}));
-			if (!silent){
-				this.reflow();
-				this.update();
-			}
-		},
-		calculateCircumference : function(value){
-			return (Math.PI*2)*(Math.abs(value) / this.total);
-		},
-		calculateTotal : function(data){
-			this.total = 0;
-			helpers.each(data,function(segment){
-				this.total += Math.abs(segment.value);
-			},this);
-		},
-		update : function(){
-			this.calculateTotal(this.segments);
+                            backgroundColor: slice.custom && slice.custom.backgroundColor ? slice.custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor),
+                            hoverBackgroundColor: slice.custom && slice.custom.hoverBackgroundColor ? slice.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, this.options.elements.slice.hoverBackgroundColor),
+                            borderWidth: slice.custom && slice.custom.borderWidth ? slice.custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth),
+                            borderColor: slice.custom && slice.custom.borderColor ? slice.custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor),
 
-			// Reset any highlight colours before updating.
-			helpers.each(this.activeElements, function(activeElement){
-				activeElement.restore(['fillColor']);
-			});
+                            label: helpers.getValueAtIndexOrDefault(dataset.label, index, this.data.labels[index])
+                        },
+                    });
 
-			helpers.each(this.segments,function(segment){
-				segment.save();
-			});
-			this.render();
-		},
+                    if (index === 0) {
+                        slice._model.startAngle = Math.PI * -0.5; // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
+                    } else {
+                        slice._model.startAngle = dataset.metaData[index - 1]._model.endAngle;
+                    }
 
-		removeData: function(atIndex){
-			var indexToDelete = (helpers.isNumber(atIndex)) ? atIndex : this.segments.length-1;
-			this.segments.splice(indexToDelete, 1);
-			this.reflow();
-			this.update();
-		},
+                    slice._model.endAngle = slice._model.startAngle + slice._model.circumference;
 
-		reflow : function(){
-			helpers.extend(this.SegmentArc.prototype,{
-				x : this.chart.width/2,
-				y : this.chart.height/2
-			});
-			this.outerRadius = (helpers.min([this.chart.width,this.chart.height]) -	this.options.segmentStrokeWidth/2)/2;
-			helpers.each(this.segments, function(segment){
-				segment.update({
-					outerRadius : this.outerRadius,
-					innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout
-				});
-			}, this);
-		},
-		draw : function(easeDecimal){
-			var animDecimal = (easeDecimal) ? easeDecimal : 1;
-			this.clear();
-			helpers.each(this.segments,function(segment,index){
-				segment.transition({
-					circumference : this.calculateCircumference(segment.value),
-					outerRadius : this.outerRadius,
-					innerRadius : (this.outerRadius/100) * this.options.percentageInnerCutout
-				},animDecimal);
 
-				segment.endAngle = segment.startAngle + segment.circumference;
+                    //Check to see if it's the last slice, if not get the next and update its start angle
+                    if (index < dataset.data.length - 1) {
+                        dataset.metaData[index + 1]._model.startAngle = slice._model.endAngle;
+                    }
 
-				segment.draw();
-				if (index === 0){
-					segment.startAngle = Math.PI * 1.5;
-				}
-				//Check to see if it's the last segment, if not get the next and update the start angle
-				if (index < this.segments.length-1){
-					this.segments[index+1].startAngle = segment.endAngle;
-				}
-			},this);
+                    slice.pivot();
+                }, this);
 
-		}
-	});
+            }, this);
 
-	Chart.types.Doughnut.extend({
-		name : "Pie",
-		defaults : helpers.merge(defaultConfig,{percentageInnerCutout : 0})
-	});
+            this.render();
+        },
+        draw: function(easeDecimal) {
+            easeDecimal = easeDecimal || 1;
+            this.clear();
 
-}).call(this);
+            this.eachElement(function(slice) {
+                slice.transition(easeDecimal).draw();
+            }, this);
+
+            this.tooltip.transition(easeDecimal).draw();
+        },
+        events: function(e) {
+
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
+
+            this.lastActive = this.lastActive || [];
+
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getSliceAtEvent(e);
+                    case 'label':
+                        return this.getSlicesAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+            if (e.type == 'mouseup' || e.type == 'click') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, this.active[0]._model.borderColor);
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, this.active[0]._model.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.hoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, this.active[0]._model.borderColor);
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, this.active[i]._model.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
+
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
+
+
+            // Hover animations
+            this.tooltip.pivot();
+
+            if (!this.animating) {
+                var changed;
+
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
+
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
+
+                    this.stop();
+                    this.render(this.options.hover.animationDuration);
+                }
+            }
+
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+        },
+        getSliceAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },
+        /*getSlicesAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inGroupRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },*/
+    });
+
+    Chart.types.Doughnut.extend({
+        name: "Pie",
+        defaults: helpers.merge(defaultConfig, {
+            cutoutPercentage: 0
+        })
+    });
+
+}).call(this);

src/Chart.Line.js

@@ -1,374 +1,620 @@
-(function(){
-	"use strict";
+(function() {
+    "use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+    var root = this,
+        Chart = root.Chart,
+        helpers = Chart.helpers;
 
-	var defaultConfig = {
+    var defaultConfig = {
 
-		///Boolean - Whether grid lines are shown across the chart
-		scaleShowGridLines : true,
+        stacked: false,
 
-		//String - Colour of the grid lines
-		scaleGridLineColor : "rgba(0,0,0,.05)",
+        hover: {
+            mode: "label"
+        },
 
-		//Number - Width of the grid lines
-		scaleGridLineWidth : 1,
+        scales: {
+            xAxes: [{
+                scaleType: "dataset", // scatter should not use a dataset axis
+                display: true,
+                position: "bottom",
+                id: "x-axis-1", // need an ID so datasets can reference the scale
 
-		//Boolean - Whether to show horizontal lines (except X axis)
-		scaleShowHorizontalLines: true,
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true,
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                    offsetGridLines: false,
+                },
 
-		//Boolean - Whether to show vertical lines (except Y axis)
-		scaleShowVerticalLines: true,
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                },
+            }],
+            yAxes: [{
+                scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                display: true,
+                position: "left",
+                id: "y-axis-1",
 
-		//Boolean - Whether the line is curved between points
-		bezierCurve : true,
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true, // draw ticks extending towards the label
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                },
 
-		//Number - Tension of the bezier curve between points
-		bezierCurveTension : 0.4,
+                // scale numbers
+                beginAtZero: false,
+                override: null,
 
-		//Boolean - Whether to show a dot for each point
-		pointDot : true,
-
-		//Number - Radius of each point dot in pixels
-		pointDotRadius : 4,
-
-		//Number - Pixel width of point dot stroke
-		pointDotStrokeWidth : 1,
-
-		//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
-		pointHitDetectionRadius : 20,
-
-		//Boolean - Whether to show a stroke for datasets
-		datasetStroke : true,
-
-		//Number - Pixel width of dataset stroke
-		datasetStrokeWidth : 2,
-
-		//Boolean - Whether to fill the dataset with a colour
-		datasetFill : true,
-
-		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
-
-	};
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                }
+            }],
+        },
+    };
 
 
-	Chart.Type.extend({
-		name: "Line",
-		defaults : defaultConfig,
-		initialize:  function(data){
-			//Declare the extension of the default point, to cater for the options passed in to the constructor
-			this.PointClass = Chart.Point.extend({
-				strokeWidth : this.options.pointDotStrokeWidth,
-				radius : this.options.pointDotRadius,
-				display: this.options.pointDot,
-				hitDetectionRadius : this.options.pointHitDetectionRadius,
-				ctx : this.chart.ctx,
-				inRange : function(mouseX){
-					return (Math.pow(mouseX-this.x, 2) < Math.pow(this.radius + this.hitDetectionRadius,2));
-				}
-			});
+    Chart.Type.extend({
+        name: "Line",
+        defaults: defaultConfig,
+        initialize: function() {
 
-			this.datasets = [];
+            var _this = this;
 
-			//Set up tooltip events on the chart
-			if (this.options.showTooltips){
-				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
-					var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
-					this.eachPoints(function(point){
-						point.restore(['fillColor', 'strokeColor']);
-					});
-					helpers.each(activePoints, function(activePoint){
-						activePoint.fillColor = activePoint.highlightFill;
-						activePoint.strokeColor = activePoint.highlightStroke;
-					});
-					this.showTooltip(activePoints);
-				});
-			}
+            // Events
+            helpers.bindEvents(this, this.options.events, this.events);
 
-			//Iterate through each of the datasets, and build this into a property of the chart
-			helpers.each(data.datasets,function(dataset){
+            // Create a new line and its points for each dataset and piece of data
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 
-				var datasetObject = {
-					label : dataset.label || null,
-					fillColor : dataset.fillColor,
-					strokeColor : dataset.strokeColor,
-					pointColor : dataset.pointColor,
-					pointStrokeColor : dataset.pointStrokeColor,
-					points : []
-				};
+                dataset.metaDataset = new Chart.Line({
+                    _chart: this.chart,
+                    _datasetIndex: datasetIndex,
+                    _points: dataset.metaData,
+                });
 
-				this.datasets.push(datasetObject);
+                dataset.metaData = [];
+
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Point({
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                        _chart: this.chart,
+                        _model: {
+                            x: 0, //xScale.getPixelForValue(null, index, true),
+                            y: 0, //this.chartArea.bottom,
+                        },
+                    }));
+
+                }, this);
+
+                // The line chart onlty supports a single x axis because the x axis is always a dataset axis
+                dataset.xAxisID = this.options.scales.xAxes[0].id;
+
+                if (!dataset.yAxisID) {
+                    dataset.yAxisID = this.options.scales.yAxes[0].id;
+                }
+
+            }, this);
+
+            // Build and fit the scale. Needs to happen after the axis IDs have been set
+            this.buildScale();
+
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
+
+            // Need to fit scales before we reset elements. 
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // Reset so that we animation from the baseline
+            this.resetElements();
+
+            // Update that shiz
+            this.update();
+        },
+        nextPoint: function(collection, index) {
+            return collection[index + 1] || collection[index];
+        },
+        previousPoint: function(collection, index) {
+            return collection[index - 1] || collection[index];
+        },
+        resetElements: function() {
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                var yScalePoint;
+
+                if (yScale.min < 0 && yScale.max <0) {
+                    // all less than 0. use the top
+                    yScalePoint = yScale.getPixelForValue(yScale.max);
+                } else if (yScale.min > 0 && yScale.max > 0) {
+                    yScalePoint = yScale.getPixelForValue(yScale.min);
+                } else {
+                    yScalePoint = yScale.getPixelForValue(0);
+                }
+
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.getPixelForValue(null, index, true), // value not used in dataset scale, but we want a consistent API between scales
+                        y: yScalePoint,
+
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: typeof this.data.datasets[datasetIndex].data[index] != 'number',
+
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
+
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
+
+                point._model.controlPointPreviousX = controlPoints.previous.x;
+                point._model.controlPointNextX = controlPoints.next.x;
+
+                // Prevent the bezier going outside of the bounds of the graph
+
+                // Cap puter bezier handles to the upper/lower scale bounds
+                if (controlPoints.next.y > this.chartArea.bottom) {
+                    point._model.controlPointNextY = this.chartArea.bottom;
+                } else if (controlPoints.next.y < this.chartArea.top) {
+                    point._model.controlPointNextY = this.chartArea.top;
+                } else {
+                    point._model.controlPointNextY = controlPoints.next.y;
+                }
+
+                // Cap inner bezier handles to the upper/lower scale bounds
+                if (controlPoints.previous.y > this.chartArea.bottom) {
+                    point._model.controlPointPreviousY = this.chartArea.bottom;
+                } else if (controlPoints.previous.y < this.chartArea.top) {
+                    point._model.controlPointPreviousY = this.chartArea.top;
+                } else {
+                    point._model.controlPointPreviousY = controlPoints.previous.y;
+                }
+
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
+        },
+        update: function() {
+
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // Update the lines
+            this.eachDataset(function(dataset, datasetIndex) {
+                var yScale = this.scales[dataset.yAxisID];
+
+                helpers.extend(dataset.metaDataset, {
+                    // Utility
+                    _scale: yScale,
+                    _datasetIndex: datasetIndex,
+                    // Data
+                    _children: dataset.metaData,
+                    // Model
+                    _model: {
+                        // Appearance
+                        tension: dataset.tension || this.options.elements.line.tension,
+                        backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
+                        borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
+                        borderColor: dataset.borderColor || this.options.elements.line.borderColor,
+                        fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
+                        skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull,
+                        drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull,
+                        // Scale
+                        scaleTop: yScale.top,
+                        scaleBottom: yScale.bottom,
+                        scaleZero: yScale.getPixelForValue(0),
+                    },
+                });
+
+                dataset.metaDataset.pivot();
+            });
+
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.getPixelForValue(null, index, true), // value not used in dataset scale, but we want a consistent API between scales
+                        y: yScale.getPointPixelForValue(this.data.datasets[datasetIndex].data[index], index, datasetIndex),
+
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: typeof this.data.datasets[datasetIndex].data[index] != 'number',
+
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
 
 
-				helpers.each(dataset.data,function(dataPoint,index){
-					//Add a new point for each piece of data, passing any required data to draw.
-					datasetObject.points.push(new this.PointClass({
-						value : dataPoint,
-						label : data.labels[index],
-						datasetLabel: dataset.label,
-						strokeColor : dataset.pointStrokeColor,
-						fillColor : dataset.pointColor,
-						highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-						highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-					}));
-				},this);
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
 
-				this.buildScale(data.labels);
+                point._model.controlPointPreviousX = controlPoints.previous.x;
+                point._model.controlPointNextX = controlPoints.next.x;
+
+                // Prevent the bezier going outside of the bounds of the graph
+
+                // Cap puter bezier handles to the upper/lower scale bounds
+                if (controlPoints.next.y > this.chartArea.bottom) {
+                    point._model.controlPointNextY = this.chartArea.bottom;
+                } else if (controlPoints.next.y < this.chartArea.top) {
+                    point._model.controlPointNextY = this.chartArea.top;
+                } else {
+                    point._model.controlPointNextY = controlPoints.next.y;
+                }
+
+                // Cap inner bezier handles to the upper/lower scale bounds
+                if (controlPoints.previous.y > this.chartArea.bottom) {
+                    point._model.controlPointPreviousY = this.chartArea.bottom;
+                } else if (controlPoints.previous.y < this.chartArea.top) {
+                    point._model.controlPointPreviousY = this.chartArea.top;
+                } else {
+                    point._model.controlPointPreviousY = controlPoints.previous.y;
+                }
+
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
+
+            this.render();
+        },
+        buildScale: function() {
+            var self = this;
+
+            // Function to determine the range of all the 
+            var calculateYRange = function() {
+                this.min = null;
+                this.max = null;
+
+                var positiveValues = [];
+                var negativeValues = [];
+
+                if (self.options.stacked) {
+                    helpers.each(self.data.datasets, function(dataset) {
+                        if (dataset.yAxisID === this.id) {
+                            helpers.each(dataset.data, function(value, index) {
+                                positiveValues[index] = positiveValues[index] || 0;
+                                negativeValues[index] = negativeValues[index] || 0;
+
+                                if (self.options.relativePoints) {
+                                    positiveValues[index] = 100;
+                                } else {
+                                    if (value < 0) {
+                                        negativeValues[index] += value;
+                                    } else {
+                                        positiveValues[index] += value;
+                                    }
+                                }
+                            }, this);
+                        }
+                    }, this);
+
+                    var values = positiveValues.concat(negativeValues);
+                    this.min = helpers.min(values);
+                    this.max = helpers.max(values);
+                } else {
+                    helpers.each(self.data.datasets, function(dataset) {
+                        if (dataset.yAxisID === this.id) {
+                            helpers.each(dataset.data, function(value, index) {
+                                if (this.min === null) {
+                                    this.min = value;
+                                } else if (value < this.min) {
+                                    this.min = value;
+                                }
+
+                                if (this.max === null) {
+                                    this.max = value;
+                                } else if (value > this.max) {
+                                    this.max = value;
+                                }
+                            }, this);
+                        }
+                    }, this);
+                }
+            };
+
+            // Map of scale ID to scale object so we can lookup later 
+            this.scales = {};
+
+            // Build the x axis. The line chart only supports a single x axis
+            var ScaleClass = Chart.scales.getScaleConstructor(this.options.scales.xAxes[0].scaleType);
+            var xScale = new ScaleClass({
+                ctx: this.chart.ctx,
+                options: this.options.scales.xAxes[0],
+                calculateRange: function() {
+                    this.labels = self.data.labels;
+                    this.min = 0;
+                    this.max = this.labels.length;
+                },
+                id: this.options.scales.xAxes[0].id,
+            });
+            this.scales[xScale.id] = xScale;
+
+            // Build up all the y scales
+            helpers.each(this.options.scales.yAxes, function(yAxisOptions) {
+                var ScaleClass = Chart.scales.getScaleConstructor(yAxisOptions.scaleType);
+                var scale = new ScaleClass({
+                    ctx: this.chart.ctx,
+                    options: yAxisOptions,
+                    calculateRange: calculateYRange,
+                    getPointPixelForValue: function(value, index, datasetIndex) {
+                        if (self.options.stacked) {
+                            var offsetPos = 0;
+                            var offsetNeg = 0;
+
+                            for (var i = 0; i < datasetIndex; ++i) {
+                                if (self.data.datasets[i].data[index] < 0) {
+                                    offsetNeg += self.data.datasets[i].data[index];
+                                } else {
+                                    offsetPos += self.data.datasets[i].data[index];
+                                }
+                            }
+
+                            if (value < 0) {
+                                return this.getPixelForValue(offsetNeg + value);
+                            } else {
+                                return this.getPixelForValue(offsetPos + value);
+                            }
+                        } else {
+                            return this.getPixelForValue(value);
+                        }
+                    },
+                    id: yAxisOptions.id,
+                });
+
+                this.scales[scale.id] = scale;
+            }, this);
+        },
+        draw: function(ease) {
+
+            var easingDecimal = ease || 1;
+            this.clear();
+
+            // Draw all the scales
+            helpers.each(this.scales, function(scale) {
+                scale.draw(this.chartArea);
+            }, this);
+
+            // reverse for-loop for proper stacking
+            for (var i = this.data.datasets.length - 1; i >= 0; i--) {
+
+                var dataset = this.data.datasets[i];
+
+                // Transition Point Locations
+                helpers.each(dataset.metaData, function(point, index) {
+                    point.transition(easingDecimal);
+                }, this);
+
+                // Transition and Draw the line
+                dataset.metaDataset.transition(easingDecimal).draw();
+
+                // Draw the points
+                helpers.each(dataset.metaData, function(point) {
+                    point.draw();
+                });
+            }
+
+            // Finally draw the tooltip
+            this.tooltip.transition(easingDecimal).draw();
+        },
+        events: function(e) {
+
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
+
+            this.lastActive = this.lastActive || [];
+
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getElementAtEvent(e);
+                    case 'label':
+                        return this.getElementsAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+            if (e.type == 'mouseup' || e.type == 'click') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.radius = this.lastActive[0].custom && this.lastActive[0].custom.radius ? this.lastActive[0].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.radius = this.lastActive[i].custom && this.lastActive[i].custom.radius ? this.lastActive[i].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
 
 
-				this.eachPoints(function(point, index){
-					helpers.extend(point, {
-						x: this.scale.calculateX(index),
-						y: this.scale.endPoint
-					});
-					point.save();
-				}, this);
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
 
-			},this);
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
 
 
-			this.render();
-		},
-		update : function(){
-			this.scale.update();
-			// Reset any highlight colours before updating.
-			helpers.each(this.activeElements, function(activeElement){
-				activeElement.restore(['fillColor', 'strokeColor']);
-			});
-			this.eachPoints(function(point){
-				point.save();
-			});
-			this.render();
-		},
-		eachPoints : function(callback){
-			helpers.each(this.datasets,function(dataset){
-				helpers.each(dataset.points,callback,this);
-			},this);
-		},
-		getPointsAtEvent : function(e){
-			var pointsArray = [],
-				eventPosition = helpers.getRelativePosition(e);
-			helpers.each(this.datasets,function(dataset){
-				helpers.each(dataset.points,function(point){
-					if (point.inRange(eventPosition.x,eventPosition.y)) pointsArray.push(point);
-				});
-			},this);
-			return pointsArray;
-		},
-		buildScale : function(labels){
-			var self = this;
+            // Hover animations
+            this.tooltip.pivot();
 
-			var dataTotal = function(){
-				var values = [];
-				self.eachPoints(function(point){
-					values.push(point.value);
-				});
+            if (!this.animating) {
+                var changed;
 
-				return values;
-			};
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
 
-			var scaleOptions = {
-				templateString : this.options.scaleLabel,
-				height : this.chart.height,
-				width : this.chart.width,
-				ctx : this.chart.ctx,
-				textColor : this.options.scaleFontColor,
-				fontSize : this.options.scaleFontSize,
-				fontStyle : this.options.scaleFontStyle,
-				fontFamily : this.options.scaleFontFamily,
-				valuesCount : labels.length,
-				beginAtZero : this.options.scaleBeginAtZero,
-				integersOnly : this.options.scaleIntegersOnly,
-				calculateYRange : function(currentHeight){
-					var updatedRanges = helpers.calculateScaleRange(
-						dataTotal(),
-						currentHeight,
-						this.fontSize,
-						this.beginAtZero,
-						this.integersOnly
-					);
-					helpers.extend(this, updatedRanges);
-				},
-				xLabels : labels,
-				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
-				lineWidth : this.options.scaleLineWidth,
-				lineColor : this.options.scaleLineColor,
-				showHorizontalLines : this.options.scaleShowHorizontalLines,
-				showVerticalLines : this.options.scaleShowVerticalLines,
-				gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
-				gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
-				padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
-				showLabels : this.options.scaleShowLabels,
-				display : this.options.showScale
-			};
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
 
-			if (this.options.scaleOverride){
-				helpers.extend(scaleOptions, {
-					calculateYRange: helpers.noop,
-					steps: this.options.scaleSteps,
-					stepValue: this.options.scaleStepWidth,
-					min: this.options.scaleStartValue,
-					max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
-				});
-			}
+                    this.stop();
+                    this.render(this.options.hover.animationDuration);
+                }
+            }
 
-
-			this.scale = new Chart.Scale(scaleOptions);
-		},
-		addData : function(valuesArray,label){
-			//Map the values array for each of the datasets
-
-			helpers.each(valuesArray,function(value,datasetIndex){
-				//Add a new point for each piece of data, passing any required data to draw.
-				this.datasets[datasetIndex].points.push(new this.PointClass({
-					value : value,
-					label : label,
-					x: this.scale.calculateX(this.scale.valuesCount+1),
-					y: this.scale.endPoint,
-					strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-					fillColor : this.datasets[datasetIndex].pointColor
-				}));
-			},this);
-
-			this.scale.addXLabel(label);
-			//Then re-render the chart.
-			this.update();
-		},
-		removeData : function(){
-			this.scale.removeXLabel();
-			//Then re-render the chart.
-			helpers.each(this.datasets,function(dataset){
-				dataset.points.shift();
-			},this);
-			this.update();
-		},
-		reflow : function(){
-			var newScaleProps = helpers.extend({
-				height : this.chart.height,
-				width : this.chart.width
-			});
-			this.scale.update(newScaleProps);
-		},
-		draw : function(ease){
-			var easingDecimal = ease || 1;
-			this.clear();
-
-			var ctx = this.chart.ctx;
-
-			// Some helper methods for getting the next/prev points
-			var hasValue = function(item){
-				return item.value !== null;
-			},
-			nextPoint = function(point, collection, index){
-				return helpers.findNextWhere(collection, hasValue, index) || point;
-			},
-			previousPoint = function(point, collection, index){
-				return helpers.findPreviousWhere(collection, hasValue, index) || point;
-			};
-
-			this.scale.draw(easingDecimal);
-
-
-			helpers.each(this.datasets,function(dataset){
-				var pointsWithValues = helpers.where(dataset.points, hasValue);
-
-				//Transition each point first so that the line and point drawing isn't out of sync
-				//We can use this extra loop to calculate the control points of this dataset also in this loop
-
-				helpers.each(dataset.points, function(point, index){
-					if (point.hasValue()){
-						point.transition({
-							y : this.scale.calculateY(point.value),
-							x : this.scale.calculateX(index)
-						}, easingDecimal);
-					}
-				},this);
-
-
-				// Control points need to be calculated in a seperate loop, because we need to know the current x/y of the point
-				// This would cause issues when there is no animation, because the y of the next point would be 0, so beziers would be skewed
-				if (this.options.bezierCurve){
-					helpers.each(pointsWithValues, function(point, index){
-						var tension = (index > 0 && index < pointsWithValues.length - 1) ? this.options.bezierCurveTension : 0;
-						point.controlPoints = helpers.splineCurve(
-							previousPoint(point, pointsWithValues, index),
-							point,
-							nextPoint(point, pointsWithValues, index),
-							tension
-						);
-
-						// Prevent the bezier going outside of the bounds of the graph
-
-						// Cap puter bezier handles to the upper/lower scale bounds
-						if (point.controlPoints.outer.y > this.scale.endPoint){
-							point.controlPoints.outer.y = this.scale.endPoint;
-						}
-						else if (point.controlPoints.outer.y < this.scale.startPoint){
-							point.controlPoints.outer.y = this.scale.startPoint;
-						}
-
-						// Cap inner bezier handles to the upper/lower scale bounds
-						if (point.controlPoints.inner.y > this.scale.endPoint){
-							point.controlPoints.inner.y = this.scale.endPoint;
-						}
-						else if (point.controlPoints.inner.y < this.scale.startPoint){
-							point.controlPoints.inner.y = this.scale.startPoint;
-						}
-					},this);
-				}
-
-
-				//Draw the line between all the points
-				ctx.lineWidth = this.options.datasetStrokeWidth;
-				ctx.strokeStyle = dataset.strokeColor;
-				ctx.beginPath();
-
-				helpers.each(pointsWithValues, function(point, index){
-					if (index === 0){
-						ctx.moveTo(point.x, point.y);
-					}
-					else{
-						if(this.options.bezierCurve){
-							var previous = previousPoint(point, pointsWithValues, index);
-
-							ctx.bezierCurveTo(
-								previous.controlPoints.outer.x,
-								previous.controlPoints.outer.y,
-								point.controlPoints.inner.x,
-								point.controlPoints.inner.y,
-								point.x,
-								point.y
-							);
-						}
-						else{
-							ctx.lineTo(point.x,point.y);
-						}
-					}
-				}, this);
-
-				ctx.stroke();
-
-				if (this.options.datasetFill && pointsWithValues.length > 0){
-					//Round off the line by going to the base of the chart, back to the start, then fill.
-					ctx.lineTo(pointsWithValues[pointsWithValues.length - 1].x, this.scale.endPoint);
-					ctx.lineTo(pointsWithValues[0].x, this.scale.endPoint);
-					ctx.fillStyle = dataset.fillColor;
-					ctx.closePath();
-					ctx.fill();
-				}
-
-				//Now draw the points over the line
-				//A little inefficient double looping, but better than the line
-				//lagging behind the point positions
-				helpers.each(pointsWithValues,function(point){
-					point.draw();
-				});
-			},this);
-		}
-	});
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+        },
+    });
 
 
 }).call(this);

src/Chart.PolarArea.js

@@ -1,250 +1,403 @@
-(function(){
-	"use strict";
+(function() {
+    "use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		//Cache a local reference to Chart.helpers
-		helpers = Chart.helpers;
+    var root = this,
+        Chart = root.Chart,
+        //Cache a local reference to Chart.helpers
+        helpers = Chart.helpers;
 
-	var defaultConfig = {
-		//Boolean - Show a backdrop to the scale label
-		scaleShowLabelBackdrop : true,
+    var defaultConfig = {
 
-		//String - The colour of the label backdrop
-		scaleBackdropColor : "rgba(255,255,255,0.75)",
+        scale: {
+            scaleType: "radialLinear",
+            display: true,
 
-		// Boolean - Whether the scale should begin at zero
-		scaleBeginAtZero : true,
+            //Boolean - Whether to animate scaling the chart from the centre
+            animate: false,
 
-		//Number - The backdrop padding above & below the label in pixels
-		scaleBackdropPaddingY : 2,
+            lineArc: true,
 
-		//Number - The backdrop padding to the side of the label in pixels
-		scaleBackdropPaddingX : 2,
+            // grid line settings
+            gridLines: {
+                show: true,
+                color: "rgba(0, 0, 0, 0.05)",
+                lineWidth: 1,
+            },
 
-		//Boolean - Show line for each value in the scale
-		scaleShowLine : true,
+            // scale numbers
+            beginAtZero: true,
 
-		//Boolean - Stroke a line around each segment in the chart
-		segmentShowStroke : true,
+            // label settings
+            labels: {
+                show: true,
+                template: "<%=value%>",
+                fontSize: 12,
+                fontStyle: "normal",
+                fontColor: "#666",
+                fontFamily: "Helvetica Neue",
 
-		//String - The colour of the stroke on each segement.
-		segmentStrokeColor : "#fff",
+                //Boolean - Show a backdrop to the scale label
+                showLabelBackdrop: true,
 
-		//Number - The width of the stroke value in pixels
-		segmentStrokeWidth : 2,
+                //String - The colour of the label backdrop
+                backdropColor: "rgba(255,255,255,0.75)",
 
-		//Number - Amount of animation steps
-		animationSteps : 100,
+                //Number - The backdrop padding above & below the label in pixels
+                backdropPaddingY: 2,
 
-		//String - Animation easing effect.
-		animationEasing : "easeOutBounce",
+                //Number - The backdrop padding to the side of the label in pixels
+                backdropPaddingX: 2,
+            }
+        },
 
-		//Boolean - Whether to animate the rotation of the chart
-		animateRotate : true,
-
-		//Boolean - Whether to animate scaling the chart from the centre
-		animateScale : false,
-
-		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
-	};
+        //Boolean - Whether to animate the rotation of the chart
+        animateRotate: true,
+    };
 
 
-	Chart.Type.extend({
-		//Passing in a name registers this chart in the Chart namespace
-		name: "PolarArea",
-		//Providing a defaults will also register the deafults in the chart namespace
-		defaults : defaultConfig,
-		//Initialize is fired when the chart is initialized - Data is passed in as a parameter
-		//Config is automatically merged by the core of Chart.js, and is available at this.options
-		initialize:  function(data){
-			this.segments = [];
-			//Declare segment class as a chart instance specific class, so it can share props for this instance
-			this.SegmentArc = Chart.Arc.extend({
-				showStroke : this.options.segmentShowStroke,
-				strokeWidth : this.options.segmentStrokeWidth,
-				strokeColor : this.options.segmentStrokeColor,
-				ctx : this.chart.ctx,
-				innerRadius : 0,
-				x : this.chart.width/2,
-				y : this.chart.height/2
-			});
-			this.scale = new Chart.RadialScale({
-				display: this.options.showScale,
-				fontStyle: this.options.scaleFontStyle,
-				fontSize: this.options.scaleFontSize,
-				fontFamily: this.options.scaleFontFamily,
-				fontColor: this.options.scaleFontColor,
-				showLabels: this.options.scaleShowLabels,
-				showLabelBackdrop: this.options.scaleShowLabelBackdrop,
-				backdropColor: this.options.scaleBackdropColor,
-				backdropPaddingY : this.options.scaleBackdropPaddingY,
-				backdropPaddingX: this.options.scaleBackdropPaddingX,
-				lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,
-				lineColor: this.options.scaleLineColor,
-				lineArc: true,
-				width: this.chart.width,
-				height: this.chart.height,
-				xCenter: this.chart.width/2,
-				yCenter: this.chart.height/2,
-				ctx : this.chart.ctx,
-				templateString: this.options.scaleLabel,
-				valuesCount: data.length
-			});
+    Chart.Type.extend({
+        //Passing in a name registers this chart in the Chart namespace
+        name: "PolarArea",
+        //Providing a defaults will also register the deafults in the chart namespace
+        defaults: defaultConfig,
+        //Initialize is fired when the chart is initialized - Data is passed in as a parameter
+        //Config is automatically merged by the core of Chart.js, and is available at this.options
+        initialize: function() {
 
-			this.updateScaleRange(data);
+            // Scale setup
+            var self = this;
+            var ScaleClass = Chart.scales.getScaleConstructor(this.options.scale.scaleType);
+            this.scale = new ScaleClass({
+                options: this.options.scale,
+                lineArc: true,
+                width: this.chart.width,
+                height: this.chart.height,
+                xCenter: this.chart.width / 2,
+                yCenter: this.chart.height / 2,
+                ctx: this.chart.ctx,
+                valuesCount: this.data.length,
+                calculateRange: function() {
+                    this.min = null;
+                    this.max = null;
 
-			this.scale.update();
+                    helpers.each(self.data.datasets[0].data, function(value) {
+                        if (this.min === null) {
+                            this.min = value;
+                        } else if (value < this.min) {
+                            this.min = value;
+                        }
 
-			helpers.each(data,function(segment,index){
-				this.addData(segment,index,true);
-			},this);
+                        if (this.max === null) {
+                            this.max = value;
+                        } else if (value > this.max) {
+                            this.max = value;
+                        }
+                    }, this);
+                }
+            });
 
-			//Set up tooltip events on the chart
-			if (this.options.showTooltips){
-				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
-					var activeSegments = (evt.type !== 'mouseout') ? this.getSegmentsAtEvent(evt) : [];
-					helpers.each(this.segments,function(segment){
-						segment.restore(["fillColor"]);
-					});
-					helpers.each(activeSegments,function(activeSegment){
-						activeSegment.fillColor = activeSegment.highlightColor;
-					});
-					this.showTooltip(activeSegments);
-				});
-			}
+            helpers.bindEvents(this, this.options.events, this.events);
 
-			this.render();
-		},
-		getSegmentsAtEvent : function(e){
-			var segmentsArray = [];
+            //Set up tooltip events on the chart
+            helpers.bindEvents(this, this.options.events, this.events);
 
-			var location = helpers.getRelativePosition(e);
+            //Create a new bar for each piece of data
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                dataset.metaData = [];
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Arc({
+                        _chart: this.chart,
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                        _model: {}
+                    }));
+                }, this);
+            }, this);
 
-			helpers.each(this.segments,function(segment){
-				if (segment.inRange(location.x,location.y)) segmentsArray.push(segment);
-			},this);
-			return segmentsArray;
-		},
-		addData : function(segment, atIndex, silent){
-			var index = atIndex || this.segments.length;
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
 
-			this.segments.splice(index, 0, new this.SegmentArc({
-				fillColor: segment.color,
-				highlightColor: segment.highlight || segment.color,
-				label: segment.label,
-				value: segment.value,
-				outerRadius: (this.options.animateScale) ? 0 : this.scale.calculateCenterOffset(segment.value),
-				circumference: (this.options.animateRotate) ? 0 : this.scale.getCircumference(),
-				startAngle: Math.PI * 1.5
-			}));
-			if (!silent){
-				this.reflow();
-				this.update();
-			}
-		},
-		removeData: function(atIndex){
-			var indexToDelete = (helpers.isNumber(atIndex)) ? atIndex : this.segments.length-1;
-			this.segments.splice(indexToDelete, 1);
-			this.reflow();
-			this.update();
-		},
-		calculateTotal: function(data){
-			this.total = 0;
-			helpers.each(data,function(segment){
-				this.total += segment.value;
-			},this);
-			this.scale.valuesCount = this.segments.length;
-		},
-		updateScaleRange: function(datapoints){
-			var valuesArray = [];
-			helpers.each(datapoints,function(segment){
-				valuesArray.push(segment.value);
-			});
+            // Fit the scale before we animate
+            this.updateScaleRange();
+            this.scale.calculateRange();
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
 
-			var scaleSizes = (this.options.scaleOverride) ?
-				{
-					steps: this.options.scaleSteps,
-					stepValue: this.options.scaleStepWidth,
-					min: this.options.scaleStartValue,
-					max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
-				} :
-				helpers.calculateScaleRange(
-					valuesArray,
-					helpers.min([this.chart.width, this.chart.height])/2,
-					this.options.scaleFontSize,
-					this.options.scaleBeginAtZero,
-					this.options.scaleIntegersOnly
-				);
+            // so that we animate nicely
+            this.resetElements();
 
-			helpers.extend(
-				this.scale,
-				scaleSizes,
-				{
-					size: helpers.min([this.chart.width, this.chart.height]),
-					xCenter: this.chart.width/2,
-					yCenter: this.chart.height/2
-				}
-			);
+            // Update the chart with the latest data.
+            this.update();
 
-		},
-		update : function(){
-			this.calculateTotal(this.segments);
+        },
+        updateScaleRange: function() {
+            helpers.extend(this.scale, {
+                size: helpers.min([this.chart.width, this.chart.height]),
+                xCenter: this.chart.width / 2,
+                yCenter: this.chart.height / 2
+            });
+        },
+        resetElements: function() {
+            var circumference = 1 / this.data.datasets[0].data.length * 2;
 
-			helpers.each(this.segments,function(segment){
-				segment.save();
-			});
-			
-			this.reflow();
-			this.render();
-		},
-		reflow : function(){
-			helpers.extend(this.SegmentArc.prototype,{
-				x : this.chart.width/2,
-				y : this.chart.height/2
-			});
-			this.updateScaleRange(this.segments);
-			this.scale.update();
+            // Map new data to data points
+            helpers.each(this.data.datasets[0].metaData, function(slice, index) {
 
-			helpers.extend(this.scale,{
-				xCenter: this.chart.width/2,
-				yCenter: this.chart.height/2
-			});
+                var value = this.data.datasets[0].data[index];
 
-			helpers.each(this.segments, function(segment){
-				segment.update({
-					outerRadius : this.scale.calculateCenterOffset(segment.value)
-				});
-			}, this);
+                var startAngle = Math.PI * 1.5 + (Math.PI * circumference) * index;
+                var endAngle = startAngle + (circumference * Math.PI);
 
-		},
-		draw : function(ease){
-			var easingDecimal = ease || 1;
-			//Clear & draw the canvas
-			this.clear();
-			helpers.each(this.segments,function(segment, index){
-				segment.transition({
-					circumference : this.scale.getCircumference(),
-					outerRadius : this.scale.calculateCenterOffset(segment.value)
-				},easingDecimal);
+                helpers.extend(slice, {
+                    _index: index,
+                    _model: {
+                        x: this.chart.width / 2,
+                        y: this.chart.height / 2,
+                        innerRadius: 0,
+                        outerRadius: 0,
+                        startAngle: Math.PI * 1.5,
+                        endAngle: Math.PI * 1.5,
 
-				segment.endAngle = segment.startAngle + segment.circumference;
+                        backgroundColor: slice.custom && slice.custom.backgroundColor ? slice.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].backgroundColor, index, this.options.elements.slice.backgroundColor),
+                        hoverBackgroundColor: slice.custom && slice.custom.hoverBackgroundColor ? slice.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].hoverBackgroundColor, index, this.options.elements.slice.hoverBackgroundColor),
+                        borderWidth: slice.custom && slice.custom.borderWidth ? slice.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderWidth, index, this.options.elements.slice.borderWidth),
+                        borderColor: slice.custom && slice.custom.borderColor ? slice.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderColor, index, this.options.elements.slice.borderColor),
 
-				// If we've removed the first segment we need to set the first one to
-				// start at the top.
-				if (index === 0){
-					segment.startAngle = Math.PI * 1.5;
-				}
+                        label: helpers.getValueAtIndexOrDefault(this.data.datasets[0].labels, index, this.data.datasets[0].labels[index])
+                    },
+                });
 
-				//Check to see if it's the last segment, if not get the next and update the start angle
-				if (index < this.segments.length - 1){
-					this.segments[index+1].startAngle = segment.endAngle;
-				}
-				segment.draw();
-			}, this);
-			this.scale.draw();
-		}
-	});
+                slice.pivot();
+            }, this);
+        },
+        update: function() {
 
-}).call(this);
+            this.updateScaleRange();
+            this.scale.calculateRange();
+            this.scale.generateTicks();
+            this.scale.buildYLabels();
+
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            var circumference = 1 / this.data.datasets[0].data.length * 2;
+
+            // Map new data to data points
+            helpers.each(this.data.datasets[0].metaData, function(slice, index) {
+
+                var value = this.data.datasets[0].data[index];
+
+                var startAngle = Math.PI * 1.5 + (Math.PI * circumference) * index;
+                var endAngle = startAngle + (circumference * Math.PI);
+
+                helpers.extend(slice, {
+                    _index: index,
+                    _model: {
+                        x: this.chart.width / 2,
+                        y: this.chart.height / 2,
+                        innerRadius: 0,
+                        outerRadius: this.scale.calculateCenterOffset(value),
+                        startAngle: startAngle,
+                        endAngle: endAngle,
+
+                        backgroundColor: slice.custom && slice.custom.backgroundColor ? slice.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].backgroundColor, index, this.options.elements.slice.backgroundColor),
+                        hoverBackgroundColor: slice.custom && slice.custom.hoverBackgroundColor ? slice.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].hoverBackgroundColor, index, this.options.elements.slice.hoverBackgroundColor),
+                        borderWidth: slice.custom && slice.custom.borderWidth ? slice.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderWidth, index, this.options.elements.slice.borderWidth),
+                        borderColor: slice.custom && slice.custom.borderColor ? slice.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[0].borderColor, index, this.options.elements.slice.borderColor),
+
+                        label: helpers.getValueAtIndexOrDefault(this.data.datasets[0].labels, index, this.data.datasets[0].labels[index])
+                    },
+                });
+                slice.pivot();
+
+                console.log(slice);
+
+            }, this);
+
+            this.render();
+        },
+        draw: function(ease) {
+            var easingDecimal = ease || 1;
+
+            this.clear();
+
+            helpers.each(this.data.datasets[0].metaData, function(slice, index) {
+                slice.transition(easingDecimal).draw();
+            }, this);
+
+            this.scale.draw();
+
+            this.tooltip.transition(easingDecimal).draw();
+        },
+        events: function(e) {
+
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
+
+            this.lastActive = this.lastActive || [];
+
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getSliceAtEvent(e);
+                    case 'label':
+                        return this.getSlicesAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+            if (e.type == 'mouseup' || e.type == 'click') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.backgroundColor, index, this.options.elements.slice.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.borderColor, index, this.options.elements.slice.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, this.options.elements.slice.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
+
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
+
+
+            // Hover animations
+            this.tooltip.pivot();
+
+            if (!this.animating) {
+                var changed;
+
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
+
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
+
+                    this.stop();
+                    this.render(this.options.hover.animationDuration);
+                }
+            }
+
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+        },
+        getSliceAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },
+        /*getSlicesAtEvent: function(e) {
+            var elements = [];
+
+            var location = helpers.getRelativePosition(e);
+
+            this.eachElement(function(slice, index) {
+                if (slice.inGroupRange(location.x, location.y)) {
+                    elements.push(slice);
+                }
+            }, this);
+            return elements;
+        },*/
+    });
+
+}).call(this);

src/Chart.Radar.js

@@ -1,343 +1,506 @@
-(function(){
-	"use strict";
+(function() {
+    "use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+    var root = this,
+        Chart = root.Chart,
+        helpers = Chart.helpers;
 
 
 
-	Chart.Type.extend({
-		name: "Radar",
-		defaults:{
-			//Boolean - Whether to show lines for each scale point
-			scaleShowLine : true,
+    Chart.Type.extend({
+        name: "Radar",
+        defaults: {
 
-			//Boolean - Whether we show the angle lines out of the radar
-			angleShowLineOut : true,
+            scale: {
+                scaleType: "radialLinear",
+                display: true,
 
-			//Boolean - Whether to show labels on the scale
-			scaleShowLabels : false,
+                //Boolean - Whether to animate scaling the chart from the centre
+                animate: false,
 
-			// Boolean - Whether the scale should begin at zero
-			scaleBeginAtZero : true,
+                lineArc: false,
 
-			//String - Colour of the angle line
-			angleLineColor : "rgba(0,0,0,.1)",
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                },
 
-			//Number - Pixel width of the angle line
-			angleLineWidth : 1,
+                angleLines: {
+                    show: true,
+                    color: "rgba(0,0,0,.1)",
+                    lineWidth: 1
+                },
 
-			//String - Point label font declaration
-			pointLabelFontFamily : "'Arial'",
+                // scale numbers
+                beginAtZero: true,
 
-			//String - Point label font weight
-			pointLabelFontStyle : "normal",
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
 
-			//Number - Point label font size in pixels
-			pointLabelFontSize : 10,
+                    //Boolean - Show a backdrop to the scale label
+                    showLabelBackdrop: true,
 
-			//String - Point label font colour
-			pointLabelFontColor : "#666",
+                    //String - The colour of the label backdrop
+                    backdropColor: "rgba(255,255,255,0.75)",
 
-			//Boolean - Whether to show a dot for each point
-			pointDot : true,
+                    //Number - The backdrop padding above & below the label in pixels
+                    backdropPaddingY: 2,
 
-			//Number - Radius of each point dot in pixels
-			pointDotRadius : 3,
+                    //Number - The backdrop padding to the side of the label in pixels
+                    backdropPaddingX: 2,
+                },
 
-			//Number - Pixel width of point dot stroke
-			pointDotStrokeWidth : 1,
+                pointLabels: {
+                    //String - Point label font declaration
+                    fontFamily: "'Arial'",
 
-			//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
-			pointHitDetectionRadius : 20,
+                    //String - Point label font weight
+                    fontStyle: "normal",
 
-			//Boolean - Whether to show a stroke for datasets
-			datasetStroke : true,
+                    //Number - Point label font size in pixels
+                    fontSize: 10,
 
-			//Number - Pixel width of dataset stroke
-			datasetStrokeWidth : 2,
+                    //String - Point label font colour
+                    fontColor: "#666",
+                },
+            },
 
-			//Boolean - Whether to fill the dataset with a colour
-			datasetFill : true,
+            elements: {
+                line: {
+                    tension: 0, // no bezier in radar
+                }
+            },
 
-			//String - A legend template
-			legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+            //String - A legend template
+            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
 
-		},
+        },
 
-		initialize: function(data){
-			this.PointClass = Chart.Point.extend({
-				strokeWidth : this.options.pointDotStrokeWidth,
-				radius : this.options.pointDotRadius,
-				display: this.options.pointDot,
-				hitDetectionRadius : this.options.pointHitDetectionRadius,
-				ctx : this.chart.ctx
-			});
+        initialize: function() {
+            // Events
+            helpers.bindEvents(this, this.options.events, this.events);
 
-			this.datasets = [];
+            // Create a new line and its points for each dataset and piece of data
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 
-			this.buildScale(data);
+                dataset.metaDataset = new Chart.Line({
+                    _chart: this.chart,
+                    _datasetIndex: datasetIndex,
+                    _points: dataset.metaData,
+                    _loop: true
+                });
 
-			//Set up tooltip events on the chart
-			if (this.options.showTooltips){
-				helpers.bindEvents(this, this.options.tooltipEvents, function(evt){
-					var activePointsCollection = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
+                dataset.metaData = [];
 
-					this.eachPoints(function(point){
-						point.restore(['fillColor', 'strokeColor']);
-					});
-					helpers.each(activePointsCollection, function(activePoint){
-						activePoint.fillColor = activePoint.highlightFill;
-						activePoint.strokeColor = activePoint.highlightStroke;
-					});
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Point({
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                        _chart: this.chart,
+                        _model: {
+                            x: 0, //xScale.getPixelForValue(null, index, true),
+                            y: 0, //this.chartArea.bottom,
+                        },
+                    }));
 
-					this.showTooltip(activePointsCollection);
-				});
-			}
+                }, this);
+            }, this);
 
-			//Iterate through each of the datasets, and build this into a property of the chart
-			helpers.each(data.datasets,function(dataset){
+            // Build the scale.
+            this.buildScale();
 
-				var datasetObject = {
-					label: dataset.label || null,
-					fillColor : dataset.fillColor,
-					strokeColor : dataset.strokeColor,
-					pointColor : dataset.pointColor,
-					pointStrokeColor : dataset.pointStrokeColor,
-					points : []
-				};
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
 
-				this.datasets.push(datasetObject);
+            // Need to fit scales before we reset elements. 
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
 
-				helpers.each(dataset.data,function(dataPoint,index){
-					//Add a new point for each piece of data, passing any required data to draw.
-					var pointPosition;
-					if (!this.scale.animation){
-						pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
-					}
-					datasetObject.points.push(new this.PointClass({
-						value : dataPoint,
-						label : data.labels[index],
-						datasetLabel: dataset.label,
-						x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
-						y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
-						strokeColor : dataset.pointStrokeColor,
-						fillColor : dataset.pointColor,
-						highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-						highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-					}));
-				},this);
+            // Reset so that we animation from the baseline
+            this.resetElements();
 
-			},this);
+            // Update that shiz
+            this.update();
+        },
+        nextPoint: function(collection, index) {
+            return collection[index + 1] || collection[0];
+        },
+        previousPoint: function(collection, index) {
+            return collection[index - 1] || collection[collection.length - 1];
+        },
+        resetElements: function() {
 
-			this.render();
-		},
-		eachPoints : function(callback){
-			helpers.each(this.datasets,function(dataset){
-				helpers.each(dataset.points,callback,this);
-			},this);
-		},
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+                    _scale: this.scale,
 
-		getPointsAtEvent : function(evt){
-			var mousePosition = helpers.getRelativePosition(evt),
-				fromCenter = helpers.getAngleFromPoint({
-					x: this.scale.xCenter,
-					y: this.scale.yCenter
-				}, mousePosition);
+                    // Desired view properties
+                    _model: {
+                        x: this.scale.xCenter,
+                        y: this.scale.yCenter,
 
-			var anglePerIndex = (Math.PI * 2) /this.scale.valuesCount,
-				pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex),
-				activePointsCollection = [];
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: typeof this.data.datasets[datasetIndex].data[index] != 'number',
 
-			// If we're at the top, make the pointIndex 0 to get the first of the array.
-			if (pointIndex >= this.scale.valuesCount || pointIndex < 0){
-				pointIndex = 0;
-			}
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
 
-			if (fromCenter.distance <= this.scale.drawingArea){
-				helpers.each(this.datasets, function(dataset){
-					activePointsCollection.push(dataset.points[pointIndex]);
-				});
-			}
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
 
-			return activePointsCollection;
-		},
+                point._model.controlPointPreviousX = this.scale.xCenter;
+                point._model.controlPointPreviousY = this.scale.yCenter;
+                point._model.controlPointNextX = this.scale.xCenter;
+                point._model.controlPointNextY = this.scale.yCenter;
 
-		buildScale : function(data){
-			this.scale = new Chart.RadialScale({
-				display: this.options.showScale,
-				fontStyle: this.options.scaleFontStyle,
-				fontSize: this.options.scaleFontSize,
-				fontFamily: this.options.scaleFontFamily,
-				fontColor: this.options.scaleFontColor,
-				showLabels: this.options.scaleShowLabels,
-				showLabelBackdrop: this.options.scaleShowLabelBackdrop,
-				backdropColor: this.options.scaleBackdropColor,
-				backdropPaddingY : this.options.scaleBackdropPaddingY,
-				backdropPaddingX: this.options.scaleBackdropPaddingX,
-				lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,
-				lineColor: this.options.scaleLineColor,
-				angleLineColor : this.options.angleLineColor,
-				angleLineWidth : (this.options.angleShowLineOut) ? this.options.angleLineWidth : 0,
-				// Point labels at the edge of each line
-				pointLabelFontColor : this.options.pointLabelFontColor,
-				pointLabelFontSize : this.options.pointLabelFontSize,
-				pointLabelFontFamily : this.options.pointLabelFontFamily,
-				pointLabelFontStyle : this.options.pointLabelFontStyle,
-				height : this.chart.height,
-				width: this.chart.width,
-				xCenter: this.chart.width/2,
-				yCenter: this.chart.height/2,
-				ctx : this.chart.ctx,
-				templateString: this.options.scaleLabel,
-				labels: data.labels,
-				valuesCount: data.datasets[0].data.length
-			});
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
+        },
+        update: function() {
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
 
-			this.scale.setScaleSize();
-			this.updateScaleRange(data.datasets);
-			this.scale.buildYLabels();
-		},
-		updateScaleRange: function(datasets){
-			var valuesArray = (function(){
-				var totalDataArray = [];
-				helpers.each(datasets,function(dataset){
-					if (dataset.data){
-						totalDataArray = totalDataArray.concat(dataset.data);
-					}
-					else {
-						helpers.each(dataset.points, function(point){
-							totalDataArray.push(point.value);
-						});
-					}
-				});
-				return totalDataArray;
-			})();
+            // Update the lines
+            this.eachDataset(function(dataset, datasetIndex) {
+                helpers.extend(dataset.metaDataset, {
+                    // Utility
+                    _datasetIndex: datasetIndex,
+
+                    // Data
+                    _children: dataset.metaData,
+
+                    // Model
+                    _model: {
+                        // Appearance
+                        tension: dataset.tension || this.options.elements.line.tension,
+                        backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
+                        borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
+                        borderColor: dataset.borderColor || this.options.elements.line.borderColor,
+                        fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
+                        skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull,
+                        drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull,
+
+                        // Scale
+                        scaleTop: this.scale.top,
+                        scaleBottom: this.scale.bottom,
+                        scaleZero: this.scale.getPointPosition(0),
+                    },
+                });
+
+                dataset.metaDataset.pivot();
+            });
+
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index]));
+
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales
+                        y: pointPosition.y,
+
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: typeof this.data.datasets[datasetIndex].data[index] != 'number',
+
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
 
 
-			var scaleSizes = (this.options.scaleOverride) ?
-				{
-					steps: this.options.scaleSteps,
-					stepValue: this.options.scaleStepWidth,
-					min: this.options.scaleStartValue,
-					max: this.options.scaleStartValue + (this.options.scaleSteps * this.options.scaleStepWidth)
-				} :
-				helpers.calculateScaleRange(
-					valuesArray,
-					helpers.min([this.chart.width, this.chart.height])/2,
-					this.options.scaleFontSize,
-					this.options.scaleBeginAtZero,
-					this.options.scaleIntegersOnly
-				);
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
 
-			helpers.extend(
-				this.scale,
-				scaleSizes
-			);
+                point._model.controlPointPreviousX = controlPoints.previous.x;
+                point._model.controlPointNextX = controlPoints.next.x;
 
-		},
-		addData : function(valuesArray,label){
-			//Map the values array for each of the datasets
-			this.scale.valuesCount++;
-			helpers.each(valuesArray,function(value,datasetIndex){
-				var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
-				this.datasets[datasetIndex].points.push(new this.PointClass({
-					value : value,
-					label : label,
-					x: pointPosition.x,
-					y: pointPosition.y,
-					strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-					fillColor : this.datasets[datasetIndex].pointColor
-				}));
-			},this);
+                // Prevent the bezier going outside of the bounds of the graph
 
-			this.scale.labels.push(label);
+                // Cap puter bezier handles to the upper/lower scale bounds
+                if (controlPoints.next.y > this.chartArea.bottom) {
+                    point._model.controlPointNextY = this.chartArea.bottom;
+                } else if (controlPoints.next.y < this.chartArea.top) {
+                    point._model.controlPointNextY = this.chartArea.top;
+                } else {
+                    point._model.controlPointNextY = controlPoints.next.y;
+                }
 
-			this.reflow();
+                // Cap inner bezier handles to the upper/lower scale bounds
+                if (controlPoints.previous.y > this.chartArea.bottom) {
+                    point._model.controlPointPreviousY = this.chartArea.bottom;
+                } else if (controlPoints.previous.y < this.chartArea.top) {
+                    point._model.controlPointPreviousY = this.chartArea.top;
+                } else {
+                    point._model.controlPointPreviousY = controlPoints.previous.y;
+                }
 
-			this.update();
-		},
-		removeData : function(){
-			this.scale.valuesCount--;
-			this.scale.labels.shift();
-			helpers.each(this.datasets,function(dataset){
-				dataset.points.shift();
-			},this);
-			this.reflow();
-			this.update();
-		},
-		update : function(){
-			this.eachPoints(function(point){
-				point.save();
-			});
-			this.reflow();
-			this.render();
-		},
-		reflow: function(){
-			helpers.extend(this.scale, {
-				width : this.chart.width,
-				height: this.chart.height,
-				size : helpers.min([this.chart.width, this.chart.height]),
-				xCenter: this.chart.width/2,
-				yCenter: this.chart.height/2
-			});
-			this.updateScaleRange(this.datasets);
-			this.scale.setScaleSize();
-			this.scale.buildYLabels();
-		},
-		draw : function(ease){
-			var easeDecimal = ease || 1,
-				ctx = this.chart.ctx;
-			this.clear();
-			this.scale.draw();
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
 
-			helpers.each(this.datasets,function(dataset){
+            this.render();
+        },
+        buildScale: function() {
+            var self = this;
 
-				//Transition each point first so that the line and point drawing isn't out of sync
-				helpers.each(dataset.points,function(point,index){
-					if (point.hasValue()){
-						point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
-					}
-				},this);
+            var ScaleConstructor = Chart.scales.getScaleConstructor(this.options.scale.scaleType);
+            this.scale = new ScaleConstructor({
+                options: this.options.scale,
+                height: this.chart.height,
+                width: this.chart.width,
+                xCenter: this.chart.width / 2,
+                yCenter: this.chart.height / 2,
+                ctx: this.chart.ctx,
+                labels: this.data.labels,
+                valuesCount: this.data.datasets[0].data.length,
+                calculateRange: function() {
+                    this.min = null;
+                    this.max = null;
 
+                    helpers.each(self.data.datasets, function(dataset) {
+                        if (dataset.yAxisID === this.id) {
+                            helpers.each(dataset.data, function(value, index) {
+                                if (this.min === null) {
+                                    this.min = value;
+                                } else if (value < this.min) {
+                                    this.min = value;
+                                }
 
+                                if (this.max === null) {
+                                    this.max = value;
+                                } else if (value > this.max) {
+                                    this.max = value;
+                                }
+                            }, this);
+                        }
+                    }, this);
+                }
+            });
 
-				//Draw the line between all the points
-				ctx.lineWidth = this.options.datasetStrokeWidth;
-				ctx.strokeStyle = dataset.strokeColor;
-				ctx.beginPath();
-				helpers.each(dataset.points,function(point,index){
-					if (index === 0){
-						ctx.moveTo(point.x,point.y);
-					}
-					else{
-						ctx.lineTo(point.x,point.y);
-					}
-				},this);
-				ctx.closePath();
-				ctx.stroke();
+            this.scale.setScaleSize();
+            this.scale.calculateRange();
+            this.scale.generateTicks();
+            this.scale.buildYLabels();
+        },
+        draw: function(ease) {
+            var easingDecimal = ease || 1;
+            this.clear();
 
-				ctx.fillStyle = dataset.fillColor;
-				ctx.fill();
+            // Draw all the scales
+            this.scale.draw(this.chartArea);
 
-				//Now draw the points over the line
-				//A little inefficient double looping, but better than the line
-				//lagging behind the point positions
-				helpers.each(dataset.points,function(point){
-					if (point.hasValue()){
-						point.draw();
-					}
-				});
+            // reverse for-loop for proper stacking
+            for (var i = this.data.datasets.length - 1; i >= 0; i--) {
 
-			},this);
+                var dataset = this.data.datasets[i];
 
-		}
+                // Transition Point Locations
+                helpers.each(dataset.metaData, function(point, index) {
+                    point.transition(easingDecimal);
+                }, this);
 
-	});
+                // Transition and Draw the line
+                dataset.metaDataset.transition(easingDecimal).draw();
 
+                // Draw the points
+                helpers.each(dataset.metaData, function(point) {
+                    point.draw();
+                });
+            }
 
+            // Finally draw the tooltip
+            this.tooltip.transition(easingDecimal).draw();
+        },
+        events: function(e) {
 
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
 
+            this.lastActive = this.lastActive || [];
 
-}).call(this);
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getElementAtEvent(e);
+                    case 'label':
+                        return this.getElementsAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+            if (e.type == 'mouseup' || e.type == 'click') {
+                if (this.options.onClick) {
+                    this.options.onClick.call(this, e, this.active);
+                }
+            }
+
+            var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.radius = this.lastActive[0].custom && this.lastActive[0].custom.radius ? this.lastActive[0].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.radius = this.lastActive[i].custom && this.lastActive[i].custom.radius ? this.lastActive[i].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
+
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
+
+            // Hover animations
+            this.tooltip.pivot();
+
+            if (!this.animating) {
+                var changed;
+
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
+
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
+
+                    this.stop();
+                    this.render(this.options.hover.animationDuration);
+                }
+            }
+
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+        },
+    });
+}).call(this);

src/Chart.Scatter.js

@@ -0,0 +1,593 @@
+(function() {
+    "use strict";
+
+    var root = this,
+        Chart = root.Chart,
+        helpers = Chart.helpers;
+
+    var defaultConfig = {
+        hover: {
+            mode: 'single',
+        },
+
+        scales: {
+            xAxes: [{
+                scaleType: "linear", // scatter should not use a dataset axis
+                display: true,
+                position: "bottom",
+                id: "x-axis-1", // need an ID so datasets can reference the scale
+                
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true,
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                },
+
+                // scale numbers
+                beginAtZero: false,
+                integersOnly: false,
+                override: null,
+
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                },
+            }],
+            yAxes: [{
+                scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+                display: true,
+                position: "left",
+                id: "y-axis-1",
+        
+                // grid line settings
+                gridLines: {
+                    show: true,
+                    color: "rgba(0, 0, 0, 0.05)",
+                    lineWidth: 1,
+                    drawOnChartArea: true,
+                    drawTicks: true, // draw ticks extending towards the label
+                    zeroLineWidth: 1,
+                    zeroLineColor: "rgba(0,0,0,0.25)",
+                },
+
+                // scale numbers
+                beginAtZero: false,
+                integersOnly: false,
+                override: null,
+
+                // label settings
+                labels: {
+                    show: true,
+                    template: "<%=value%>",
+                    fontSize: 12,
+                    fontStyle: "normal",
+                    fontColor: "#666",
+                    fontFamily: "Helvetica Neue",
+                }
+            }],
+        },
+
+        //String - A legend template
+        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
+
+        tooltips: {
+            template: "(<%= value.x %>, <%= value.y %>)",
+            multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= value.x %>, <%= value.y %>)",
+        },
+
+    };
+
+
+    Chart.Type.extend({
+        name: "Scatter",
+        defaults: defaultConfig,
+        initialize: function() {
+
+            // Events
+            helpers.bindEvents(this, this.options.events, this.events);
+
+            //Custom Point Defaults
+            helpers.each(this.data.datasets, function(dataset, datasetIndex) {
+                dataset.metaDataset = new Chart.Line({
+                    _chart: this.chart,
+                    _datasetIndex: datasetIndex,
+                    _points: dataset.metaData,
+                });
+
+                dataset.metaData = [];
+
+                helpers.each(dataset.data, function(dataPoint, index) {
+                    dataset.metaData.push(new Chart.Point({
+                        _datasetIndex: datasetIndex,
+                        _index: index,
+                        _chart: this.chart,
+                        _model: {
+                            x: 0, //xScale.getPixelForValue(null, index, true),
+                            y: 0, //this.chartArea.bottom,
+                        },
+                    }));
+
+                }, this);
+
+                // The line chart onlty supports a single x axis because the x axis is always a dataset axis
+                if (!dataset.xAxisID) {
+                    dataset.xAxisID = this.options.scales.xAxes[0].id;
+                }
+
+                if (!dataset.yAxisID) {
+                    dataset.yAxisID = this.options.scales.yAxes[0].id;
+                }
+
+            }, this);
+
+            // Build and fit the scale. Needs to happen after the axis IDs have been set
+            this.buildScale();
+
+            // Create tooltip instance exclusively for this chart with some defaults.
+            this.tooltip = new Chart.Tooltip({
+                _chart: this.chart,
+                _data: this.data,
+                _options: this.options,
+            }, this);
+
+            // Need to fit scales before we reset elements. 
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // Reset so that we animation from the baseline
+            this.resetElements();
+
+            // Update that shiz
+            this.update();
+        },
+        nextPoint: function(collection, index) {
+            return collection[index + 1] || collection[index];
+        },
+        previousPoint: function(collection, index) {
+            return collection[index - 1] || collection[index];
+        },
+        resetElements: function() {
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                var yScalePoint;
+
+                if (yScale.min < 0 && yScale.max < 0) {
+                    // all less than 0. use the top
+                    yScalePoint = yScale.getPixelForValue(yScale.max);
+                } else if (yScale.min > 0 && yScale.max > 0) {
+                    yScalePoint = yScale.getPixelForValue(yScale.min);
+                } else {
+                    yScalePoint = yScale.getPixelForValue(0);
+                }
+
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].x), // value not used in dataset scale, but we want a consistent API between scales
+                        y: yScalePoint,
+
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: (typeof this.data.datasets[datasetIndex].data[index].x != 'number') || (typeof this.data.datasets[datasetIndex].data[index].y != 'number'),
+
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
+
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
+
+                point._model.controlPointPreviousX = controlPoints.previous.x;
+                point._model.controlPointNextX = controlPoints.next.x;
+
+                // Prevent the bezier going outside of the bounds of the graph
+
+                // Cap puter bezier handles to the upper/lower scale bounds
+                if (controlPoints.next.y > this.chartArea.bottom) {
+                    point._model.controlPointNextY = this.chartArea.bottom;
+                } else if (controlPoints.next.y < this.chartArea.top) {
+                    point._model.controlPointNextY = this.chartArea.top;
+                } else {
+                    point._model.controlPointNextY = controlPoints.next.y;
+                }
+
+                // Cap inner bezier handles to the upper/lower scale bounds
+                if (controlPoints.previous.y > this.chartArea.bottom) {
+                    point._model.controlPointPreviousY = this.chartArea.bottom;
+                } else if (controlPoints.previous.y < this.chartArea.top) {
+                    point._model.controlPointPreviousY = this.chartArea.top;
+                } else {
+                    point._model.controlPointPreviousY = controlPoints.previous.y;
+                }
+
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
+        },
+        update: function() {
+            Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
+
+            // Update the lines
+            this.eachDataset(function(dataset, datasetIndex) {
+                var yScale = this.scales[dataset.yAxisID];
+
+                helpers.extend(dataset.metaDataset, {
+                    // Utility
+                    _scale: yScale,
+                    _datasetIndex: datasetIndex,
+                    // Data
+                    _children: dataset.metaData,
+                    // Model
+                    _model: {
+                        // Appearance
+                        tension: dataset.tension || this.options.elements.line.tension,
+                        backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor,
+                        borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth,
+                        borderColor: dataset.borderColor || this.options.elements.line.borderColor,
+                        fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default
+                        skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull,
+                        drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull,
+                        // Scale
+                        scaleTop: yScale.top,
+                        scaleBottom: yScale.bottom,
+                        scaleZero: yScale.getPixelForValue(0),
+                    },
+                });
+
+                dataset.metaDataset.pivot();
+            });
+
+            // Update the points
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var xScale = this.scales[this.data.datasets[datasetIndex].xAxisID];
+                var yScale = this.scales[this.data.datasets[datasetIndex].yAxisID];
+
+                helpers.extend(point, {
+                    // Utility
+                    _chart: this.chart,
+                    _xScale: xScale,
+                    _yScale: yScale,
+                    _datasetIndex: datasetIndex,
+                    _index: index,
+
+                    // Desired view properties
+                    _model: {
+                        x: xScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].x), 
+                        y: yScale.getPixelForValue(this.data.datasets[datasetIndex].data[index].y),
+
+                        // Appearance
+                        tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension,
+                        radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius),
+                        backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor),
+                        borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor),
+                        borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth),
+                        skip: (typeof this.data.datasets[datasetIndex].data[index].x != 'number') || (typeof this.data.datasets[datasetIndex].data[index].y != 'number'),
+
+                        // Tooltip
+                        hoverRadius: point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointHitRadius, index, this.options.elements.point.hitRadius),
+                    },
+                });
+            }, this);
+
+
+            // Update control points for the bezier curve
+            this.eachElement(function(point, index, dataset, datasetIndex) {
+                var controlPoints = helpers.splineCurve(
+                    this.previousPoint(dataset, index)._model,
+                    point._model,
+                    this.nextPoint(dataset, index)._model,
+                    point._model.tension
+                );
+
+                point._model.controlPointPreviousX = controlPoints.previous.x;
+                point._model.controlPointNextX = controlPoints.next.x;
+
+                // Prevent the bezier going outside of the bounds of the graph
+
+                // Cap puter bezier handles to the upper/lower scale bounds
+                if (controlPoints.next.y > this.chartArea.bottom) {
+                    point._model.controlPointNextY = this.chartArea.bottom;
+                } else if (controlPoints.next.y < this.chartArea.top) {
+                    point._model.controlPointNextY = this.chartArea.top;
+                } else {
+                    point._model.controlPointNextY = controlPoints.next.y;
+                }
+
+                // Cap inner bezier handles to the upper/lower scale bounds
+                if (controlPoints.previous.y > this.chartArea.bottom) {
+                    point._model.controlPointPreviousY = this.chartArea.bottom;
+                } else if (controlPoints.previous.y < this.chartArea.top) {
+                    point._model.controlPointPreviousY = this.chartArea.top;
+                } else {
+                    point._model.controlPointPreviousY = controlPoints.previous.y;
+                }
+
+                // Now pivot the point for animation
+                point.pivot();
+            }, this);
+
+            this.render();
+        },
+        buildScale: function() {
+            var self = this;
+
+            var calculateXRange = function() {
+                this.min = null;
+                this.max = null;
+                
+                helpers.each(self.data.datasets, function(dataset) {
+                    // Only set the scale range for datasets that actually use this axis
+                    if (dataset.xAxisID === this.id) {
+                        helpers.each(dataset.data, function(value) {
+                            if (this.min === null) {
+                                this.min = value.x;
+                            } else if (value.x < this.min) {
+                                this.min = value.x;
+                            }
+                            
+                            if (this.max === null) {
+                                this.max = value.x;
+                            } else if (value.x > this.max) {
+                                this.max = value.x;
+                            }
+                        }, this);
+                    }
+                }, this);
+            };
+
+            var calculateYRange = function() {
+                this.min = null;
+                this.max = null;
+                
+                helpers.each(self.data.datasets, function(dataset) {
+                    if (dataset.yAxisID === this.id) {
+                        helpers.each(dataset.data, function(value) {
+                            if (this.min === null) {
+                                this.min = value.y;
+                            } else if (value.y < this.min) {
+                                this.min = value.y;
+                            }
+                            
+                            if (this.max === null) {
+                                this.max = value.y;
+                            } else if (value.y > this.max) {
+                                this.max = value.y;
+                            }
+                        }, this);
+                    }
+                }, this);
+            };
+
+            // Map of scale ID to scale object so we can lookup later 
+            this.scales = {};
+
+            helpers.each(this.options.scales.xAxes, function(xAxisOptions) {
+                var ScaleClass = Chart.scales.getScaleConstructor(xAxisOptions.scaleType);
+                var scale = new ScaleClass({
+                    ctx: this.chart.ctx,
+                    options: xAxisOptions,
+                    calculateRange: calculateXRange,
+                    id: xAxisOptions.id,
+                });
+
+                this.scales[scale.id] = scale;
+            }, this);
+
+            helpers.each(this.options.scales.yAxes, function(yAxisOptions) {
+                var ScaleClass = Chart.scales.getScaleConstructor(yAxisOptions.scaleType);
+                var scale = new ScaleClass({
+                    ctx: this.chart.ctx,
+                    options: yAxisOptions,
+                    calculateRange: calculateYRange,
+                    id: yAxisOptions.id,
+                    getPointPixelForValue: function(value, index, datasetIndex) {
+                        return this.getPixelForValue(value);
+                    }
+                });
+
+                this.scales[scale.id] = scale;
+            }, this);
+        },
+        draw: function(ease) {
+            var easingDecimal = ease || 1;
+            this.clear();
+
+            // Draw all the scales
+            helpers.each(this.scales, function(scale) {
+                scale.draw(this.chartArea);
+            }, this);
+
+            // reverse for-loop for proper stacking
+            for (var i = this.data.datasets.length - 1; i >= 0; i--) {
+
+                var dataset = this.data.datasets[i];
+
+                // Transition Point Locations
+                helpers.each(dataset.metaData, function(point, index) {
+                    point.transition(easingDecimal);
+                }, this);
+
+                // Transition and Draw the line
+                dataset.metaDataset.transition(easingDecimal).draw();
+
+                // Draw the points
+                helpers.each(dataset.metaData, function(point) {
+                    point.draw();
+                });
+            }
+
+            // Finally draw the tooltip
+            this.tooltip.transition(easingDecimal).draw();
+        },
+        events: function(e) {
+            // If exiting chart
+            if (e.type == 'mouseout') {
+                return this;
+            }
+
+            this.lastActive = this.lastActive || [];
+
+            // Find Active Elements
+            this.active = function() {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        return this.getElementAtEvent(e);
+                    case 'label':
+                        return this.getElementsAtEvent(e);
+                    case 'dataset':
+                        return this.getDatasetAtEvent(e);
+                    default:
+                        return e;
+                }
+            }.call(this);
+
+            // On Hover hook
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
+            }
+
+             var dataset;
+            var index;
+            // Remove styling for last active (even if it may still be active)
+            if (this.lastActive.length) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.lastActive[0]._datasetIndex];
+                        index = this.lastActive[0]._index;
+
+                        this.lastActive[0]._model.radius = this.lastActive[0].custom && this.lastActive[0].custom.radius ? this.lastActive[0].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                        this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                        this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                        this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.lastActive.length; i++) {
+                            dataset = this.data.datasets[this.lastActive[i]._datasetIndex];
+                            index = this.lastActive[i]._index;
+
+                            this.lastActive[i]._model.radius = this.lastActive[i].custom && this.lastActive[i].custom.radius ? this.lastActive[i].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius);
+                            this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor);
+                            this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor);
+                            this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in hover styling
+            if (this.active.length && this.options.hover.mode) {
+                switch (this.options.hover.mode) {
+                    case 'single':
+                        dataset = this.data.datasets[this.active[0]._datasetIndex];
+                        index = this.active[0]._index;
+
+                        this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2);
+                        this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                        this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2);
+                        break;
+                    case 'label':
+                        for (var i = 0; i < this.active.length; i++) {
+                            dataset = this.data.datasets[this.active[i]._datasetIndex];
+                            index = this.active[i]._index;
+
+                            this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2);
+                            this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.35).rgbString());
+                            this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2);
+                        }
+                        break;
+                    case 'dataset':
+                        break;
+                    default:
+                        // Don't change anything
+                }
+            }
+
+            // Built in Tooltips
+            if (this.options.tooltips.enabled) {
+
+                // The usual updates
+                this.tooltip.initialize();
+
+                // Active
+                if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+
+                    helpers.extend(this.tooltip, {
+                        _active: this.active,
+                    });
+
+                    this.tooltip.update();
+                } else {
+                    // Inactive
+                    this.tooltip._model.opacity = 0;
+                }
+            }
+
+            // Hover animations
+            this.tooltip.pivot();
+
+            if (!this.animating) {
+                var changed;
+
+                helpers.each(this.active, function(element, index) {
+                    if (element !== this.lastActive[index]) {
+                        changed = true;
+                    }
+                }, this);
+
+                // If entering, leaving, or changing elements, animate the change via pivot
+                if ((!this.lastActive.length && this.active.length) ||
+                    (this.lastActive.length && !this.active.length) ||
+                    (this.lastActive.length && this.active.length && changed)) {
+
+                    this.stop();
+                    this.render(this.options.hoverAnimationDuration);
+                }
+            }
+
+            // Remember Last Active
+            this.lastActive = this.active;
+            return this;
+
+        },
+    });
+
+
+}).call(this);