Merge pull request #2237 from troywarr/v2.0-dev

Fix "main" file path in bower.json

.codeclimate.yml

@@ -0,0 +1,19 @@
+---
+engines:
+  duplication:
+    enabled: true
+    config:
+      languages:
+      - javascript
+  eslint:
+    enabled: true
+  fixme:
+    enabled: true
+ratings:
+  paths:
+  - "**.js"
+exclude_paths:
+- dist/
+- node_modules/
+- test/
+- coverage/

.eslintignore

@@ -0,0 +1 @@
+**/*{.,-}min.js

.eslintrc

@@ -0,0 +1,213 @@
+ecmaFeatures:
+  modules: true
+  jsx: true
+
+env:
+  amd: true
+  browser: true
+  es6: true
+  jquery: true
+  node: true
+
+# http://eslint.org/docs/rules/
+rules:
+  # Possible Errors
+  comma-dangle: [2, never]
+  no-cond-assign: 2
+  no-console: 0
+  no-constant-condition: 2
+  no-control-regex: 2
+  no-debugger: 2
+  no-dupe-args: 2
+  no-dupe-keys: 2
+  no-duplicate-case: 2
+  no-empty: 2
+  no-empty-character-class: 2
+  no-ex-assign: 2
+  no-extra-boolean-cast: 2
+  no-extra-parens: 0
+  no-extra-semi: 2
+  no-func-assign: 2
+  no-inner-declarations: [2, functions]
+  no-invalid-regexp: 2
+  no-irregular-whitespace: 2
+  no-negated-in-lhs: 2
+  no-obj-calls: 2
+  no-regex-spaces: 2
+  no-sparse-arrays: 2
+  no-unexpected-multiline: 2
+  no-unreachable: 2
+  use-isnan: 2
+  valid-jsdoc: 0
+  valid-typeof: 2
+
+  # Best Practices
+  accessor-pairs: 2
+  block-scoped-var: 0
+  complexity: [2, 6]
+  consistent-return: 0
+  curly: 0
+  default-case: 0
+  dot-location: 0
+  dot-notation: 0
+  eqeqeq: 2
+  guard-for-in: 2
+  no-alert: 2
+  no-caller: 2
+  no-case-declarations: 2
+  no-div-regex: 2
+  no-else-return: 0
+  no-empty-label: 2
+  no-empty-pattern: 2
+  no-eq-null: 2
+  no-eval: 2
+  no-extend-native: 2
+  no-extra-bind: 2
+  no-fallthrough: 2
+  no-floating-decimal: 0
+  no-implicit-coercion: 0
+  no-implied-eval: 2
+  no-invalid-this: 0
+  no-iterator: 2
+  no-labels: 0
+  no-lone-blocks: 2
+  no-loop-func: 2
+  no-magic-number: 0
+  no-multi-spaces: 0
+  no-multi-str: 0
+  no-native-reassign: 2
+  no-new-func: 2
+  no-new-wrappers: 2
+  no-new: 2
+  no-octal-escape: 2
+  no-octal: 2
+  no-proto: 2
+  no-redeclare: 2
+  no-return-assign: 2
+  no-script-url: 2
+  no-self-compare: 2
+  no-sequences: 0
+  no-throw-literal: 0
+  no-unused-expressions: 2
+  no-useless-call: 2
+  no-useless-concat: 2
+  no-void: 2
+  no-warning-comments: 0
+  no-with: 2
+  radix: 2
+  vars-on-top: 0
+  wrap-iife: 2
+  yoda: 0
+
+  # Strict
+  strict: 0
+
+  # Variables
+  init-declarations: 0
+  no-catch-shadow: 2
+  no-delete-var: 2
+  no-label-var: 2
+  no-shadow-restricted-names: 2
+  no-shadow: 0
+  no-undef-init: 2
+  no-undef: 0
+  no-undefined: 0
+  no-unused-vars: 0
+  no-use-before-define: 0
+
+  # Node.js and CommonJS
+  callback-return: 2
+  global-require: 2
+  handle-callback-err: 2
+  no-mixed-requires: 0
+  no-new-require: 0
+  no-path-concat: 2
+  no-process-exit: 2
+  no-restricted-modules: 0
+  no-sync: 0
+
+  # Stylistic Issues
+  array-bracket-spacing: 0
+  block-spacing: 0
+  brace-style: 0
+  camelcase: 0
+  comma-spacing: 0
+  comma-style: 0
+  computed-property-spacing: 0
+  consistent-this: 0
+  eol-last: 0
+  func-names: 0
+  func-style: 0
+  id-length: 0
+  id-match: 0
+  indent: 0
+  jsx-quotes: 0
+  key-spacing: 0
+  linebreak-style: 0
+  lines-around-comment: 0
+  max-depth: 0
+  max-len: 0
+  max-nested-callbacks: 0
+  max-params: 0
+  max-statements: [2, 30]
+  new-cap: 0
+  new-parens: 0
+  newline-after-var: 0
+  no-array-constructor: 0
+  no-bitwise: 0
+  no-continue: 0
+  no-inline-comments: 0
+  no-lonely-if: 0
+  no-mixed-spaces-and-tabs: 0
+  no-multiple-empty-lines: 0
+  no-negated-condition: 0
+  no-nested-ternary: 0
+  no-new-object: 0
+  no-plusplus: 0
+  no-restricted-syntax: 0
+  no-spaced-func: 0
+  no-ternary: 0
+  no-trailing-spaces: 0
+  no-underscore-dangle: 0
+  no-unneeded-ternary: 0
+  object-curly-spacing: 0
+  one-var: 0
+  operator-assignment: 0
+  operator-linebreak: 0
+  padded-blocks: 0
+  quote-props: 0
+  quotes: 0
+  require-jsdoc: 0
+  semi-spacing: 0
+  semi: 0
+  sort-vars: 0
+  space-after-keywords: 0
+  space-before-blocks: 0
+  space-before-function-paren: 0
+  space-before-keywords: 0
+  space-in-parens: 0
+  space-infix-ops: 0
+  space-return-throw-case: 0
+  space-unary-ops: 0
+  spaced-comment: 0
+  wrap-regex: 0
+
+  # ECMAScript 6
+  arrow-body-style: 0
+  arrow-parens: 0
+  arrow-spacing: 0
+  constructor-super: 0
+  generator-star-spacing: 0
+  no-arrow-condition: 0
+  no-class-assign: 0
+  no-const-assign: 0
+  no-dupe-class-members: 0
+  no-this-before-super: 0
+  no-var: 0
+  object-shorthand: 0
+  prefer-arrow-callback: 0
+  prefer-const: 0
+  prefer-reflect: 0
+  prefer-spread: 0
+  prefer-template: 0
+  require-yield: 0

.gitignore

@@ -9,3 +9,5 @@ docs/index.md
 bower_components/
 
 coverage/*
+
+nbproject/*

.travis.yml

@@ -1,20 +1,29 @@
 language: node_js
 node_js:
-  - "0.11"
-  - "0.10"
+  - "5.6"
+  - "4.3"
 
 before_install:
-  - "export CHROME_BIN=chromium-browser"
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
+  - "sudo apt-get update"
+  - "sudo apt-get install -y libappindicator1 fonts-liberation"
+  - "wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb"
+  - "sudo dpkg -i google-chrome*.deb"
+  - "export CHROME_BIN=/usr/bin/google-chrome"
 
 before_script:
   - npm install
 
 script:
   - gulp test
+  - gulp coverage
+  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
 
 notifications:
   slack: chartjs:pcfCZR6ugg5TEcaLtmIfQYuA
 
-sudo: false
+sudo: required
+
+addons:
+  firefox: latest

CONTRIBUTING.md

@@ -30,6 +30,12 @@ Guidlines for reporting bugs:
 Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.
 
 
+Local development
+-----------------
+
+Run `npm install` to install all the libraries, then run `gulp dev --test` to build and run tests as you make changes.
+
+
 Pull requests
 -------------
 

README.md

@@ -1,13 +1,14 @@
 # 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)
+[![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)[![Coverage Status](https://coveralls.io/repos/nnnick/Chart.js/badge.svg?branch=v2.0-dev)](https://coveralls.io/r/nnnick/Chart.js?branch=v2.0-dev)
+
 
 
 *Simple HTML5 Charts using the canvas element* [chartjs.org](http://www.chartjs.org)
 
 ## v2.0 Beta
 
-Current Release: [2.0.0-beta](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta)
+Current Release: [2.0.0-beta2](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta2)
 
 The next generation and release of Chart.js has been well under way this year and we are very close to releasing some amazing new features including, but not limited to:
 - Rewritten, optimized, and unit-tested

bower.json

@@ -1,13 +1,13 @@
 {
-    "name": "Chart.js",
-    "version": "2.0.0-beta2",
-    "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"
-    }
+  "name": "Chart.js",
+  "version": "2.0.0",
+  "description": "Simple HTML5 Charts using the canvas element",
+  "homepage": "https://github.com/nnnick/Chart.js",
+  "author": "nnnick",
+  "main": [
+    "dist/Chart.js"
+  ],
+  "devDependencies": {
+    "jquery": "~2.1.4"
+  }
 }

composer.json

@@ -0,0 +1,26 @@
+{
+    "name": "nnnick/chartjs",
+    "type": "library",
+    "description": "Simple HTML5 charts using the canvas element.",
+    "keywords": [
+        "chart",
+        "js"
+    ],
+    "homepage": "http://www.chartjs.org/",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "NICK DOWNIE",
+            "email": "hello@nickdownie.com"
+        }
+    ],
+    "require": {
+        "php": ">=5.3.3"
+    },
+    "minimum-stability": "stable",
+    "extra": {
+        "branch-alias": {
+            "release/2.0": "v2.0-dev"
+        }
+    }
+}

config.jshintrc

@@ -0,0 +1,4 @@
+{
+	"node": true,
+	"predef": [ "require", "module" ]
+}

docs/00-Getting-Started.md

@@ -3,40 +3,53 @@ title: Getting started
 anchor: getting-started
 ---
 
-###Include Chart.js
+### Download Chart.js
 
-First we need to include the Chart.js library on the page. The library occupies a global variable of `Chart`.
+To download a zip, go to [Chart.js on Github](https://github.com/nnnick/Chart.js) and choose the version that is right for your application.
+* [Standard build](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.js) (~31kB gzipped)
+* [Bundled with Moment.js](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.bundle.js) (~45kB gzipped)
+* [CDN Versions](https://cdnjs.com/libraries/Chart.js)
 
-```html
-<script src="Chart.js"></script>
-```
+To install via npm / bower:
 
-Alternatively, if you're using an AMD loader for JavaScript modules, that is also supported in the Chart.js core. Please note: the library will still occupy a global variable of `Chart`, even if it detects `define` and `define.amd`. If this is a problem, you can call `noConflict` to restore the global Chart variable to it's previous owner.
-
-```javascript
-// Using requirejs
-require(['path/to/Chartjs'], function(Chart){
-	// Use Chart.js as normal here.
-
-	// Chart.noConflict restores the Chart global variable to it's previous owner
-	// The function returns what was previously Chart, allowing you to reassign.
-	var Chartjs = Chart.noConflict();
-
-});
-```
-
-You can also grab Chart.js using bower, npm, or CDN:
-
-```bash
-bower install Chart.js --save
-```
 ```bash
 npm install chart.js --save
 ```
+```bash
+bower install Chart.js --save
+```
 
-https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js
+### Installation
 
-###Creating a Chart
+To import Chart.js using an old-school script tag:
+
+```html
+<script src="Chart.js"></script>
+<script>
+    var myChart = new Chart({...})
+</script>
+```
+
+To import Chart.js using an awesome module loader:
+
+```javascript
+
+// Using CommonJS
+var Chart = require('src/chart.js')
+var myChart = new Chart({...})
+
+// ES6
+import Chart from 'src/chart.js'
+let myChart = new Chart({...})
+
+// Using requirejs
+require(['path/to/Chartjs'], function(Chart){
+ var myChart = new Chart({...})
+})
+
+```
+
+### Creating a Chart
 
 To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.
 
@@ -60,30 +73,30 @@ The following example instantiates a bar chart showing the number of votes for d
 <script>
 var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx, {
-		type: 'bar',
-		data: {
-			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-			datasets: [{
-					label: '# of Votes',
-					data: [12, 19, 3, 5, 2, 3]
-			}]
-		},
-		options:{
-			scales:{
-				yAxes:[{
-						ticks:{
-							beginAtZero:true
-						}
-					}]
-			}
-		}
+    type: 'bar',
+    data: {
+        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3]
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
 });
 </script>
 ```
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
 
-###Global chart configuration
+### Global chart configuration
 
 This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
 
@@ -103,7 +116,11 @@ hover |-|-|-
 *hover*.animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes
 onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements
 defaultColor | Color | 'rgba(0,0,0,0.1)' |
-legendCallback | Function | ` function (chart) { // the chart object to generate a legend from.  }` | Function to generate a legend. Default implementation returns an HTML string.
+defaultFontColor | Color | '#666' | Default font color for all text
+defaultFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Default font family for all text
+defaultFontSize | Number | 12 | Default font size (in px) for text. Does not apply to radialLinear scale point labels
+defaultFontStyle | String | 'normal' | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title
+legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
 
 The global options for the chart title is defined in `Chart.defaults.global.title`
 
@@ -114,7 +131,7 @@ position | String | 'top' | Position of the title. 'top' or 'bottom' are allowed
 fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes)
 fontColor | Color  | '#666' | Text color
 fontFamily | String | 'Helvetica Neue' |
-fontSize | Number | 12 | 
+fontSize | Number | 12 |
 fontStyle | String | 'bold' |
 padding | Number | 10 | Number of pixels to add above and below the title text
 text | String | '' | Title text
@@ -134,7 +151,7 @@ labels |-|-|-
 *labels*fontColor | Color | "#666" |
 *labels*fontFamily | String | "Helvetica Neue" |
 *labels*padding | Number | 10 | Padding between rows of colored boxes
-*labels*generateLabels: | Function | `function(data) {  } | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
+*labels*generateLabels: | Function | `function(data) {  }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
 
 The global options for tooltips are defined in `Chart.defaults.global.tooltips`.
 
@@ -142,7 +159,7 @@ Name | Type | Default | Description
 --- |:---:| --- | ---
 enabled | Boolean | true |
 custom | | null |
-mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value. 
+mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value.
 backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip
  | | |
 Label | | | There are three labels you can control. `title`, `body`, `footer` the star (\*) represents one of these three. *(i.e. titleFontFamily, footerSpacing)*
@@ -185,10 +202,10 @@ The global options for animations are defined in `Chart.defaults.global.animatio
 Name | Type | Default | Description
 --- |:---:| --- | ---
 duration | Number | 1000 | The number of milliseconds an animation takes.
-easing | String | "easeOutQuart" | Easing function to use. 
+easing | String | "easeOutQuart" | Easing function to use.
 onProgress | Function | none | Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation.
-onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress
-`
+onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress`
+
 The global options for elements are defined in `Chart.defaults.global.elements`.
 
 Name | Type | Default | Description
@@ -206,9 +223,10 @@ line | - | - | -
 *line*.borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
 *line*.borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
 *line*.borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
-*line*.fill | Boolean | true | 
+*line*.fill | Boolean | true |
 point | - | - | -
 *point*.radius | Number | 3 | Default point radius
+*point*.pointStyle | String | 'circle' | Default point style
 *point*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default point fill color
 *point*.borderWidth | Number | 1 | Default point stroke width
 *point*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default point stroke color
@@ -219,6 +237,7 @@ rectangle | - | - | -
 *rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default bar fill color
 *rectangle*.borderWidth | Number | 0 | Default bar stroke width
 *rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default bar stroke color
+*rectangle*.borderSkipped | String | 'bottom' | Default skipped (excluded) border for rectangle. Can be one of `bottom`, `left`, `top`, `right`
 
 If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
 

docs/01-Scales.md

@@ -53,13 +53,14 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.fontStyle | String | "normal" | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 *ticks*.maxRotation | Number | 90 | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
 *ticks*.minRotation | Number |  20 | *currently not-implemented* Minimum rotation for tick labels when condensing is necessary.  *Note: Only applicable to horizontal scales.*
+*ticks*.maxTicksLimit | Number | 11 | Maximum number of ticks and gridlines to show. If not defined, it will limit to 11 ticks but will show all gridlines.
 *ticks*.padding | Number | 10 | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.*
 *ticks*.mirror | Boolean | false | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
 *ticks*.reverse | Boolean | false | Reverses order of tick labels.
 *ticks*.display | Boolean | true | If true, show the ticks.
 *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value.
 *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.
-*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value
+*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. 
 *ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value
 *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
 *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart.
@@ -92,6 +93,8 @@ The category scale extends the core scale class with the following tick template
 }
 ```
 
+The `ticks.min` and `ticks.max` attributes may be used with the category scale. Unlike other scales, the value of these attributes must simply be something that can be found in the `labels` array of the data object.
+
 ### Linear Scale
 The linear scale can be used to display numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis.
 
@@ -129,6 +132,12 @@ The linear scale extends the core scale class with the following tick template:
 }
 ```
 
+It also provides additional configuration options:
+
+Name | Type | Default | Description
+--- |:---:| --- | ---
+*ticks*.stepSize | Number | - | User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
+
 ### Logarithmic Scale
 The logarithmic scale is used to display logarithmic data of course. It can be placed on either the x or y axis.
 
@@ -161,11 +170,16 @@ The time scale extends the core scale class with the following tick template:
 	position: "bottom",
 	time: {
 		// string/callback - By default, date objects are expected. You may use a pattern string from http://momentjs.com/docs/#/parsing/string-format/ to parse a time string format, or use a callback function that is passed the label, and must return a moment() instance.
-		format: false,
+		parser: false,
 		// string - By default, unit will automatically be detected.  Override with 'week', 'month', 'year', etc. (see supported time measurements)
 		unit: false,
+
+		// Number - The number of steps of the above unit between ticks
+		unitStepSize: 1
+
 		// string - By default, no rounding is applied.  To round, set to a supported time unit eg. 'week', 'month', 'year', etc.
 		round: false,
+		
 		// Moment js for each of the units. Replaces `displayFormat`
 		// To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
 		displayFormats: {
@@ -259,7 +273,7 @@ The radial linear scale extends the core scale class with the following tick tem
 		//Number - The backdrop padding to the side of the label in pixels
 		backdropPaddingX: 2,
 
-		//Number - Limit the maximum number of ticks
+		//Number - Limit the maximum number of ticks and gridlines
 		maxTicksLimit: 11,
 	},
 
@@ -275,6 +289,11 @@ The radial linear scale extends the core scale class with the following tick tem
 
 		//String - Point label font colour
 		fontColor: "#666",
+
+		//Function - Used to determine point labels to show in scale
+		callback: function(pointLabel) {
+			return pointLabel;
+		}
 	},
 }
 ```

docs/02-Line-Chart.md

@@ -2,7 +2,7 @@
 title: Line Chart
 anchor: line-chart
 ---
-###Introduction
+### Introduction
 A line chart is a way of plotting data points on a line.
 
 Often, it is used to show trend data, and the comparison of two data sets.
@@ -11,7 +11,7 @@ Often, it is used to show trend data, and the comparison of two data sets.
 	<canvas width="250" height="125"></canvas>
 </div>
 
-###Example usage
+### Example usage
 ```javascript
 var myLineChart = new Chart(ctx, {
 	type: 'line',
@@ -27,7 +27,7 @@ var myLineChart = Chart.Line(ctx, {
 	options: options
 });
 ```
-###Data structure
+### Data structure
 
 ```javascript
 var data = {
@@ -48,16 +48,16 @@ var data = {
 			borderColor: "rgba(220,220,220,1)",
 
 			// String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
-            borderCapStyle: 'butt',
+			borderCapStyle: 'butt',
 
-            // Array - Length and spacing of dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
-            borderDash: [],
+			// Array - Length and spacing of dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
+			borderDash: [],
 
-            // Number - Offset for line dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
-            borderDashOffset: 0.0,
+			// Number - Offset for line dashes. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
+			borderDashOffset: 0.0,
 
-            // String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
-            borderJoinStyle: 'miter',
+			// String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
+			borderJoinStyle: 'miter',
 
 			// String or array - Point stroke color
 			pointBorderColor: "rgba(220,220,220,1)",
@@ -83,11 +83,14 @@ var data = {
 			// Tension - bezier curve tension of the line. Set to 0 to draw straight Wlines connecting points
 			tension: 0.1,
 
+			// Number - the pixel size of the point shape. Can be set to 0 to not render a circle over the point
+			radius: 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",
+			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used. First id is y-axis-0
+			yAxisID: "y-axis-0",
 		},
 		{
 			label: "My Second dataset",
@@ -107,7 +110,7 @@ var data = {
 };
 ```
 
-The line chart requires an array of labels for each of the data points. This is shown on the X axis.
+The line chart requires an array of labels. This labels are shown on the X axis. There must be one label for each data point. More labels than datapoints are allowed, in which case the line ends at the last data point.
 The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.
 
 The label key on each dataset is optional, and can be used when generating a scale for the chart.
@@ -120,8 +123,12 @@ The default options for line chart are defined in `Chart.defaults.Line`.
 
 Name | Type | Default | Description
 --- | --- | --- | ---
+showLines | Boolean | true | If false, the lines between points are not drawn
 stacked | Boolean | false | If true, lines stack on top of each other along the y axis.
 *hover*.mode | String | "label" | Label's hover mode. "label" is used since the x axis displays data by the index in the dataset.
+elements | - | - | -
+*elements*.point | - | - | -
+*elements.point*.radius | Number | `3` | Defines the size of the Point shape. Can be set to zero to skip rendering a point.
 scales | - | - | -
 *scales*.xAxes | Array | `[{type:"category","id":"x-axis-1"}]` | Defines all of the x axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options.
 *Options for xAxes* | | |

docs/03-Bar-Chart.md

@@ -14,7 +14,7 @@ It is sometimes used to show trend data, and the comparison of multiple data set
 
 ### Example usage
 ```javascript
-var myBarChart = new Chart(ctx,{
+var myBarChart = new Chart(ctx, {
 	type: 'bar',
 	data: data,
 	options: options
@@ -50,7 +50,7 @@ var 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",
+			yAxisID: "y-axis-0",
 		},
 		{
 			label: "My Second dataset",
@@ -108,13 +108,13 @@ 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,{
-	type:"bar",
+new Chart(ctx, {
+	type: "bar",
 	data: data,
 	options: {
 		scales: {
 				xAxes: [{
-						stacked: true,
+						stacked: true
 				}],
 				yAxes: [{
 						stacked: true
@@ -137,19 +137,19 @@ The following shows the relationship between the bar percentage option and the c
 ```text
 // categoryPercentage: 1.0
 // barPercentage: 1.0
-Bar:          | 1.0 | 1.0 |
-Category: 	|    1.0    |   
-Sample:	   |===========|
+Bar:        | 1.0 | 1.0 |
+Category:   |    1.0    |   
+Sample:     |===========|
 
 // categoryPercentage: 1.0
 // barPercentage: 0.5
-Bar:             |.5|  |.5|
-Category: 	|      1.0     |   
-Sample:	   |==============|
+Bar:          |.5|  |.5|
+Category:  |      1.0     |   
+Sample:    |==============|
 
 // categoryPercentage: 0.5
 // barPercentage: 1.0
-Bar:              |1.||1.|
-Category:     	|  .5  |   
-Sample:	   |==============|
+Bar:            |1.||1.|
+Category:       |  .5  |   
+Sample:     |==============|
 ```

docs/04-Radar-Chart.md

@@ -16,7 +16,7 @@ They are often useful for comparing the points of two or more different data set
 
 ```javascript
 var myRadarChart = new Chart(ctx, {
-	type:'radar',
+	type: 'radar',
 	data: data,
 	options: options
 });
@@ -74,7 +74,7 @@ For example, we could have a radar chart without a point for each on piece of da
 
 ```javascript
 new Chart(ctx, {
-	type:"radar",
+	type: "radar",
 	data: data,
 	options: {
 			scale: {

docs/05-Polar-Area-Chart.md

@@ -15,7 +15,7 @@ This type of chart is often useful when we want to show a comparison data simila
 
 ```javascript
 new Chart(ctx, {
-	data:data, 
+	data: data,
 	type: 'polarArea',
 	options: options
 });
@@ -75,7 +75,7 @@ For example, we could have a polar area chart with a black stroke on each segmen
 ```javascript
 new Chart(ctx, {
 	data: data,
-	type: 'polarArea',
+	type: "polarArea",
 	options: {
 		elements: {
 			arc: {

docs/06-Pie-Doughnut-Chart.md

@@ -2,7 +2,7 @@
 title: Pie & Doughnut Charts
 anchor: doughnut-pie-chart
 ---
-###Introduction
+### Introduction
 Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
 
 They are excellent at showing the relational proportions between data.
@@ -96,4 +96,4 @@ new Chart(ctx,{
 // and the Doughnut chart defaults but this particular instance will have `animateScale` set to `true`.
 ```
 
-We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.Doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.Pie`, with the only difference being `percentageInnerCutout` being set to 0.
+We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.pie`, with the only difference being `percentageInnerCutout` being set to 0.

docs/07-Advanced.md

@@ -278,14 +278,14 @@ The Core.Scale base class also has some utility functions that you may find usef
 ```javascript
 {	
 	// Returns true if the scale instance is horizontal
-	isHorizontal: function(){},
+	isHorizontal: function() {},
 
 	// Get the correct value from the value from this.chart.data.datasets[x].data[]
 	// If dataValue is an object, returns .x or .y depending on the return of isHorizontal()
 	// If the value is undefined, returns NaN
 	// Otherwise returns the value.
 	// Note that in all cases, the returned value is not guaranteed to be a Number
-	getRightValue: function(dataValue){},
+	getRightValue: function(dataValue) {},
 }
 ```
 

gulpfile.js

@@ -1,48 +1,35 @@
 var gulp = require('gulp'),
-	concat = require('gulp-concat'),
-	uglify = require('gulp-uglify'),
-	util = require('gulp-util'),
-	jshint = require('gulp-jshint'),
-	size = require('gulp-size'),
-	connect = require('gulp-connect'),
-	replace = require('gulp-replace'),
-	htmlv = require('gulp-html-validator'),
-	inquirer = require('inquirer'),
-	semver = require('semver'),
-	exec = require('child_process').exec,
-	fs = require('fs'),
-	package = require('./package.json'),
-	bower = require('./bower.json'),
-	karma = require('gulp-karma'),
-	umd = require('gulp-umd');
+  concat = require('gulp-concat'),
+  uglify = require('gulp-uglify'),
+  util = require('gulp-util'),
+  jshint = require('gulp-jshint'),
+  size = require('gulp-size'),
+  connect = require('gulp-connect'),
+  replace = require('gulp-replace'),
+  htmlv = require('gulp-html-validator'),
+  inquirer = require('inquirer'),
+  semver = require('semver'),
+  exec = require('child_process').exec,
+  fs = require('fs'),
+  package = require('./package.json'),
+  bower = require('./bower.json'),
+  karma = require('gulp-karma'),
+  browserify = require('browserify'),
+  streamify = require('gulp-streamify'),
+  source = require('vinyl-source-stream'),
+  merge = require('merge-stream');
 
 var srcDir = './src/';
+var outDir = './dist/';
 var testDir = './test/';
-/*
- *  Usage : gulp build --types=Bar,Line,Doughnut
- *  Output: - A built Chart.js file with Core and types Bar, Line and Doughnut concatenated together
- *          - A minified version of this code, in Chart.min.js
- */
-
-var srcFiles = [
-	'./node_modules/color/dist/color.min.js',
-	'./src/core/core.js',
-	'./src/core/core.helpers.js',
-	'./src/core/core.element.js',
-	'./src/core/**',
-	'./src/controllers/**',
-	'./src/scales/**',
-	'./src/elements/**',
-	'./src/charts/**',
-];
 
 var preTestFiles = [
-	'./node_modules/moment/min/moment.min.js',
+  './node_modules/moment/min/moment.min.js',
 ];
 
 var testFiles = [
-	'./test/mockContext.js',
-	'./test/*.js'
+  './test/mockContext.js',
+  './test/*.js'
 ];
 
 gulp.task('build', buildTask);
@@ -67,37 +54,30 @@ gulp.task('default', ['build', 'watch']);
 
 function buildTask() {
 
-	var isCustom = !!(util.env.types),
-		outputDir = (isCustom) ? 'custom' : '.';
+  var bundled = browserify('./src/Chart.js')
+    .bundle()
+    .pipe(source('Chart.bundle.js'))
+    .pipe(streamify(replace('{{ version }}', package.version)))
+    .pipe(gulp.dest(outDir))
+    .pipe(streamify(uglify({
+      preserveComments: 'some'
+    })))
+    .pipe(streamify(concat('Chart.bundle.min.js')))
+    .pipe(gulp.dest(outDir));
 
-	return gulp.src(srcFiles)
-		.pipe(concat('Chart.js'))
-		.pipe(replace('{{ version }}', package.version))
-		.pipe(umd({
-			// We want a global always to ensure that we match previous behaviour
-			templateSource:
-				";(function(root, factory) {\n"+
-				"  if (typeof define === 'function' && define.amd) {\n"+
-				"    define(<%= amd %>, factory);\n"+
-				"  } else if (typeof exports === 'object') {\n"+
-				"    module.exports = factory.call(root,<%= cjs %>);\n"+
-				"  } else {\n"+
-				"    root.<%= namespace %> = factory.call(root,<%= global %>);\n"+
-				"  }\n"+
-				"}(this, function(<%= param %>) {\n"+
-				"<%= contents %>\n"+
-				"return <%= exports %>;\n"+
-				"}));\n",
-			dependencies: function() {
-				return ['moment']
-			}
-		}))
-		.pipe(gulp.dest(outputDir))
-		.pipe(uglify({
-			preserveComments: 'some'
-		}))
-		.pipe(concat('Chart.min.js'))
-		.pipe(gulp.dest(outputDir));
+  var nonBundled = browserify('./src/Chart.js')
+    .ignore('moment')
+    .bundle()
+    .pipe(source('Chart.js'))
+    .pipe(streamify(replace('{{ version }}', package.version)))
+    .pipe(gulp.dest(outDir))
+    .pipe(streamify(uglify({
+      preserveComments: 'some'
+    })))
+    .pipe(streamify(concat('Chart.min.js')))
+    .pipe(gulp.dest(outDir));
+
+  return merge(bundled, nonBundled);
 
 }
 
@@ -107,120 +87,121 @@ function buildTask() {
  *  Output: - New version number written into package.json & bower.json
  */
 function bumpTask(complete) {
-	util.log('Current version:', util.colors.cyan(package.version));
-	var choices = ['major', 'premajor', 'minor', 'preminor', 'patch', 'prepatch', 'prerelease'].map(function(versionType) {
-		return versionType + ' (v' + semver.inc(package.version, versionType) + ')';
-	});
-	inquirer.prompt({
-		type: 'list',
-		name: 'version',
-		message: 'What version update would you like?',
-		choices: choices
-	}, function(res) {
-		var increment = res.version.split(' ')[0],
-			newVersion = semver.inc(package.version, increment);
+  util.log('Current version:', util.colors.cyan(package.version));
+  var choices = ['major', 'premajor', 'minor', 'preminor', 'patch', 'prepatch', 'prerelease'].map(function(versionType) {
+    return versionType + ' (v' + semver.inc(package.version, versionType) + ')';
+  });
+  inquirer.prompt({
+    type: 'list',
+    name: 'version',
+    message: 'What version update would you like?',
+    choices: choices
+  }, function(res) {
+    var increment = res.version.split(' ')[0],
+      newVersion = semver.inc(package.version, increment);
 
-		// Set the new versions into the bower/package object
-		package.version = newVersion;
-		bower.version = newVersion;
+    // Set the new versions into the bower/package object
+    package.version = newVersion;
+    bower.version = newVersion;
 
-		// Write these to their own files, then build the output
-		fs.writeFileSync('package.json', JSON.stringify(package, null, 2));
-		fs.writeFileSync('bower.json', JSON.stringify(bower, null, 2));
+    // Write these to their own files, then build the output
+    fs.writeFileSync('package.json', JSON.stringify(package, null, 2));
+    fs.writeFileSync('bower.json', JSON.stringify(bower, null, 2));
 
-		complete();
-	});
+    complete();
+  });
 }
 
 
 function releaseTask() {
-	exec('git tag -a v' + package.version);
+  exec('git tag -a v' + package.version);
 }
 
 
 function jshintTask() {
-	return gulp.src(srcDir + '**/*.js')
-		.pipe(jshint())
-		.pipe(jshint.reporter('default'));
+  return gulp.src(srcDir + '**/*.js')
+    .pipe(jshint('config.jshintrc'))
+    .pipe(jshint.reporter('jshint-stylish'))
+    .pipe(jshint.reporter('fail'));
 }
 
 
 function validHTMLTask() {
-	return gulp.src('samples/*.html')
-		.pipe(htmlv());
+  return gulp.src('samples/*.html')
+    .pipe(htmlv());
 }
 
 
 function unittestTask() {
-	var files = srcFiles.slice();
-	Array.prototype.unshift.apply(files, preTestFiles);
-	Array.prototype.push.apply(files, testFiles);
+  var files = ['./src/**/*.js'];
+  Array.prototype.unshift.apply(files, preTestFiles);
+  Array.prototype.push.apply(files, testFiles);
 
-	return gulp.src(files)
-		.pipe(karma({
-			configFile: 'karma.conf.ci.js',
-			action: 'run'
-		}));
+  return gulp.src(files)
+    .pipe(karma({
+      configFile: 'karma.conf.ci.js',
+      action: 'run'
+    }));
 }
 
 function unittestWatchTask() {
-	var files = srcFiles.slice();
-	Array.prototype.unshift.apply(files, preTestFiles);
-	Array.prototype.push.apply(files, testFiles);
+  var files = ['./src/**/*.js'];
+  Array.prototype.unshift.apply(files, preTestFiles);
+  Array.prototype.push.apply(files, testFiles);
 
-	return gulp.src(files)
-		.pipe(karma({
-			configFile: 'karma.conf.js',
-			action: 'watch'
-		}));
+  return gulp.src(files)
+    .pipe(karma({
+      configFile: 'karma.conf.js',
+      action: 'watch'
+    }));
 }
 
 function coverageTask() {
-	var files = srcFiles.slice();
-	Array.prototype.unshift.apply(files, preTestFiles);
-	Array.prototype.push.apply(files, testFiles);
+  var files = ['./src/**/*.js'];
+  Array.prototype.unshift.apply(files, preTestFiles);
+  Array.prototype.push.apply(files, testFiles);
 
-	return gulp.src(files)
-		.pipe(karma({
-			configFile: 'karma.coverage.conf.js',
-			action: 'run'
-		}));
+  return gulp.src(files)
+    .pipe(karma({
+      configFile: 'karma.coverage.conf.js',
+      action: 'run'
+    }));
 }
 
 function librarySizeTask() {
-	return gulp.src('Chart.min.js')
-		.pipe(size({
-			gzip: true
-		}));
+  return gulp.src('dist/Chart.bundle.min.js')
+    .pipe(size({
+      gzip: true
+    }));
 }
 
 function moduleSizesTask() {
-	return gulp.src(srcDir + '*.js')
-		.pipe(uglify({
-			preserveComments: 'some'
-		}))
-		.pipe(size({
-			showFiles: true,
-			gzip: true
-		}));
+  return gulp.src(srcDir + '**/*.js')
+    .pipe(uglify({
+      preserveComments: 'some'
+    }))
+    .pipe(size({
+      showFiles: true,
+      gzip: true
+    }));
 }
 
 function watchTask() {
-	if (util.env.test) {
-		return gulp.watch('./src/**', ['build', 'unittest', 'unittestWatch']);
-	}
-	return gulp.watch('./src/**', ['build']);
+  if (util.env.test) {
+    return gulp.watch('./src/**', ['build', 'unittest', 'unittestWatch']);
+  }
+  return gulp.watch('./src/**', ['build']);
 }
 
 function serverTask() {
-	connect.server({
-		port: 8000
-	});
+  connect.server({
+    port: 8000
+  });
 }
 
 // Convenience task for opening the project straight from the command line
 
 function _openTask() {
-	exec('open http://localhost:8000');
-	exec('subl .');
+  exec('open http://localhost:8000');
+  exec('subl .');
 }

karma.conf.ci.js

@@ -7,8 +7,14 @@ module.exports = function(config) {
 				flags: ['--no-sandbox']
 			}
 		},
-		frameworks: ['jasmine'],
+		frameworks: ['browserify', 'jasmine'],
 		reporters: ['progress', 'html'],
+		preprocessors: {
+			'src/**/*.js': ['browserify']
+		},
+		browserify: {
+			debug: true
+		}
 	};
 
 	if (process.env.TRAVIS) {

karma.conf.js

@@ -1,7 +1,14 @@
 module.exports = function(config) {
 	config.set({
 		browsers: ['Chrome', 'Firefox'],
-		frameworks: ['jasmine'],
+		frameworks: ['browserify', 'jasmine'],
 		reporters: ['progress', 'html'],
+
+		preprocessors: {
+			'src/**/*.js': ['browserify']
+		},
+		browserify: {
+			debug: true
+		}
 	});
 };

karma.coverage.conf.js

@@ -1,18 +1,43 @@
 module.exports = function(config) {
-	config.set({
-		browsers: ['Chrome', 'Firefox'],
+	var configuration = {
+		browsers: ['Firefox'],
 
-		coverageReporter: {
-			type: 'html',
-			dir: 'coverage/'
-		},
-
-		frameworks: ['jasmine'],
+		frameworks: ['browserify', 'jasmine'],
 
 		preprocessors: {
-			'src/**/*.js': ['coverage']
+			'src/**/*.js': ['browserify']
+		},
+		browserify: {
+			debug: true,
+			transform: [['browserify-istanbul', {
+				instrumenterConfig: {
+					embed: true
+				}
+			}]]
 		},
 		
 		reporters: ['progress', 'coverage'],
-	});
+		coverageReporter: {
+			dir: 'coverage/',
+			reporters: [
+				{ type: 'html', subdir: 'report-html' },
+				{ type: 'lcovonly', subdir: '.', file: 'lcov.info' }
+			]
+		}
+	};
+
+	// If on the CI, use the CI chrome launcher
+	if (process.env.TRAVIS) {
+		configuration.browsers.push('Chrome_travis_ci');
+		configuration.customLaunchers = {
+			Chrome_travis_ci: {
+				base: 'Chrome',
+				flags: ['--no-sandbox']
+			}
+		};
+	} else {
+		configuration.browsers.push('Chrome');
+	}
+
+	config.set(configuration);
 };

package.json

@@ -2,15 +2,17 @@
   "name": "chart.js",
   "homepage": "http://www.chartjs.org",
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "2.0.0-beta2",
-  "main": "Chart.js",
+  "version": "2.0.0",
+  "main": "src/chart.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/nnnick/Chart.js.git"
   },
   "devDependencies": {
-    "color": "git://github.com/chartjs/color",
-    "gulp": "3.5.x",
+    "browserify": "^13.0.0",
+    "browserify-istanbul": "^0.2.1",
+    "coveralls": "^2.11.6",
+    "gulp": "3.9.x",
     "gulp-concat": "~2.1.x",
     "gulp-connect": "~2.0.5",
     "gulp-html-validator": "^0.0.2",
@@ -18,25 +20,32 @@
     "gulp-karma": "0.0.4",
     "gulp-replace": "^0.4.0",
     "gulp-size": "~0.4.0",
+    "gulp-streamify": "^1.0.2",
     "gulp-uglify": "~0.2.x",
+    "gulp-umd": "~0.2.0",
     "gulp-util": "~2.2.x",
     "inquirer": "^0.5.1",
     "jasmine": "^2.3.2",
     "jasmine-core": "^2.3.4",
     "jquery": "^2.1.4",
+    "jshint-stylish": "~2.1.0",
     "karma": "^0.12.37",
+    "karma-browserify": "^5.0.1",
     "karma-chrome-launcher": "^0.2.0",
     "karma-coverage": "^0.5.1",
     "karma-firefox-launcher": "^0.1.6",
     "karma-jasmine": "^0.3.6",
     "karma-jasmine-html-reporter": "^0.1.8",
+    "merge-stream": "^1.0.0",
     "semver": "^3.0.1",
-    "gulp-umd": "~0.2.0"
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   },
   "spm": {
     "main": "Chart.js"
   },
   "dependencies": {
+    "chartjs-color": "^1.0.2",
     "moment": "^2.10.6"
   }
-}
+}

samples/AnimationCallbacks/progress-bar.html

@@ -2,18 +2,20 @@
 <html>
 <head>
 	<title> Animation Callbacks </title>
-    <script src="../../Chart.js"></script>
-    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
-        canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-        }
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div style="width: 100 %;">
-        <canvas id="canvas" style="width: 100 % ;height: 100 %"></canvas>
+    <div style="width: 75%;">
+        <canvas id="canvas"></canvas>
         <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
     </div>
     <br>
@@ -24,6 +26,8 @@
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 100);
         };
@@ -51,6 +55,10 @@
                 }]
             },
             options: {
+                title:{
+                    display:true,
+                    text:"Chart.js Line Chart - Animation Progress Bar"
+                },
                 animation: {
                     duration: 2000,
                     onProgress: function(animation) {
@@ -131,7 +139,8 @@
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 $.each(config.data.datasets, function(i, dataset) {
                     dataset.data.push(randomScalingFactor());

samples/bar-multi-axis.html

@@ -3,13 +3,20 @@
 
 <head>
     <title>Bar Chart Multi Axis</title>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width: 50%">
-        <canvas id="canvas" height="450" width="600"></canvas>
+    <div style="width: 75%">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
@@ -52,6 +59,10 @@
                 hoverMode: 'label',
                 hoverAnimationDuration: 400,
                 stacked: false,
+                title:{
+                    display:true,
+                    text:"Chart.js Bar Chart - Multi Axis"
+                },
                 scales: {
                     yAxes: [{
                         type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance

samples/bar-stacked.html

@@ -3,13 +3,20 @@
 
 <head>
     <title>Stacked Bar Chart</title>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width: 50%">
-        <canvas id="canvas" height="450" width="600"></canvas>
+    <div style="width: 75%">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
@@ -43,6 +50,10 @@
                 type: 'bar',
                 data: barChartData,
                 options: {
+                    title:{
+                        display:true,
+                        text:"Chart.js Bar Chart - Stacked"
+                    },
                     tooltips: {
                         mode: 'label'
                     },

samples/bar.html

@@ -3,31 +3,29 @@
 
 <head>
     <title>Bar Chart</title>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../Chart.js"></script>
-    <style type="text/css">
-        canvas {
-            border: 1px solid red;
-        }
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div id="container" style="width: 50%; height: 25%;">
-        <canvas id="canvas" height="450" width="600"></canvas>
+    <div id="container" style="width: 75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <button id="show">Show</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
         };
@@ -57,30 +55,32 @@
 
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myBar.generateLegend());
-        }
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myBar = new Chart(ctx, {
                 type: 'bar',
                 data: barChartData,
                 options: {
+                    // Elements options apply to all of the options unless overridden in a dataset
+                    // In this case, we are setting the border of each bar to be 2px wide and green
+                    elements: {
+                        rectangle: {
+                            borderWidth: 2,
+                            borderColor: 'rgb(0, 255, 0)',
+                            borderSkipped: 'bottom'
+                        }
+                    },
                     responsive: true,
                     legend: {
                         position: 'top',
                     },
                     title: {
                         display: true,
-                        text: 'Our 3 Favorite Datasets'
+                        text: 'Chart.js Bar Chart'
                     }
                 }
             });
 
-            updateLegend();
         };
 
         $('#randomizeData').click(function() {
@@ -93,7 +93,6 @@
 
             });
             window.myBar.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
@@ -109,12 +108,12 @@
 
             barChartData.datasets.push(newDataset);
             window.myBar.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (barChartData.datasets.length > 0) {
-                barChartData.labels.push('data #' + barChartData.labels.length);
+                var month = MONTHS[barChartData.labels.length % MONTHS.length];
+                barChartData.labels.push(month);
 
                 for (var index = 0; index < barChartData.datasets.length; ++index) {
                     //window.myBar.addData(randomScalingFactor(), index);
@@ -122,14 +121,12 @@
                 }
 
                 window.myBar.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             barChartData.datasets.splice(0, 1);
             window.myBar.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -140,11 +137,6 @@
             });
 
             window.myBar.update();
-            updateLegend();
-        });
-
-        $('#show').click(function() {
-            document.getElementById('container').style.display = '';
         });
     </script>
 </body>

samples/bubble.html

@@ -2,18 +2,20 @@
 <html>
 
 <head>
-    <title>Bar Chart</title>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../Chart.js"></script>
+    <title>Bubble Chart</title>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <style type="text/css">
-        canvas {
-            border: 1px solid red;
-        }
+    canvas{
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div id="container" style="width: 100%; height: 25%;">
+    <div id="container" style="width: 75%;">
         <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -21,13 +23,11 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <button id="show">Show</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var DEFAULT_DATASET_SIZE = 7;
+
+        var addedCount = 0;
+
         var randomScalingFactor = function() {
             return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
         };
@@ -107,15 +107,8 @@
                     r: Math.abs(randomScalingFactor()) / 5,
                 }]
             }]
-
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myChart.generateLegend());
-        }
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myChart = new Chart(ctx, {
@@ -123,10 +116,12 @@
                 data: bubbleChartData,
                 options: {
                     responsive: true,
+                    title:{
+                        display:true,
+                        text:'Chart.js Bubble Chart'
+                    },
                 }
             });
-
-            updateLegend();
         };
 
         $('#randomizeData').click(function() {
@@ -142,16 +137,17 @@
                 });
             });
             window.myChart.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
+            ++addedCount;
             var newDataset = {
+                label: "My added dataset " + addedCount,
                 backgroundColor: randomColor(),
                 data: []
             };
 
-            for (var index = 0; index < bubbleChartData.datasets[0].data.length; ++index) {
+            for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
                 newDataset.data.push({
                     x: randomScalingFactor(),
                     y: randomScalingFactor(),
@@ -161,14 +157,11 @@
 
             bubbleChartData.datasets.push(newDataset);
             window.myChart.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (bubbleChartData.datasets.length > 0) {
-
                 for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
-                    //window.myChart.addData(randomScalingFactor(), index);
                     bubbleChartData.datasets[index].data.push({
                         x: randomScalingFactor(),
                         y: randomScalingFactor(),
@@ -177,14 +170,12 @@
                 }
 
                 window.myChart.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             bubbleChartData.datasets.splice(0, 1);
             window.myChart.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -194,11 +185,6 @@
             });
 
             window.myChart.update();
-            updateLegend();
-        });
-
-        $('#show').click(function() {
-            document.getElementById('container').style.display = '';
         });
     </script>
 </body>

samples/combo-bar-line.html

@@ -3,13 +3,20 @@
 
 <head>
     <title>Combo Bar-Line Chart</title>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="../Chart.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width: 50%">
-        <canvas id="canvas" height="450" width="600"></canvas>
+    <div style="width: 75%">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
@@ -51,6 +58,10 @@
                 data: barChartData,
                 options: {
                     responsive: true,
+                    title: {
+                        display: true,
+                        text: 'Chart.js Combo Bar Line Chart'
+                    }
                 }
             });
         };

samples/doughnut.html

@@ -3,22 +3,19 @@
 
 <head>
     <title>Doughnut Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.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%;
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
     }
     </style>
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:100%">
+    <div id="canvas-holder" style="width:75%">
         <canvas id="chart-area" />
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -26,12 +23,6 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-            
-        </div>
-    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -111,23 +102,14 @@
             },
             title: {
                 display: true,
-                text: 'Our Favorite Datasets'
+                text: 'Chart.js Doughnut Chart'
             }
         }
     };
 
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myDoughnut.generateLegend());
-    }
-
     window.onload = function() {
         var ctx = document.getElementById("chart-area").getContext("2d");
         window.myDoughnut = new Chart(ctx, config);
-        console.log(window.myDoughnut);
-
-        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -142,7 +124,6 @@
         });
 
         window.myDoughnut.update();
-        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -159,7 +140,6 @@
 
         config.data.datasets.push(newDataset);
         window.myDoughnut.update();
-        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -172,14 +152,12 @@
             });
 
             window.myDoughnut.update();
-            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         config.data.datasets.splice(0, 1);
         window.myDoughnut.update();
-        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -191,7 +169,6 @@
         });
 
         window.myDoughnut.update();
-        updateLegend();
     });
     </script>
 </body>

samples/line-customTooltips.html

@@ -3,19 +3,14 @@
 
 <head>
   <title>Line Chart with Custom Tooltips</title>
-  <script src="../Chart.js"></script>
+  <script src="../dist/Chart.bundle.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style>
-    #canvas-holder1 {
-      width: 300px;
-      margin: 20px auto;
+    canvas{
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
     }
-
-    #canvas-holder2 {
-      width: 50%;
-      margin: 20px 25%;
-    }
-
     #chartjs-tooltip {
       opacity: 1;
       position: absolute;
@@ -38,16 +33,14 @@
 </head>
 
 <body>
-  <div id="canvas-holder1">
-    <canvas id="chart1" width="300" height="100" />
+  <div id="canvas-holder1" style="width:75%;">
+    <canvas id="chart1"/>
   </div>
   <script>
     window.count = 0;
     Chart.defaults.global.pointHitDetectionRadius = 1;
     var customTooltips = function(tooltip) {
 
-      console.log(window.count++, tooltip);
-
       // Tooltip Element
       var tooltipEl = $('#chartjs-tooltip');
 
@@ -131,6 +124,10 @@
         type: 'line',
         data: lineChartData,
         options: {
+          title:{
+            display:true,
+            text:'Chart.js Line Chart - Custom Tooltips'
+          },
           tooltips: {
             enabled: false,
             custom: customTooltips

samples/line-legend.html

@@ -3,18 +3,20 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
         canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
+            -moz-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
         }
     </style>
 </head>
 
 <body>
-    <div style="width:100%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <br>
     <br>
@@ -24,6 +26,7 @@
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
         };
@@ -70,21 +73,21 @@
                     xAxes: [{
                         display: true,
                         scaleLabel: {
-                            show: true,
+                            display: true,
                             labelString: 'Month'
                         }
                     }],
                     yAxes: [{
                         display: true,
                         scaleLabel: {
-                            show: true,
+                            display: true,
                             labelString: 'Value'
                         }
                     }]
                 },
                 title: {
                     display: true,
-                    text: 'Our 4 Favorite Datasets'
+                    text: 'Chart.js Line Chart - Legend'
                 }
             }
         };
@@ -98,21 +101,11 @@
             dataset.pointBorderWidth = 1;
         });
 
-        console.log(config.data);
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
-
-            updateLegend();
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myLine.generateLegend());
-        }
-
         $('#randomizeData').click(function() {
             $.each(config.data.datasets, function(i, dataset) {
                 dataset.data = dataset.data.map(function() {
@@ -122,7 +115,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
@@ -144,26 +136,24 @@
 
             config.data.datasets.push(newDataset);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 $.each(config.data.datasets, function(i, dataset) {
                     dataset.data.push(randomScalingFactor());
                 });
 
                 window.myLine.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             config.data.datasets.splice(0, 1);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -174,7 +164,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
     </script>
 </body>

samples/line-logarithmic.html

@@ -3,33 +3,29 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
     canvas {
-        -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
     }
     </style>
 </head>
 
 <body>
-    <div style="width:50%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
-    <br>
-    <br>
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-            
-        </div>
-    </div>
     <script>
+    var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
     var randomScalingFactor = function() {
         return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
     };
@@ -56,6 +52,10 @@
         },
         options: {
             responsive: true,
+            title:{
+                display:true,
+                text:'Chart.js Line Chart - Logarithmic'
+            },
             scales: {
                 xAxes: [{
                     display: true,
@@ -84,21 +84,11 @@
         dataset.pointBorderWidth = 1;
     });
 
-    console.log(config.data);
-
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myLine = new Chart(ctx, config);
-
-        updateLegend();
     };
 
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myLine.generateLegend());
-    }
-
     $('#randomizeData').click(function() {
         $.each(config.data.datasets, function(i, dataset) {
             dataset.data = dataset.data.map(function() {
@@ -108,7 +98,6 @@
         });
 
         window.myLine.update();
-        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -128,26 +117,24 @@
 
         config.data.datasets.push(newDataset);
         window.myLine.update();
-        updateLegend();
     });
 
     $('#addData').click(function() {
         if (config.data.datasets.length > 0) {
-            config.data.labels.push('dataset #' + config.data.labels.length);
+            var month = MONTHS[config.data.labels.length % MONTHS.length];
+            config.data.labels.push(month);
 
             for (var index = 0; index < config.data.datasets.length; ++index) {
                 config.data.datasets[index].data.push(randomScalingFactor());
             }
 
             window.myLine.update();
-            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         config.data.datasets.splice(0, 1);
         window.myLine.update();
-        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -158,7 +145,6 @@
         });
 
         window.myLine.update();
-        updateLegend();
     });
     </script>
 </body>

samples/line-multi-axis.html

@@ -3,13 +3,20 @@
 
 <head>
     <title>Line Chart Multiple Axes</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:50%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <script>
@@ -41,8 +48,6 @@
         dataset.pointBorderWidth = 1;
     });
 
-    console.log(lineChartData);
-
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myLine = Chart.Line(ctx, {
@@ -51,6 +56,10 @@
                 responsive: true,
                 hoverMode: 'label',
                 stacked: false,
+                title:{
+                    display:true,
+                    text:'Chart.js Line Chart - Multi Axis'
+                },
                 scales: {
                     xAxes: [{
                         display: true,

samples/line-skip-points.html

@@ -3,18 +3,20 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
-        canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-        }
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div style="width:100%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <br>
     <br>
@@ -23,12 +25,9 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 100);
             //return 0;
@@ -60,6 +59,10 @@
             },
             options: {
                 responsive: true,
+                title:{
+                    display:true,
+                    text:'Chart.js Line Chart - Skip Points'
+                },
                 tooltips: {
                     mode: 'label',
                 },
@@ -93,21 +96,11 @@
             dataset.pointBorderWidth = 1;
         });
 
-        console.log(config.data);
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
-
-            updateLegend();
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myLine.generateLegend());
-        }
-
         $('#randomizeData').click(function() {
             $.each(config.data.datasets, function(i, dataset) {
                 dataset.data = dataset.data.map(function() {
@@ -117,7 +110,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
@@ -137,26 +129,24 @@
 
             config.data.datasets.push(newDataset);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 $.each(config.data.datasets, function(i, dataset) {
                     dataset.data.push(randomScalingFactor());
                 });
 
                 window.myLine.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             config.data.datasets.splice(0, 1);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -167,7 +157,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
     </script>
 </body>

samples/line-stacked-area.html

@@ -3,18 +3,20 @@
 
 <head>
   <title>Line Chart</title>
-  <script src="../Chart.js"></script>
-  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+  <script src="../dist/Chart.bundle.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <style>
     canvas {
-      -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
     }
   </style>
 </head>
 
 <body>
-  <div style="width:100%;">
-    <canvas id="canvas" style="width:100%;height:100%"></canvas>
+  <div style="width:75%;">
+    <canvas id="canvas"></canvas>
   </div>
   <br>
   <br>
@@ -23,12 +25,9 @@
   <button id="removeDataset">Remove Dataset</button>
   <button id="addData">Add Data</button>
   <button id="removeData">Remove Data</button>
-  <div>
-    <h3>Legend</h3>
-    <div id="legendContainer">
-    </div>
-  </div>
   <script>
+    var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
     var randomScalingFactor = function() {
       return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
     };
@@ -59,6 +58,10 @@
       },
       options: {
         responsive: true,
+        title:{
+          display:true,
+          text:"Chart.js Line Chart - Stacked Area"
+        },
         tooltips: {
           mode: 'label',
         },
@@ -92,21 +95,11 @@
       dataset.pointBorderWidth = 1;
     });
 
-    console.log(config.data);
-
     window.onload = function() {
       var ctx = document.getElementById("canvas").getContext("2d");
       window.myLine = new Chart(ctx, config);
-
-      updateLegend();
     };
 
-    function updateLegend() {
-      $legendContainer = $('#legendContainer');
-      $legendContainer.empty();
-      $legendContainer.append(window.myLine.generateLegend());
-    }
-
     $('#randomizeData').click(function() {
       $.each(config.data.datasets, function(i, dataset) {
         dataset.data = dataset.data.map(function() {
@@ -116,7 +109,6 @@
       });
 
       window.myLine.update();
-      updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -136,26 +128,24 @@
 
       config.data.datasets.push(newDataset);
       window.myLine.update();
-      updateLegend();
     });
 
     $('#addData').click(function() {
       if (config.data.datasets.length > 0) {
-        config.data.labels.push('dataset #' + config.data.labels.length);
+        var month = MONTHS[config.data.labels.length % MONTHS.length];
+        config.data.labels.push(month);
 
         $.each(config.data.datasets, function(i, dataset) {
           dataset.data.push(randomScalingFactor());
         });
 
         window.myLine.update();
-        updateLegend();
       }
     });
 
     $('#removeDataset').click(function() {
       config.data.datasets.splice(0, 1);
       window.myLine.update();
-      updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -166,7 +156,6 @@
       });
 
       window.myLine.update();
-      updateLegend();
     });
   </script>
 </body>

samples/line-x-axis-filter.html

@@ -3,18 +3,20 @@
 
 <head>
     <title>Chart with xAxis Filtering</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
-        canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-        }
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div style="width:50%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <br>
     <br>
@@ -24,6 +26,8 @@
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
         };
@@ -37,7 +41,7 @@
         var config = {
             type: 'line',
             data: {
-                labels: ["January is a long month", "February", "March", "April", "May", "June", "July"],
+                labels: ["January", "February", "March", "April", "May", "June", "July"],
                 datasets: [{
                     label: "My First dataset",
                     data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
@@ -50,6 +54,10 @@
             },
             options: {
                 responsive: true,
+                title:{
+                    display:true,
+                    text:"Chart.js Line Chart - X-Axis Filter"
+                },
                 scales: {
                     xAxes: [{
                         display: true,
@@ -75,8 +83,6 @@
             dataset.pointBorderWidth = 1;
         });
 
-        console.log(config.data);
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
@@ -114,7 +120,8 @@
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 for (var index = 0; index < config.data.datasets.length; ++index) {
                     config.data.datasets[index].data.push(randomScalingFactor());

samples/line.html

@@ -3,18 +3,20 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
-        canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-        }
+    canvas{
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div style="width:100%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <br>
     <br>
@@ -24,12 +26,9 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+        
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 100);
             //return 0;
@@ -53,7 +52,7 @@
                 }, {
                     hidden: true,
                     label: 'hidden dataset',
-                    data: [],
+                    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                 }, {
                     label: "My Second dataset",
                     data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
@@ -61,6 +60,10 @@
             },
             options: {
                 responsive: true,
+                title:{
+                    display:true,
+                    text:'Chart.js Line Chart'
+                },
                 tooltips: {
                     mode: 'label',
                     callbacks: {
@@ -121,21 +124,11 @@
             dataset.pointBorderWidth = 1;
         });
 
-        console.log(config.data);
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
-
-            updateLegend();
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myLine.generateLegend());
-        }
-
         $('#randomizeData').click(function() {
             $.each(config.data.datasets, function(i, dataset) {
                 dataset.data = dataset.data.map(function() {
@@ -145,7 +138,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
 
         $('#changeDataObject').click(function() {
@@ -191,26 +183,24 @@
 
             config.data.datasets.push(newDataset);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 $.each(config.data.datasets, function(i, dataset) {
                     dataset.data.push(randomScalingFactor());
                 });
 
                 window.myLine.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             config.data.datasets.splice(0, 1);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -221,7 +211,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
     </script>
 </body>

samples/pie.html

@@ -3,7 +3,7 @@
 
 <head>
     <title>Pie Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 </head>
 

samples/polar-area.html

@@ -3,23 +3,24 @@
 
 <head>
     <title>Polar Area Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:100%">
+    <div id="canvas-holder" style="width:75%">
         <canvas id="chart-area"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-
-        </div>
-    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -65,7 +66,7 @@
             },
             title: {
                 display: true,
-                text: 'Our Favorite Dataset'
+                text: 'Chart.js Polar Area Chart'
             },
             scale: {
               ticks: {
@@ -80,15 +81,8 @@
     window.onload = function() {
         var ctx = document.getElementById("chart-area");
         window.myPolarArea = Chart.PolarArea(ctx, config);
-        updateLegend();
     };
 
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myPolarArea.generateLegend());
-    }
-
     $('#randomizeData').click(function() {
         $.each(config.data.datasets, function(i, piece) {
             $.each(piece.data, function(j, value) {
@@ -97,7 +91,6 @@
             });
         });
         window.myPolarArea.update();
-        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -110,7 +103,6 @@
             });
 
             window.myPolarArea.update();
-            updateLegend();
         }
     });
 
@@ -123,7 +115,6 @@
         });
 
         window.myPolarArea.update();
-        updateLegend();
     });
     </script>
 </body>

samples/radar-skip-points.html

@@ -3,25 +3,26 @@
 
 <head>
     <title>Radar Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:50%">
-        <canvas id="canvas" height="450" width="450"></canvas>
+    <div style="width:75%">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-            
-        </div>
-    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -62,6 +63,10 @@
             }]
         },
         options: {
+            title:{
+                display:true,
+                text:"Chart.js Radar Chart - Skip Points"
+            },
             elements: {
                 line: {
                     tension: 0.0,
@@ -74,15 +79,8 @@
         }
     };
 
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myRadar.generateLegend());
-    }
-
     window.onload = function() {
         window.myRadar = new Chart(document.getElementById("canvas"), config);
-        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -94,7 +92,6 @@
         });
 
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -114,7 +111,6 @@
 
         config.data.datasets.push(newDataset);
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -126,14 +122,12 @@
             });
 
             window.myRadar.update();
-            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         config.data.datasets.splice(0, 1);
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -144,7 +138,6 @@
         });
 
         window.myRadar.update();
-        updateLegend();
     });
     </script>
 </body>

samples/radar.html

@@ -3,12 +3,19 @@
 
 <head>
     <title>Radar Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:100%">
+    <div style="width:75%">
         <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -16,12 +23,6 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-
-        </div>
-    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -45,7 +46,7 @@
             }, {
                 label: 'Hidden dataset',
                 hidden: true,
-                data: [],
+                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
             }, {
                 label: "My Second dataset",
                 backgroundColor: "rgba(151,187,205,0.2)",
@@ -61,7 +62,7 @@
             },
             title: {
                 display: true,
-                text: 'Our 3 Favorite Datasets'
+                text: 'Chart.js Radar Chart'
             },
             scale: {
               reverse: false,
@@ -72,15 +73,8 @@
         }
     };
 
-    function updateLegend() {
-        $legendContainer = $('#legendContainer');
-        $legendContainer.empty();
-        $legendContainer.append(window.myRadar.generateLegend());
-    }
-
     window.onload = function() {
         window.myRadar = new Chart(document.getElementById("canvas"), config);
-        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -92,7 +86,6 @@
         });
 
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -112,7 +105,6 @@
 
         config.data.datasets.push(newDataset);
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -124,14 +116,12 @@
             });
 
             window.myRadar.update();
-            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         config.data.datasets.splice(0, 1);
         window.myRadar.update();
-        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -142,7 +132,6 @@
         });
 
         window.myRadar.update();
-        updateLegend();
     });
     </script>
 </body>

samples/scatter-logX.html

@@ -3,14 +3,21 @@
 
 <head>
     <title>Scatter Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:50%">
+    <div style="width:75%">
         <div>
-            <canvas id="canvas" height="450" width="600" style="border: 1px solid red;"></canvas>
+            <canvas id="canvas"></canvas>
         </div>
     </div>
     <script>
@@ -134,6 +141,10 @@
         window.myScatter = Chart.Scatter(ctx, {
         	data: scatterChartData,
         	options: {
+        		title: {
+	                display: true,
+	                text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
+	            },
 	            scales: {
 	            	xAxes: [{
 	            		type: 'logarithmic',

samples/scatter-multi-axis.html

@@ -3,14 +3,21 @@
 
 <head>
     <title>Scatter Chart Multi Axis</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:50%">
+    <div style="width:75%">
         <div>
-            <canvas id="canvas" height="450" width="600"></canvas>
+            <canvas id="canvas"></canvas>
         </div>
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -86,8 +93,6 @@
         dataset.pointBorderWidth = 1;
     });
 
-    console.log(scatterChartData);
-
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myScatter = Chart.Scatter(ctx, {
@@ -95,6 +100,10 @@
         	options: {
 	            responsive: true,
 	            hoverMode: 'single',
+            	title: {
+	                display: true,
+	                text: 'Chart.js Scatter Chart - Multi Axis'
+	            },
 	            scales: {
 	            	xAxes: [{
 	            		position: "bottom",
@@ -168,7 +177,7 @@
 		}, {
 			x: randomScalingFactor(),
 			y: randomScalingFactor(),
-		}]
+		}];
         window.myScatter.update();
     });
     </script>

samples/scatter.html

@@ -3,14 +3,21 @@
 
 <head>
     <title>Scatter Chart</title>
-    <script src="../Chart.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
 </head>
 
 <body>
-    <div style="width:50%">
+    <div style="width:75%">
         <div>
-            <canvas id="canvas" height="450" width="600"></canvas>
+            <canvas id="canvas"></canvas>
         </div>
     </div>
     <button id="randomizeData">Randomize Data</button>
@@ -82,13 +89,15 @@
             dataset.pointBorderWidth = 1;
         });
 
-        console.log(scatterChartData);
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myScatter = Chart.Scatter(ctx, {
                 data: scatterChartData,
                 options: {
+                    title: {
+                        display: true,
+                        text: 'Chart.js Scatter Chart'
+                    },
                     scales: {
                         xAxes: [{
                             position: 'top',

samples/timeScale/combo-time-scale.html

@@ -2,20 +2,22 @@
 <html>
 
 <head>
-	<title>Line Chart</title>
+	<title>Line Chart - Combo Time Scale</title>
 	<script src="../../node_modules/moment/min/moment.min.js"></script>
-	<script src="../../Chart.js"></script>
-	<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<style>
-		canvas {
-			-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-		}
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
 	</style>
 </head>
 
 <body>
-	<div style="width:100%;">
-		<canvas id="canvas" style="width:100%;height:100%"></canvas>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
 	</div>
 	<br>
 	<br>
@@ -24,11 +26,6 @@
 	<button id="removeDataset">Remove Dataset</button>
 	<button id="addData">Add Data</button>
 	<button id="removeData">Remove Data</button>
-	<div>
-		<h3>Legend</h3>
-		<div id="legendContainer">
-		</div>
-	</div>
 	<script>
 		var timeFormat = 'MM/DD/YYYY HH:mm';
 
@@ -74,7 +71,12 @@
 				}, ]
 			},
 			options: {
+				showLines: true,
 				responsive: true,
+                title:{
+                    display:true,
+                    text:"Chart.js Combo Time Scale"
+                },
 				scales: {
 					xAxes: [{
 						type: "time",
@@ -96,21 +98,12 @@
 			dataset.pointBorderWidth = 1;
 		});
 
-		console.log(config.data);
-
 		window.onload = function() {
 			var ctx = document.getElementById("canvas").getContext("2d");
 			window.myLine = new Chart(ctx, config);
 
-			updateLegend();
 		};
 
-		function updateLegend() {
-			$legendContainer = $('#legendContainer');
-			$legendContainer.empty();
-			$legendContainer.append(window.myLine.generateLegend());
-		}
-
 		$('#randomizeData').click(function() {
 			$.each(config.data.datasets, function(i, dataset) {
 				dataset.data = dataset.data.map(function() {
@@ -119,7 +112,6 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#addDataset').click(function() {
@@ -139,29 +131,23 @@
 
 			config.data.datasets.push(newDataset);
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#addData').click(function() {
 			if (config.data.datasets.length > 0) {
-				config.data.labels.push(
-					myLine.scales['x-axis-0'].labelMoments[myLine.scales['x-axis-0'].labelMoments.length - 1].add(1, 'day')
-					.format('MM/DD/YYYY')
-				);
+				config.data.labels.push(newDateString(config.data.labels.length));
 
 				for (var index = 0; index < config.data.datasets.length; ++index) {
 					config.data.datasets[index].data.push(randomScalingFactor());
 				}
 
 				window.myLine.update();
-				updateLegend();
 			}
 		});
 
 		$('#removeDataset').click(function() {
 			config.data.datasets.splice(0, 1);
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#removeData').click(function() {
@@ -172,7 +158,6 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 	</script>
 </body>

samples/timeScale/line-time-point-data.html

@@ -4,29 +4,26 @@
 <head>
 	<title>Time Scale Point Data</title>
 	<script src="../../node_modules/moment/min/moment.min.js"></script>
-	<script src="../../Chart.js"></script>
-	<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<style>
-		canvas {
-			-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-		}
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
 	</style>
 </head>
 
 <body>
-	<div style="width:100%;">
-		<canvas id="canvas" style="width:100%;height:100%"></canvas>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
 	</div>
 	<br>
 	<br>
 	<button id="randomizeData">Randomize Data</button>
 	<button id="addData">Add Data</button>
 	<button id="removeData">Remove Data</button>
-	<div>
-		<h3>Legend</h3>
-		<div id="legendContainer">
-		</div>
-	</div>
 	<script>
 		function randomScalingFactor() {
 			return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
@@ -87,6 +84,10 @@
 			},
 			options: {
 				responsive: true,
+                title:{
+                    display:true,
+                    text:"Chart.js Time Point Data"
+                },
 				scales: {
 					xAxes: [{
 						type: "time",
@@ -119,15 +120,8 @@
 			var ctx = document.getElementById("canvas").getContext("2d");
 			window.myLine = new Chart(ctx, config);
 
-			updateLegend();
 		};
 
-		function updateLegend() {
-			$legendContainer = $('#legendContainer');
-			$legendContainer.empty();
-			$legendContainer.append(window.myLine.generateLegend());
-		}
-
 		$('#randomizeData').click(function() {
 			$.each(config.data.datasets, function(i, dataset) {
 				$.each(dataset.data, function(j, dataObj) {
@@ -136,12 +130,12 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#addData').click(function() {
 			if (config.data.datasets.length > 0) {
-				var newTime = myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1]
+				var lastTime = myLine.scales['x-axis-0'].labelMoments[0].length ? myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1] : moment();
+				var newTime = lastTime
 					.clone()
 					.add(1, 'day')
 					.format('MM/DD/YYYY HH:mm');
@@ -154,7 +148,6 @@
 				}
 
 				window.myLine.update();
-				updateLegend();
 			}
 		});
 
@@ -164,7 +157,6 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 	</script>
 </body>

samples/timeScale/line-time-scale.html

@@ -4,18 +4,20 @@
 <head>
 	<title>Line Chart</title>
 	<script src="../../node_modules/moment/min/moment.min.js"></script>
-	<script src="../../Chart.js"></script>
-	<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 	<style>
-		canvas {
-			-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-		}
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
 	</style>
 </head>
 
 <body>
-	<div style="width:100%;">
-		<canvas id="canvas" style="width:100%;height:100%"></canvas>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
 	</div>
 	<br>
 	<br>
@@ -24,14 +26,9 @@
 	<button id="removeDataset">Remove Dataset</button>
 	<button id="addData">Add Data</button>
 	<button id="removeData">Remove Data</button>
-	<div>
-		<h3>Legend</h3>
-		<div id="legendContainer">
-		</div>
-	</div>
 	<script>
 		var timeFormat = 'MM/DD/YYYY HH:mm';
-		
+
 		function randomScalingFactor() {
 			return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
 		}
@@ -47,7 +44,7 @@
 		function newDate(days) {
 			return moment().add(days, 'd').toDate();
 		}
-		
+
 		function newDateString(days) {
 			return moment().add(days, 'd').format(timeFormat);
 		}
@@ -88,6 +85,10 @@
 			},
 			options: {
 				responsive: true,
+                title:{
+                    display:true,
+                    text:"Chart.js Time Scale"
+                },
 				scales: {
 					xAxes: [{
 						type: "time",
@@ -119,21 +120,12 @@
 			dataset.pointBorderWidth = 1;
 		});
 
-		console.log(config.data);
-
 		window.onload = function() {
 			var ctx = document.getElementById("canvas").getContext("2d");
 			window.myLine = new Chart(ctx, config);
 
-			updateLegend();
 		};
 
-		function updateLegend() {
-			$legendContainer = $('#legendContainer');
-			$legendContainer.empty();
-			$legendContainer.append(window.myLine.generateLegend());
-		}
-
 		$('#randomizeData').click(function() {
 			$.each(config.data.datasets, function(i, dataset) {
 				$.each(dataset.data, function(j, dataObj) {
@@ -146,7 +138,6 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#addDataset').click(function() {
@@ -166,7 +157,6 @@
 
 			config.data.datasets.push(newDataset);
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#addData').click(function() {
@@ -178,21 +168,19 @@
 						config.data.datasets[index].data.push({
 							x: newDate(config.data.datasets[index].data.length),
 							y: randomScalingFactor(),
-						})
+						});
 					} else {
 						config.data.datasets[index].data.push(randomScalingFactor());
 					}
 				}
 
 				window.myLine.update();
-				updateLegend();
 			}
 		});
 
 		$('#removeDataset').click(function() {
 			config.data.datasets.splice(0, 1);
 			window.myLine.update();
-			updateLegend();
 		});
 
 		$('#removeData').click(function() {
@@ -203,7 +191,6 @@
 			});
 
 			window.myLine.update();
-			updateLegend();
 		});
 	</script>
 </body>

samples/tooltip-hooks.html

@@ -3,18 +3,20 @@
 
 <head>
     <title>Line Chart</title>
-    <script src="../Chart.js"></script>
-    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <style>
-        canvas {
-            -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
-        }
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div style="width:100%;">
-        <canvas id="canvas" style="width:100%;height:100%"></canvas>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <br>
     <br>
@@ -23,12 +25,9 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
         };
@@ -55,6 +54,10 @@
             },
             options: {
                 responsive: true,
+                title:{
+                    display:true,
+                    text:"Chart.js Line Chart - Tooltip Hooks"
+                },
                 tooltips: {
                     mode: 'label',
                     callbacks: {
@@ -115,15 +118,8 @@
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myLine = new Chart(ctx, config);
 
-            updateLegend();
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myLine.generateLegend());
-        }
-
         $('#randomizeData').click(function() {
             $.each(config.data.datasets, function(i, dataset) {
                 dataset.data = dataset.data.map(function() {
@@ -133,7 +129,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
@@ -153,26 +148,24 @@
 
             config.data.datasets.push(newDataset);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (config.data.datasets.length > 0) {
-                config.data.labels.push('dataset #' + config.data.labels.length);
+                var month = MONTHS[config.data.labels.length % MONTHS.length];
+                config.data.labels.push(month);
 
                 $.each(config.data.datasets, function(i, dataset) {
                     dataset.data.push(randomScalingFactor());
                 });
 
                 window.myLine.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             config.data.datasets.splice(0, 1);
             window.myLine.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -183,7 +176,6 @@
             });
 
             window.myLine.update();
-            updateLegend();
         });
     </script>
 </body>

src/chart.js

@@ -0,0 +1,52 @@
+/*!
+ * Chart.js
+ * http://chartjs.org/
+ * Version: {{ version }}
+ *
+ * Copyright 2015 Nick Downie
+ * Released under the MIT license
+ * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
+ */
+
+
+var Chart = require('./core/core.js')();
+
+require('./core/core.helpers')(Chart);
+require('./core/core.element')(Chart);
+require('./core/core.animation')(Chart);
+require('./core/core.controller')(Chart);
+require('./core/core.datasetController')(Chart);
+require('./core/core.layoutService')(Chart);
+require('./core/core.legend')(Chart);
+require('./core/core.scale')(Chart);
+require('./core/core.scaleService')(Chart);
+require('./core/core.title')(Chart);
+require('./core/core.tooltip')(Chart);
+
+require('./controllers/controller.bar')(Chart);
+require('./controllers/controller.bubble')(Chart);
+require('./controllers/controller.doughnut')(Chart);
+require('./controllers/controller.line')(Chart);
+require('./controllers/controller.polarArea')(Chart);
+require('./controllers/controller.radar')(Chart);
+
+require('./scales/scale.category')(Chart);
+require('./scales/scale.linear')(Chart);
+require('./scales/scale.logarithmic')(Chart);
+require('./scales/scale.radialLinear')(Chart);
+require('./scales/scale.time')(Chart);
+
+require('./elements/element.arc')(Chart);
+require('./elements/element.line')(Chart);
+require('./elements/element.point')(Chart);
+require('./elements/element.rectangle')(Chart);
+
+require('./charts/Chart.Bar')(Chart);
+require('./charts/Chart.Bubble')(Chart);
+require('./charts/Chart.Doughnut')(Chart);
+require('./charts/Chart.Line')(Chart);
+require('./charts/Chart.PolarArea')(Chart);
+require('./charts/Chart.Radar')(Chart);
+require('./charts/Chart.Scatter')(Chart);
+
+window.Chart = module.exports = Chart;

src/charts/Chart.Bar.js

@@ -1,9 +1,6 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
+module.exports = function(Chart) {
 
 	Chart.Bar = function(context, config) {
 		config.type = 'bar';
@@ -11,4 +8,4 @@
 		return new Chart(context, config);
 	};
 
-}).call(this);
+};

src/charts/Chart.Bubble.js

@@ -1,48 +1,10 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
-
-	var defaultConfig = {
-		hover: {
-			mode: 'single',
-		},
-
-		scales: {
-			xAxes: [{
-				type: "linear", // bubble should probably use a linear scale by default
-				position: "bottom",
-				id: "x-axis-0", // need an ID so datasets can reference the scale
-			}],
-			yAxes: [{
-				type: "linear",
-				position: "left",
-				id: "y-axis-0",
-			}],
-		},
-
-		tooltips: {
-			callbacks: {
-				title: function(tooltipItems, data) {
-					// Title doesn't make sense for scatter since we format the data as a point
-					return '';
-				},
-				label: function(tooltipItem, data) {
-					return '(' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
-				}
-			}
-		},
-
-	};
-
-	// Register the default config for this type
-	Chart.defaults.bubble = defaultConfig;
+module.exports = function(Chart) {
 
 	Chart.Bubble = function(context, config) {
 		config.type = 'bubble';
 		return new Chart(context, config);
 	};
 
-}).call(this);
+};

src/charts/Chart.Doughnut.js

@@ -1,14 +1,11 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
+module.exports = function(Chart) {
 
 	Chart.Doughnut = function(context, config) {
 		config.type = 'doughnut';
 
 		return new Chart(context, config);
 	};
-	
-}).call(this);
+
+};

src/charts/Chart.Line.js

@@ -1,14 +1,11 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
+module.exports = function(Chart) {
 
 	Chart.Line = function(context, config) {
 		config.type = 'line';
 
 		return new Chart(context, config);
 	};
-	
-}).call(this);
+
+};

src/charts/Chart.PolarArea.js

@@ -1,14 +1,11 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
+module.exports = function(Chart) {
 
 	Chart.PolarArea = function(context, config) {
 		config.type = 'polarArea';
 
 		return new Chart(context, config);
 	};
-	
-}).call(this);
+
+};

src/charts/Chart.Radar.js

@@ -1,12 +1,11 @@
-(function() {
-	"use strict";
+"use strict";
+
+module.exports = function(Chart) {
 
-	var root = this;
-	var Chart = root.Chart;
 	var helpers = Chart.helpers;
 
 	var defaultConfig = {
-		aspectRatio: 1,
+		aspectRatio: 1
 	};
 
 	Chart.Radar = function(context, config) {
@@ -15,5 +14,5 @@
 
 		return new Chart(context, config);
 	};
-	
-}).call(this);
+
+};

src/charts/Chart.Scatter.js

@@ -1,26 +1,23 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this;
-	var Chart = root.Chart;
-	var helpers = Chart.helpers;
+module.exports = function(Chart) {
 
 	var defaultConfig = {
 		hover: {
-			mode: 'single',
+			mode: 'single'
 		},
 
 		scales: {
 			xAxes: [{
 				type: "linear", // scatter should not use a category axis
 				position: "bottom",
-				id: "x-axis-1", // need an ID so datasets can reference the scale
+				id: "x-axis-1" // need an ID so datasets can reference the scale
 			}],
 			yAxes: [{
 				type: "linear",
 				position: "left",
-				id: "y-axis-1",
-			}],
+				id: "y-axis-1"
+			}]
 		},
 
 		tooltips: {
@@ -33,7 +30,7 @@
 					return '(' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
 				}
 			}
-		},
+		}
 	};
 
 	// Register the default config for this type
@@ -46,5 +43,5 @@
 		config.type = 'scatter';
 		return new Chart(context, config);
 	};
-	
-}).call(this);
+
+};

src/controllers/controller.bar.js

@@ -1,10 +1,8 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.bar = {
 		hover: {
@@ -21,20 +19,20 @@
 
 				// grid line settings
 				gridLines: {
-					offsetGridLines: true,
-				},
+					offsetGridLines: true
+				}
 			}],
 			yAxes: [{
-				type: "linear",
-			}],
-		},
+				type: "linear"
+			}]
+		}
 	};
 
 	Chart.controllers.bar = Chart.DatasetController.extend({
 		initialize: function(chart, datasetIndex) {
 			Chart.DatasetController.prototype.initialize.call(this, chart, datasetIndex);
 
-			// Use this to indicate that this is a bar dataset. 
+			// Use this to indicate that this is a bar dataset.
 			this.getDataset().bar = true;
 		},
 		// Get the number of datasets that display bars. We use this to correctly calculate the bar width
@@ -44,7 +42,7 @@
 				if (helpers.isDatasetVisible(dataset) && dataset.bar) {
 					++barCount;
 				}
-			}, this);
+			});
 			return barCount;
 		},
 
@@ -54,7 +52,7 @@
 				this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Rectangle({
 					_chart: this.chart.chart,
 					_datasetIndex: this.index,
-					_index: index,
+					_index: index
 				});
 			}, this);
 		},
@@ -63,7 +61,7 @@
 			var rectangle = new Chart.elements.Rectangle({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			var numBars = this.getBarCount();
@@ -115,12 +113,13 @@
 					datasetLabel: this.getDataset().label,
 
 					// Appearance
-					base: this.calculateBarBase(this.index, index),
+					base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
 					width: this.calculateBarWidth(numBars),
 					backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
+					borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
 					borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
-					borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),
-				},
+					borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
+				}
 			});
 			rectangle.pivot();
 		},
@@ -139,14 +138,14 @@
 				if (value < 0) {
 					for (var i = 0; i < datasetIndex; i++) {
 						var negDS = this.chart.data.datasets[i];
-						if (helpers.isDatasetVisible(negDS) && negDS.yAxisID === yScale.id) {
+						if (helpers.isDatasetVisible(negDS) && negDS.yAxisID === yScale.id && negDS.bar) {
 							base += negDS.data[index] < 0 ? negDS.data[index] : 0;
 						}
 					}
 				} else {
 					for (var j = 0; j < datasetIndex; j++) {
 						var posDS = this.chart.data.datasets[j];
-						if (helpers.isDatasetVisible(posDS) && posDS.yAxisID === yScale.id) {
+						if (helpers.isDatasetVisible(posDS) && posDS.yAxisID === yScale.id && posDS.bar) {
 							base += posDS.data[index] > 0 ? posDS.data[index] : 0;
 						}
 					}
@@ -195,21 +194,14 @@
 				categorySpacing: categorySpacing,
 				fullBarWidth: fullBarWidth,
 				barWidth: barWidth,
-				barSpacing: barSpacing,
+				barSpacing: barSpacing
 			};
 		},
 
 		calculateBarWidth: function() {
-
 			var xScale = this.getScaleForId(this.getDataset().xAxisID);
 			var ruler = this.getRuler();
-
-			if (xScale.options.stacked) {
-				return ruler.categoryWidth;
-			}
-
-			return ruler.barWidth;
-
+			return xScale.options.stacked ? ruler.categoryWidth : ruler.barWidth;
 		},
 
 		// Get bar index from the given dataset index accounting for the fact that not all bars are visible
@@ -261,7 +253,7 @@
 
 				for (var i = 0; i < datasetIndex; i++) {
 					var ds = this.chart.data.datasets[i];
-					if (helpers.isDatasetVisible(ds)) {
+					if (helpers.isDatasetVisible(ds) && ds.bar && ds.yAxisID === yScale.id) {
 						if (ds.data[index] < 0) {
 							sumNeg += ds.data[index] || 0;
 						} else {
@@ -285,7 +277,10 @@
 		draw: function(ease) {
 			var easingDecimal = ease || 1;
 			helpers.each(this.getDataset().metaData, function(rectangle, index) {
-				rectangle.transition(easingDecimal).draw();
+				var d = this.getDataset().data[index];
+				if (d !== null && d !== undefined && !isNaN(d)) {
+					rectangle.transition(easingDecimal).draw();
+				}
 			}, this);
 		},
 
@@ -308,7 +303,4 @@
 		}
 
 	});
-
-
-
-}).call(this);
+};

src/controllers/controller.bubble.js

@@ -1,10 +1,8 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.bubble = {
 		hover: {
@@ -15,19 +13,28 @@
 			xAxes: [{
 				type: "linear", // bubble should probably use a linear scale by default
 				position: "bottom",
-				id: "x-axis-0", // need an ID so datasets can reference the scale
+				id: "x-axis-0" // need an ID so datasets can reference the scale
 			}],
 			yAxes: [{
 				type: "linear",
 				position: "left",
-				id: "y-axis-0",
-			}],
+				id: "y-axis-0"
+			}]
 		},
 
 		tooltips: {
-			template: "(<%= value.x %>, <%= value.y %>, <%= value.r %>)",
-			multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= value.x %>, <%= value.y %>, <%= value.r %>)",
-		},
+			callbacks: {
+				title: function(tooltipItems, data) {
+					// Title doesn't make sense for scatter since we format the data as a point
+					return '';
+				},
+				label: function(tooltipItem, data) {
+					var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
+					var dataPoint = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+					return datasetLabel + ': (' + dataPoint.x + ', ' + dataPoint.y + ', ' + dataPoint.r + ')';
+				}
+			}
+		}
 	};
 
 
@@ -40,7 +47,7 @@
 				this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
 					_chart: this.chart.chart,
 					_datasetIndex: this.index,
-					_index: index,
+					_index: index
 				});
 			}, this);
 		},
@@ -49,7 +56,7 @@
 			var point = new Chart.elements.Point({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			// Reset the point
@@ -113,8 +120,8 @@
 					borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth),
 
 					// Tooltip
-					hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
-				},
+					hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+				}
 			});
 
 			point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
@@ -133,7 +140,7 @@
 			helpers.each(this.getDataset().metaData, function(point, index) {
 				point.transition(easingDecimal);
 				point.draw();
-			}, this);
+			});
 
 		},
 
@@ -158,4 +165,4 @@
 			point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.point.borderWidth);
 		}
 	});
-}).call(this);
+};

src/controllers/controller.doughnut.js

@@ -1,17 +1,15 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		//Cache a local reference to Chart.helpers
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	Chart.defaults.doughnut = {
 		animation: {
 			//Boolean - Whether we animate the rotation of the Doughnut
 			animateRotate: true,
 			//Boolean - Whether we animate scaling the Doughnut from the centre
-			animateScale: false,
+			animateScale: false
 		},
 		aspectRatio: 1,
 		hover: {
@@ -37,16 +35,20 @@
 		legend: {
 			labels: {
 				generateLabels: function(data) {
-					return data.labels.map(function(label, i) {
-						return {
-							text: label,
-							fillStyle: data.datasets[0].backgroundColor[i],
-							hidden: isNaN(data.datasets[0].data[i]),
+					if (data.labels.length && data.datasets.length) {
+						return data.labels.map(function(label, i) {
+							return {
+								text: label,
+								fillStyle: data.datasets[0].backgroundColor[i],
+								hidden: isNaN(data.datasets[0].data[i]),
 
-							// Extra data used for toggling the correct item
-							index: i
-						};
-					});
+								// Extra data used for toggling the correct item
+								index: i
+							};
+						});
+					} else {
+						return [];
+					}
 				}
 			},
 			onClick: function(e, legendItem) {
@@ -72,7 +74,9 @@
 		// Need to override these to give a nice default
 		tooltips: {
 			callbacks: {
-				title: function() { return '';},
+				title: function() {
+					return '';
+				},
 				label: function(tooltipItem, data) {
 					return data.labels[tooltipItem.index] + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
 				}
@@ -97,7 +101,7 @@
 				this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Arc({
 					_chart: this.chart.chart,
 					_datasetIndex: this.index,
-					_index: index,
+					_index: index
 				});
 			}, this);
 		},
@@ -106,7 +110,7 @@
 			var arc = new Chart.elements.Arc({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			if (colorForNewElement && helpers.isArray(this.getDataset().backgroundColor)) {
@@ -121,7 +125,9 @@
 		},
 
 		getVisibleDatasetCount: function getVisibleDatasetCount() {
-			return helpers.where(this.chart.data.datasets, function(ds) { return helpers.isDatasetVisible(ds); }).length;
+			return helpers.where(this.chart.data.datasets, function(ds) {
+				return helpers.isDatasetVisible(ds);
+			}).length;
 		},
 
 		// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
@@ -161,16 +167,11 @@
 		updateElement: function(arc, index, reset) {
 			var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
 			var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
-
-			var resetModel = {
-				x: centerX,
-				y: centerY,
-				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
-				endAngle: Math.PI * -0.5,
-				circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
-				outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
-				innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius
-			};
+			var startAngle = Math.PI * -0.5; // non reset case handled later
+			var endAngle = Math.PI * -0.5; // non reset case handled later
+			var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]);
+			var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
+			var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
 
 			helpers.extend(arc, {
 				// Utility
@@ -179,12 +180,14 @@
 				_index: index,
 
 				// Desired view properties
-				_model: reset ? resetModel : {
+				_model: {
 					x: centerX,
 					y: centerY,
-					circumference: this.calculateCircumference(this.getDataset().data[index]),
-					outerRadius: this.outerRadius,
-					innerRadius: this.innerRadius,
+					startAngle: startAngle,
+					endAngle: endAngle,
+					circumference: circumference,
+					outerRadius: outerRadius,
+					innerRadius: innerRadius,
 
 					backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
 					hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
@@ -192,9 +195,10 @@
 					borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
 					label: helpers.getValueAtIndexOrDefault(this.getDataset().label, index, this.chart.data.labels[index])
-				},
+				}
 			});
 
+			// Set correct angles if not resetting
 			if (!reset) {
 
 				if (index === 0) {
@@ -204,12 +208,6 @@
 				}
 
 				arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
-
-
-				//Check to see if it's the last arc, if not get the next and update its start angle
-				if (index < this.getDataset().data.length - 1) {
-					this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
-				}
 			}
 
 			arc.pivot();
@@ -219,7 +217,7 @@
 			var easingDecimal = ease || 1;
 			helpers.each(this.getDataset().metaData, function(arc, index) {
 				arc.transition(easingDecimal).draw();
-			}, this);
+			});
 		},
 
 		setHoverStyle: function(arc) {
@@ -246,9 +244,6 @@
 			} else {
 				return 0;
 			}
-		},
-
+		}
 	});
-
-
-}).call(this);
+};

src/controllers/controller.line.js

@@ -1,12 +1,12 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.line = {
+		showLines: true,
+
 		hover: {
 			mode: "label"
 		},
@@ -19,8 +19,8 @@
 			yAxes: [{
 				type: "linear",
 				id: 'y-axis-0'
-			}],
-		},
+			}]
+		}
 	};
 
 
@@ -32,14 +32,14 @@
 			this.getDataset().metaDataset = this.getDataset().metaDataset || new Chart.elements.Line({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_points: this.getDataset().metaData,
+				_points: this.getDataset().metaData
 			});
 
 			helpers.each(this.getDataset().data, function(value, index) {
 				this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({
 					_chart: this.chart.chart,
 					_datasetIndex: this.index,
-					_index: index,
+					_index: index
 				});
 			}, this);
 		},
@@ -48,7 +48,7 @@
 			var point = new Chart.elements.Point({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			// Reset the point
@@ -58,7 +58,8 @@
 			this.getDataset().metaData.splice(index, 0, point);
 
 			// Make sure bezier control points are updated
-			this.updateBezierControlPoints();
+			if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
+				this.updateBezierControlPoints();
 		},
 
 		update: function update(reset) {
@@ -78,14 +79,14 @@
 			}
 
 			// Update Line
-			helpers.extend(line, {
+			if (this.chart.options.showLines) {
 				// Utility
-				_scale: yScale,
-				_datasetIndex: this.index,
+				line._scale = yScale;
+				line._datasetIndex = this.index;
 				// Data
-				_children: points,
+				line._children = points;
 				// Model
-				_model: {
+				line._model = {
 					// Appearance
 					tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
 					backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
@@ -99,17 +100,18 @@
 					// Scale
 					scaleTop: yScale.top,
 					scaleBottom: yScale.bottom,
-					scaleZero: scaleBase,
-				},
-			});
-			line.pivot();
+					scaleZero: scaleBase
+				};
+				line.pivot();
+			}
 
 			// Update Points
 			helpers.each(points, function(point, index) {
 				this.updateElement(point, index, reset);
 			}, this);
 
-			this.updateBezierControlPoints();
+			if (this.chart.options.showLines && this.chart.options.elements.line.tension !== 0)
+				this.updateBezierControlPoints();
 		},
 
 		getPointBackgroundColor: function(point, index) {
@@ -168,28 +170,27 @@
 				scaleBase = yScale.getPixelForValue(0);
 			}
 
-			helpers.extend(point, {
-				// Utility
-				_chart: this.chart.chart,
-				_xScale: xScale,
-				_yScale: yScale,
-				_datasetIndex: this.index,
-				_index: index,
+			// Utility
+			point._chart = this.chart.chart;
+			point._xScale = xScale;
+			point._yScale = yScale;
+			point._datasetIndex = this.index;
+			point._index = index;
 
-				// Desired view properties
-				_model: {
-					x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
-					y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
-					// Appearance
-					tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
-					radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
-					backgroundColor: this.getPointBackgroundColor(point, index),
-					borderColor: this.getPointBorderColor(point, index),
-					borderWidth: this.getPointBorderWidth(point, index),
-					// Tooltip
-					hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
-				},
-			});
+			// Desired view properties
+			point._model = {
+				x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+				y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo),
+				// Appearance
+				tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+				radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius),
+				pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
+				backgroundColor: this.getPointBackgroundColor(point, index),
+				borderColor: this.getPointBorderColor(point, index),
+				borderWidth: this.getPointBorderWidth(point, index),
+				// Tooltip
+				hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+			};
 
 			point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
 		},
@@ -204,9 +205,9 @@
 				var sumPos = 0,
 					sumNeg = 0;
 
-				for (var i = this.chart.data.datasets.length - 1; i > datasetIndex; i--) {
+				for (var i = 0; i < datasetIndex; i++) {
 					var ds = this.chart.data.datasets[i];
-					if (helpers.isDatasetVisible(ds)) {
+					if (ds.type === 'line' && helpers.isDatasetVisible(ds)) {
 						if (ds.data[index] < 0) {
 							sumNeg += ds.data[index] || 0;
 						} else {
@@ -220,8 +221,6 @@
 				} else {
 					return yScale.getPixelForValue(sumPos + value);
 				}
-
-				return yScale.getPixelForValue(value);
 			}
 
 			return yScale.getPixelForValue(value);
@@ -253,12 +252,13 @@
 			var easingDecimal = ease || 1;
 
 			// Transition Point Locations
-			helpers.each(this.getDataset().metaData, function(point, index) {
+			helpers.each(this.getDataset().metaData, function(point) {
 				point.transition(easingDecimal);
-			}, this);
+			});
 
 			// Transition and Draw the line
-			this.getDataset().metaDataset.transition(easingDecimal).draw();
+			if (this.chart.options.showLines)
+				this.getDataset().metaDataset.transition(easingDecimal).draw();
 
 			// Draw the points
 			helpers.each(this.getDataset().metaData, function(point) {
@@ -287,4 +287,4 @@
 			point._model.borderWidth = this.getPointBorderWidth(point, index);
 		}
 	});
-}).call(this);
+};

src/controllers/controller.polarArea.js

@@ -1,17 +1,14 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		//Cache a local reference to Chart.helpers
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
 
+	var helpers = Chart.helpers;
 
 	Chart.defaults.polarArea = {
 
 		scale: {
 			type: "radialLinear",
-			lineArc: true, // so that lines are circular
+			lineArc: true // so that lines are circular
 		},
 
 		//Boolean - Whether to animate the rotation of the chart
@@ -39,16 +36,20 @@
 		legend: {
 			labels: {
 				generateLabels: function(data) {
-					return data.labels.map(function(label, i) {
-						return {
-							text: label,
-							fillStyle: data.datasets[0].backgroundColor[i],
-							hidden: isNaN(data.datasets[0].data[i]),
+					if (data.labels.length && data.datasets.length) {
+						return data.labels.map(function(label, i) {
+							return {
+								text: label,
+								fillStyle: data.datasets[0].backgroundColor[i],
+								hidden: isNaN(data.datasets[0].data[i]),
 
-							// Extra data used for toggling the correct item
-							index: i
-						};
-					});
+								// Extra data used for toggling the correct item
+								index: i
+							};
+						});
+					} else {
+						return [];
+					}
 				}
 			},
 			onClick: function(e, legendItem) {
@@ -71,7 +72,9 @@
 		// Need to override these to give a nice default
 		tooltips: {
 			callbacks: {
-				title: function() { return ''; },
+				title: function() {
+					return '';
+				},
 				label: function(tooltipItem, data) {
 					return data.labels[tooltipItem.index] + ': ' + tooltipItem.yLabel;
 				}
@@ -89,7 +92,7 @@
 				this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Arc({
 					_chart: this.chart.chart,
 					_datasetIndex: this.index,
-					_index: index,
+					_index: index
 				});
 			}, this);
 		},
@@ -98,7 +101,7 @@
 			var arc = new Chart.elements.Arc({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			// Reset the point
@@ -108,7 +111,9 @@
 			this.getDataset().metaData.splice(index, 0, arc);
 		},
 		getVisibleDatasetCount: function getVisibleDatasetCount() {
-			return helpers.where(this.chart.data.datasets, function(ds) { return helpers.isDatasetVisible(ds); }).length;
+			return helpers.where(this.chart.data.datasets, function(ds) {
+				return helpers.isDatasetVisible(ds);
+			}).length;
 		},
 
 		update: function update(reset) {
@@ -135,7 +140,7 @@
 			var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
 			var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
 
-			// If there is NaN data before us, we need to calculate the starting angle correctly. 
+			// If there is NaN data before us, we need to calculate the starting angle correctly.
 			// We could be way more efficient here, but its unlikely that the polar area chart will have a lot of data
 			var notNullIndex = 0;
 			for (var i = 0; i < index; ++i) {
@@ -156,7 +161,6 @@
 				endAngle: this.chart.options.animateRotate ? Math.PI * -0.5 : endAngle,
 
 				backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
-				hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
 				borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
 				borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
@@ -180,12 +184,11 @@
 					endAngle: endAngle,
 
 					backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
-					hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
 					borderWidth: arc.custom && arc.custom.borderWidth ? arc.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.arc.borderWidth),
 					borderColor: arc.custom && arc.custom.borderColor ? arc.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.arc.borderColor),
 
 					label: helpers.getValueAtIndexOrDefault(this.chart.data.labels, index, this.chart.data.labels[index])
-				},
+				}
 			});
 
 			arc.pivot();
@@ -195,7 +198,7 @@
 			var easingDecimal = ease || 1;
 			helpers.each(this.getDataset().metaData, function(arc, index) {
 				arc.transition(easingDecimal).draw();
-			}, this);
+			});
 		},
 
 		setHoverStyle: function(arc) {
@@ -204,7 +207,7 @@
 
 			arc._model.backgroundColor = arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.color(arc._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
 			arc._model.borderColor = arc.custom && arc.custom.hoverBorderColor ? arc.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.color(arc._model.borderColor).saturate(0.5).darken(0.1).rgbString());
-			arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.borderWidth, index, arc._model.borderWidth);
+			arc._model.borderWidth = arc.custom && arc.custom.hoverBorderWidth ? arc.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.hoverBorderWidth, index, arc._model.borderWidth);
 		},
 
 		removeHoverStyle: function(arc) {
@@ -220,7 +223,7 @@
 			if (isNaN(value)) {
 				return 0;
 			} else {
-				// Count the number of NaN values 
+				// Count the number of NaN values
 				var numNaN = helpers.where(this.getDataset().data, function(data) {
 					return isNaN(data);
 				}).length;
@@ -229,4 +232,5 @@
 			}
 		}
 	});
-}).call(this);
+
+};

src/controllers/controller.radar.js

@@ -1,21 +1,19 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
 
+	var helpers = Chart.helpers;
 
 
 	Chart.defaults.radar = {
 		scale: {
-			type: "radialLinear",
+			type: "radialLinear"
 		},
 		elements: {
 			line: {
-				tension: 0, // no bezier in radar
+				tension: 0 // no bezier in radar
 			}
-		},
+		}
 	};
 
 	Chart.controllers.radar = Chart.DatasetController.extend({
@@ -41,8 +39,8 @@
 					_index: index,
 					_model: {
 						x: 0, //xScale.getPixelForValue(null, index, true),
-						y: 0, //this.chartArea.bottom,
-					},
+						y: 0 //this.chartArea.bottom,
+					}
 				});
 			}, this);
 		},
@@ -51,7 +49,7 @@
 			var point = new Chart.elements.Point({
 				_chart: this.chart.chart,
 				_datasetIndex: this.index,
-				_index: index,
+				_index: index
 			});
 
 			// Reset the point
@@ -88,17 +86,21 @@
 				// Model
 				_model: {
 					// Appearance
-					tension: helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
-					backgroundColor: this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor,
-					borderWidth: this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth,
-					borderColor: this.getDataset().borderColor || this.chart.options.elements.line.borderColor,
-					fill: this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill, // use the value from the this.getDataset() if it was provided. else fall back to the default
+					tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
+					backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor),
+					borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth),
+					borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor),
+					fill: line.custom && line.custom.fill ? line.custom.fill : (this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill),
+					borderCapStyle: line.custom && line.custom.borderCapStyle ? line.custom.borderCapStyle : (this.getDataset().borderCapStyle || this.chart.options.elements.line.borderCapStyle),
+					borderDash: line.custom && line.custom.borderDash ? line.custom.borderDash : (this.getDataset().borderDash || this.chart.options.elements.line.borderDash),
+					borderDashOffset: line.custom && line.custom.borderDashOffset ? line.custom.borderDashOffset : (this.getDataset().borderDashOffset || this.chart.options.elements.line.borderDashOffset),
+					borderJoinStyle: line.custom && line.custom.borderJoinStyle ? line.custom.borderJoinStyle : (this.getDataset().borderJoinStyle || this.chart.options.elements.line.borderJoinStyle),
 
 					// Scale
 					scaleTop: scale.top,
 					scaleBottom: scale.bottom,
-					scaleZero: scaleBase,
-				},
+					scaleZero: scaleBase
+				}
 			});
 
 			this.getDataset().metaDataset.pivot();
@@ -128,14 +130,15 @@
 
 					// Appearance
 					tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension),
-					radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
+					radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius),
 					backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor),
 					borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor),
 					borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth),
+					pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle),
 
 					// Tooltip
-					hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius),
-				},
+					hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius)
+				}
 			});
 
 			point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y));
@@ -167,7 +170,7 @@
 			// Transition Point Locations
 			helpers.each(this.getDataset().metaData, function(point, index) {
 				point.transition(easingDecimal);
-			}, this);
+			});
 
 			// Transition and Draw the line
 			this.getDataset().metaDataset.transition(easingDecimal).draw();
@@ -183,10 +186,10 @@
 			var dataset = this.chart.data.datasets[point._datasetIndex];
 			var index = point._index;
 
-			point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
+			point._model.radius = point.custom && point.custom.hoverRadius ? point.custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius);
 			point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString());
 			point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString());
-			point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth);
+			point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderWidth, index, point._model.borderWidth);
 		},
 
 		removeHoverStyle: function(point) {
@@ -199,4 +202,4 @@
 			point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth);
 		}
 	});
-}).call(this);
+};

src/core/core.animation.js

@@ -1,16 +1,15 @@
-(function() {
+/*global window: false */
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.animation = {
 		duration: 1000,
 		easing: "easeOutQuart",
 		onProgress: helpers.noop,
-		onComplete: helpers.noop,
+		onComplete: helpers.noop
 	};
 
 	Chart.Animation = Chart.Element.extend({
@@ -19,8 +18,8 @@
 		easing: "", // the easing to use for this animation
 		render: null, // render function used by the animation service
 
-		onAnimationProgress: null, // user specified callback to fire on each step of the animation 
-		onAnimationComplete: null, // user specified callback to fire when the animation finishes
+		onAnimationProgress: null, // user specified callback to fire on each step of the animation
+		onAnimationComplete: null // user specified callback to fire when the animation finishes
 	});
 
 	Chart.animationService = {
@@ -47,17 +46,17 @@
 			});
 
 			// If there are no animations queued, manually kickstart a digest, for lack of a better word
-			if (this.animations.length == 1) {
+			if (this.animations.length === 1) {
 				helpers.requestAnimFrame.call(window, this.digestWrapper);
 			}
 		},
 		// Cancel the animation for a given chart instance
 		cancelAnimation: function(chartInstance) {
-			var index = helpers.findNextWhere(this.animations, function(animationWrapper) {
+			var index = helpers.findIndex(this.animations, function(animationWrapper) {
 				return animationWrapper.chartInstance === chartInstance;
 			});
 
-			if (index) {
+			if (index !== -1) {
 				this.animations.splice(index, 1);
 				chartInstance.animating = false;
 			}
@@ -76,7 +75,8 @@
 				this.dropFrames = this.dropFrames % 1;
 			}
 
-			for (var i = 0; i < this.animations.length; i++) {
+			var i = 0;
+			while (i < this.animations.length) {
 				if (this.animations[i].animationObject.currentStep === null) {
 					this.animations[i].animationObject.currentStep = 0;
 				}
@@ -92,16 +92,17 @@
 					this.animations[i].animationObject.onAnimationProgress.call(this.animations[i].chartInstance, this.animations[i]);
 				}
 
-				if (this.animations[i].animationObject.currentStep == this.animations[i].animationObject.numSteps) {
+				if (this.animations[i].animationObject.currentStep === this.animations[i].animationObject.numSteps) {
 					if (this.animations[i].animationObject.onAnimationComplete && this.animations[i].animationObject.onAnimationComplete.call) {
 						this.animations[i].animationObject.onAnimationComplete.call(this.animations[i].chartInstance, this.animations[i]);
 					}
-					
+
 					// executed the last frame. Remove the animation.
 					this.animations[i].chartInstance.animating = false;
+
 					this.animations.splice(i, 1);
-					// Keep the index in place to offset the splice
-					i--;
+				} else {
+					++i;
 				}
 			}
 
@@ -116,5 +117,4 @@
 			}
 		}
 	};
-
-}).call(this);
+};

src/core/core.controller.js

@@ -1,13 +1,8 @@
-(function() {
-
-	"use strict";
-
-	//Declare root variable - window in the browser, global on the server
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+"use strict";
 
+module.exports = function(Chart) {
 
+	var helpers = Chart.helpers;
 	//Create a dictionary of chart types, to allow for extension of existing types
 	Chart.types = {};
 
@@ -29,7 +24,7 @@
 		Object.defineProperty(this, 'data', {
 			get: function() {
 				return this.config.data;
-			},
+			}
 		});
 
 		//Add the chart instance to the global namespace
@@ -40,7 +35,7 @@
 			this.resize(true);
 		}
 
-		this.initialize.call(this);
+		this.initialize();
 
 		return this;
 	};
@@ -83,17 +78,22 @@
 		},
 
 		resize: function resize(silent) {
-			this.stop();
 			var canvas = this.chart.canvas;
 			var newWidth = helpers.getMaximumWidth(this.chart.canvas);
 			var newHeight = (this.options.maintainAspectRatio && isNaN(this.chart.aspectRatio) === false && isFinite(this.chart.aspectRatio) && this.chart.aspectRatio !== 0) ? newWidth / this.chart.aspectRatio : helpers.getMaximumHeight(this.chart.canvas);
 
+			var sizeChanged = this.chart.width !== newWidth || this.chart.height !== newHeight;
+
+			if (!sizeChanged)
+				return this;
+
 			canvas.width = this.chart.width = newWidth;
 			canvas.height = this.chart.height = newHeight;
 
 			helpers.retinaScale(this.chart);
 
 			if (!silent) {
+				this.stop();
 				this.update(this.options.responsiveAnimationDuration);
 			}
 
@@ -107,14 +107,14 @@
 				if (this.options.scales.xAxes && this.options.scales.xAxes.length) {
 					helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) {
 						xAxisOptions.id = xAxisOptions.id || (defaultXAxisID + index);
-					}, this);
+					});
 				}
 
 				if (this.options.scales.yAxes && this.options.scales.yAxes.length) {
 					// Build the y axes
 					helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) {
 						yAxisOptions.id = yAxisOptions.id || (defaultYAxisID + index);
-					}, this);
+					});
 				}
 			}
 		},
@@ -126,45 +126,53 @@
 			if (this.options.scales) {
 				if (this.options.scales.xAxes && this.options.scales.xAxes.length) {
 					helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) {
-						var ScaleClass = Chart.scaleService.getScaleConstructor(xAxisOptions.type);
-						var scale = new ScaleClass({
-							ctx: this.chart.ctx,
-							options: xAxisOptions,
-							chart: this,
-							id: xAxisOptions.id,
-						});
+						var xType = helpers.getValueOrDefault(xAxisOptions.type, 'category');
+						var ScaleClass = Chart.scaleService.getScaleConstructor(xType);
+						if (ScaleClass) {
+							var scale = new ScaleClass({
+								ctx: this.chart.ctx,
+								options: xAxisOptions,
+								chart: this,
+								id: xAxisOptions.id
+							});
 
-						this.scales[scale.id] = scale;
+							this.scales[scale.id] = scale;
+						}
 					}, this);
 				}
 
 				if (this.options.scales.yAxes && this.options.scales.yAxes.length) {
 					// Build the y axes
 					helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) {
-						var ScaleClass = Chart.scaleService.getScaleConstructor(yAxisOptions.type);
-						var scale = new ScaleClass({
-							ctx: this.chart.ctx,
-							options: yAxisOptions,
-							chart: this,
-							id: yAxisOptions.id,
-						});
+						var yType = helpers.getValueOrDefault(yAxisOptions.type, 'linear');
+						var ScaleClass = Chart.scaleService.getScaleConstructor(yType);
+						if (ScaleClass) {
+							var scale = new ScaleClass({
+								ctx: this.chart.ctx,
+								options: yAxisOptions,
+								chart: this,
+								id: yAxisOptions.id
+							});
 
-						this.scales[scale.id] = scale;
+							this.scales[scale.id] = scale;
+						}
 					}, this);
 				}
 			}
 			if (this.options.scale) {
 				// Build radial axes
 				var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type);
-				var scale = new ScaleClass({
-					ctx: this.chart.ctx,
-					options: this.options.scale,
-					chart: this,
-				});
+				if (ScaleClass) {
+					var scale = new ScaleClass({
+						ctx: this.chart.ctx,
+						options: this.options.scale,
+						chart: this
+					});
 
-				this.scale = scale;
+					this.scale = scale;
 
-				this.scales.radialScale = scale;
+					this.scales.radialScale = scale;
+				}
 			}
 
 			Chart.scaleService.addScalesToLayout(this);
@@ -185,7 +193,7 @@
 				this.legend = new Chart.Legend({
 					ctx: this.chart.ctx,
 					options: this.options.legend,
-					chart: this,
+					chart: this
 				});
 
 				Chart.layoutService.addBox(this, this.legend);
@@ -196,8 +204,10 @@
 			Chart.layoutService.update(this, this.chart.width, this.chart.height);
 		},
 
-		buildOrUpdateControllers: function buildOrUpdateControllers(resetNewControllers) {
+		buildOrUpdateControllers: function buildOrUpdateControllers() {
 			var types = [];
+			var newControllers = [];
+
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				if (!dataset.type) {
 					dataset.type = this.config.type;
@@ -210,27 +220,26 @@
 					dataset.controller.updateIndex(datasetIndex);
 				} else {
 					dataset.controller = new Chart.controllers[type](this, datasetIndex);
-
-					if (resetNewControllers) {
-						dataset.controller.reset();
-					}
+					newControllers.push(dataset.controller);
 				}
 			}, this);
 
 			if (types.length > 1) {
 				for (var i = 1; i < types.length; i++) {
-					if (types[i] != types[i - 1]) {
+					if (types[i] !== types[i - 1]) {
 						this.isCombo = true;
 						break;
 					}
 				}
 			}
+
+			return newControllers;
 		},
 
 		resetElements: function resetElements() {
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				dataset.controller.reset();
-			}, this);
+			});
 		},
 
 		update: function update(animationDuration, lazy) {
@@ -238,25 +247,30 @@
 			this.tooltip._data = this.data;
 
 			// Make sure dataset controllers are updated and new controllers are reset
-			this.buildOrUpdateControllers(true);
+			var newControllers = this.buildOrUpdateControllers();
 
 			Chart.layoutService.update(this, this.chart.width, this.chart.height);
 
+			// Can only reset the new controllers after the scales have been updated
+			helpers.each(newControllers, function(controller) {
+				controller.reset();
+			});
+
 			// Make sure all dataset controllers have correct meta data counts
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				dataset.controller.buildOrUpdateElements();
-			}, this);
+			});
 
 			// This will loop through any data and do the appropriate element update for the type
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				dataset.controller.update();
-			}, this);
+			});
 			this.render(animationDuration, lazy);
 		},
 
 		render: function render(duration, lazy) {
 
-			if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration == 'undefined' && this.options.animation.duration !== 0))) {
+			if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) {
 				var animation = new Chart.Animation();
 				animation.numSteps = (duration || this.options.animation.duration) / 16.66; //60 fps
 				animation.easing = this.options.animation.easing;
@@ -296,12 +310,21 @@
 				this.scale.draw();
 			}
 
+			// Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function
+			this.chart.ctx.save();
+			this.chart.ctx.beginPath();
+			this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
+			this.chart.ctx.clip();
+
 			// Draw each dataset via its respective controller (reversed to support proper line stacking)
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				if (helpers.isDatasetVisible(dataset)) {
 					dataset.controller.draw(ease);
 				}
-			}, this);
+			}, null, true);
+
+			// Restore from the clipping operation
+			this.chart.ctx.restore();
 
 			// Finally draw the tooltip
 			this.tooltip.transition(easingDecimal).draw();
@@ -321,9 +344,9 @@
 							elementsArray.push(element);
 							return elementsArray;
 						}
-					}, this);
+					});
 				}
-			}, this);
+			});
 
 			return elementsArray;
 		},
@@ -332,27 +355,29 @@
 			var eventPosition = helpers.getRelativePosition(e, this.chart);
 			var elementsArray = [];
 
-			var found = (function(){
-				for (var i = 0; i < this.data.datasets.length; i++) {
-					if (helpers.isDatasetVisible(this.data.datasets[i])) {
-						for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
-							if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
-								return this.data.datasets[i].metaData[j];
+			var found = (function() {
+				if (this.data.datasets) {
+					for (var i = 0; i < this.data.datasets.length; i++) {
+						if (helpers.isDatasetVisible(this.data.datasets[i])) {
+							for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
+								if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
+									return this.data.datasets[i].metaData[j];
+								}
 							}
 						}
 					}
 				}
 			}).call(this);
 
-			if(!found){
+			if (!found) {
 				return elementsArray;
 			}
 
-			helpers.each(this.data.datasets, function(dataset, dsIndex){
-				if(helpers.isDatasetVisible(dataset)){
+			helpers.each(this.data.datasets, function(dataset, dsIndex) {
+				if (helpers.isDatasetVisible(dataset)) {
 					elementsArray.push(dataset.metaData[found._index]);
 				}
-			}, this);
+			});
 
 			return elementsArray;
 		},
@@ -402,7 +427,7 @@
 				_chart: this.chart,
 				_chartInstance: this,
 				_data: this.data,
-				_options: this.options,
+				_options: this.options
 			}, this);
 		},
 
@@ -416,7 +441,7 @@
 			this.lastTooltipActive = this.lastTooltipActive || [];
 
 			// Find Active Elements for hover and tooltips
-			if (e.type == 'mouseout') {
+			if (e.type === 'mouseout') {
 				this.active = [];
 				this.tooltipActive = [];
 			} else {
@@ -444,7 +469,7 @@
 				this.options.hover.onHover.call(this, this.active);
 			}
 
-			if (e.type == 'mouseup' || e.type == 'click') {
+			if (e.type === 'mouseup' || e.type === 'click') {
 				if (this.options.onClick) {
 					this.options.onClick.call(this, e, this.active);
 				}
@@ -467,7 +492,7 @@
 					case 'dataset':
 						for (var i = 0; i < this.lastActive.length; i++) {
 							if (this.lastActive[i])
-						  		this.data.datasets[this.lastActive[i]._datasetIndex].controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
+								this.data.datasets[this.lastActive[i]._datasetIndex].controller.removeHoverStyle(this.lastActive[i], this.lastActive[i]._datasetIndex, this.lastActive[i]._index);
 						}
 						break;
 					default:
@@ -485,7 +510,7 @@
 					case 'dataset':
 						for (var j = 0; j < this.active.length; j++) {
 							if (this.active[j])
-				  				this.data.datasets[this.active[j]._datasetIndex].controller.setHoverStyle(this.active[j]);
+								this.data.datasets[this.active[j]._datasetIndex].controller.setHoverStyle(this.active[j]);
 						}
 						break;
 					default:
@@ -542,7 +567,6 @@
 			this.lastActive = this.active;
 			this.lastTooltipActive = this.tooltipActive;
 			return this;
-		},
+		}
 	});
-
-}).call(this);
+};

src/core/core.datasetController.js

@@ -1,12 +1,8 @@
-(function() {
+"use strict";
 
-	"use strict";
-
-	//Declare root variable - window in the browser, global on the server
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
 
+	var helpers = Chart.helpers;
 
 	// Base class for all dataset controllers (line, bar, etc)
 	Chart.DatasetController = function(chart, datasetIndex) {
@@ -69,9 +65,9 @@
 		draw: helpers.noop,
 		removeHoverStyle: helpers.noop,
 		setHoverStyle: helpers.noop,
-		update: helpers.noop,
+		update: helpers.noop
 	});
 
 	Chart.DatasetController.extend = helpers.inherits;
 
-}).call(this);
+};

src/core/core.element.js

@@ -1,91 +1,93 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	//Declare root variable - window in the browser, global on the server
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+  var helpers = Chart.helpers;
 
-	Chart.elements = {};
+  Chart.elements = {};
 
-	Chart.Element = function(configuration) {
-		helpers.extend(this, configuration);
-		this.initialize.apply(this, arguments);
-	};
-	helpers.extend(Chart.Element.prototype, {
-		initialize: function() {},
-		pivot: function() {
-			if (!this._view) {
-				this._view = helpers.clone(this._model);
-			}
-			this._start = helpers.clone(this._view);
-			return this;
-		},
-		transition: function(ease) {
-			if (!this._view) {
-				this._view = helpers.clone(this._model);
-			}
-			if (!this._start) {
-				this.pivot();
-			}
+  Chart.Element = function(configuration) {
+    helpers.extend(this, configuration);
+    this.initialize.apply(this, arguments);
+  };
+  helpers.extend(Chart.Element.prototype, {
+    initialize: function() {},
+    pivot: function() {
+      if (!this._view) {
+        this._view = helpers.clone(this._model);
+      }
+      this._start = helpers.clone(this._view);
+      return this;
+    },
+    transition: function(ease) {
+      if (!this._view) {
+        this._view = helpers.clone(this._model);
+      }
 
-			helpers.each(this._model, function(value, key) {
+      // No animation -> No Transition
+      if (ease === 1) {
+        this._view = this._model;
+        this._start = null;
+        return this;
+      }
 
-				if (key[0] === '_' || !this._model.hasOwnProperty(key)) {
-					// Only non-underscored properties
-				}
+      if (!this._start) {
+        this.pivot();
+      }
 
-				// Init if doesn't exist
-				else if (!this._view[key]) {
-					if (typeof value === 'number' && isNaN(this._view[key]) === false) {
-						this._view[key] = value * ease;
-					} else {
-						this._view[key] = value || null;
-					}
-				}
+      helpers.each(this._model, function(value, key) {
 
-				// No unnecessary computations
-				else if (this._model[key] === this._view[key]) {
-					// It's the same! Woohoo!
-				}
+        if (key[0] === '_' || !this._model.hasOwnProperty(key)) {
+          // Only non-underscored properties
+        }
 
-				// Color transitions if possible
-				else if (typeof value === 'string') {
-					try {
-						var color = helpers.color(this._start[key]).mix(helpers.color(this._model[key]), ease);
-						this._view[key] = color.rgbString();
-					} catch (err) {
-						this._view[key] = value;
-					}
-				}
-				// Number transitions
-				else if (typeof value === 'number') {
-					var startVal = this._start[key] !== undefined && isNaN(this._start[key]) === false ? this._start[key] : 0;
-					this._view[key] = ((this._model[key] - startVal) * ease) + startVal;
-				}
-				// Everything else
-				else {
-					this._view[key] = value;
-				}
-			}, this);
+        // Init if doesn't exist
+        else if (!this._view.hasOwnProperty(key)) {
+          if (typeof value === 'number' && !isNaN(this._view[key])) {
+            this._view[key] = value * ease;
+          } else {
+            this._view[key] = value;
+          }
+        }
 
-			if (ease === 1) {
-				delete this._start;
-			}
-			return this;
-		},
-		tooltipPosition: function() {
-			return {
-				x: this._model.x,
-				y: this._model.y
-			};
-		},
-		hasValue: function() {
-			return helpers.isNumber(this._model.x) && helpers.isNumber(this._model.y);
-		}
-	});
+        // No unnecessary computations
+        else if (value === this._view[key]) {
+          // It's the same! Woohoo!
+        }
 
-	Chart.Element.extend = helpers.inherits;
+        // Color transitions if possible
+        else if (typeof value === 'string') {
+          try {
+            var color = helpers.color(this._start[key]).mix(helpers.color(this._model[key]), ease);
+            this._view[key] = color.rgbString();
+          } catch (err) {
+            this._view[key] = value;
+          }
+        }
+        // Number transitions
+        else if (typeof value === 'number') {
+          var startVal = this._start[key] !== undefined && isNaN(this._start[key]) === false ? this._start[key] : 0;
+          this._view[key] = ((this._model[key] - startVal) * ease) + startVal;
+        }
+        // Everything else
+        else {
+          this._view[key] = value;
+        }
+      }, this);
 
-}).call(this);
+      return this;
+    },
+    tooltipPosition: function() {
+      return {
+        x: this._model.x,
+        y: this._model.y
+      };
+    },
+    hasValue: function() {
+      return helpers.isNumber(this._model.x) && helpers.isNumber(this._model.y);
+    }
+  });
+
+  Chart.Element.extend = helpers.inherits;
+
+};

src/core/core.js

@@ -1,21 +1,6 @@
-/*!
- * Chart.js
- * http://chartjs.org/
- * Version: {{ version }}
- *
- * Copyright 2015 Nick Downie
- * Released under the MIT license
- * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
- */
+"use strict";
 
-
-(function() {
-
-	"use strict";
-
-	//Declare root variable - window in the browser, global on the server
-	var root = this,
-		previous = root.Chart;
+module.exports = function() {
 
 	//Occupy the global variable of Chart, and create a simple base class
 	var Chart = function(context, config) {
@@ -36,7 +21,7 @@
 
 		// Figure out what the size of the chart will be.
 		// If the canvas has a specified width and height, we use those else
-		// we look to see if the canvas node has a CSS width and height. 
+		// we look to see if the canvas node has a CSS width and height.
 		// If there is still no height, fill the parent container
 		this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
 		this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
@@ -83,10 +68,15 @@
 			hover: {
 				onHover: null,
 				mode: 'single',
-				animationDuration: 400,
+				animationDuration: 400
 			},
 			onClick: null,
 			defaultColor: 'rgba(0,0,0,0.1)',
+			defaultFontColor: '#666',
+			defaultFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+			defaultFontSize: 12,
+			defaultFontStyle: 'normal',
+			showLines: true,
 
 			// Element defaults defined in element extensions
 			elements: {},
@@ -106,14 +96,9 @@
 
 				return text.join("");
 			}
-		},
+		}
 	};
 
-	root.Chart = Chart;
+	return Chart;
 
-	Chart.noConflict = function() {
-		root.Chart = previous;
-		return Chart;
-	};
-
-}).call(this);
+};

src/core/core.layoutService.js

@@ -1,11 +1,10 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
 
-	// The layout service is ver self explanatory.  It's responsible for the layout within a chart.  
+	var helpers = Chart.helpers;
+
+	// The layout service is very self explanatory.  It's responsible for the layout within a chart.
 	// Scales, Legends and Plugins all rely on the layout service and can easily register to be placed anywhere they need
 	// It is this service's responsibility of carrying out that layout.
 	Chart.layoutService = {
@@ -33,25 +32,25 @@
 				return;
 			}
 
-			var xPadding = width > 30 ? 5 : 2;
-			var yPadding = height > 30 ? 5 : 2;
+			var xPadding = 0;
+			var yPadding = 0;
 
 			var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
-				return box.options.position == "left";
+				return box.options.position === "left";
 			});
 			var rightBoxes = helpers.where(chartInstance.boxes, function(box) {
-				return box.options.position == "right";
+				return box.options.position === "right";
 			});
 			var topBoxes = helpers.where(chartInstance.boxes, function(box) {
-				return box.options.position == "top";
+				return box.options.position === "top";
 			});
 			var bottomBoxes = helpers.where(chartInstance.boxes, function(box) {
-				return box.options.position == "bottom";
+				return box.options.position === "bottom";
 			});
 
 			// Boxes that overlay the chartarea such as the radialLinear scale
 			var chartAreaBoxes = helpers.where(chartInstance.boxes, function(box) {
-				return box.options.position == "chartArea";
+				return box.options.position === "chartArea";
 			});
 
 			function fullWidthSorter(a, b) {
@@ -68,7 +67,7 @@
 
 			// Essentially we now have any number of boxes on each of the 4 sides.
 			// Our canvas looks like the following.
-			// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and 
+			// The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and
 			// B1 is the bottom axis
 			// There are also 4 quadrant-like locations (left to right instead of clockwise) reserved for chart overlays
 			// These locations are single-box locations only, when trying to register a chartArea location that is already taken,
@@ -93,11 +92,11 @@
 			// |----------------------------------------------------|
 			//
 			// What we do to find the best sizing, we do the following
-			// 1. Determine the minimum size of the chart area. 
+			// 1. Determine the minimum size of the chart area.
 			// 2. Split the remaining width equally between each vertical axis
 			// 3. Split the remaining height equally between each horizontal axis
 			// 4. Give each layout the maximum size it can be. The layout will return it's minimum size
-			// 5. Adjust the sizes of each axis based on it's minimum reported size. 
+			// 5. Adjust the sizes of each axis based on it's minimum reported size.
 			// 6. Refit each axis
 			// 7. Position each axis in the final location
 			// 8. Tell the chart the final location of the chart area
@@ -137,7 +136,7 @@
 				minBoxSizes.push({
 					horizontal: isHorizontal,
 					minSize: minSize,
-					box: box,
+					box: box
 				});
 			}
 
@@ -176,10 +175,12 @@
 							left: totalLeftBoxesWidth,
 							right: totalRightBoxesWidth,
 							top: 0,
-							bottom: 0,
+							bottom: 0
 						};
 
-						box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, minBoxSize.minSize.height, scaleMargin);
+						// Don't use min size here because of label rotation. When the labels are rotated, their rotation highly depends
+						// on the margin. Sometimes they need to increase in size slightly
+						box.update(box.options.fullWidth ? chartWidth : maxChartAreaWidth, chartHeight / 2, scaleMargin);
 					} else {
 						box.update(minBoxSize.minSize.width, maxChartAreaHeight);
 					}
@@ -285,7 +286,7 @@
 					box.top = top;
 					box.bottom = top + box.height;
 
-					// Move to next point 
+					// Move to next point
 					top = box.bottom;
 
 				} else {
@@ -305,7 +306,7 @@
 				left: totalLeftBoxesWidth,
 				top: totalTopBoxesHeight,
 				right: totalLeftBoxesWidth + maxChartAreaWidth,
-				bottom: totalTopBoxesHeight + maxChartAreaHeight,
+				bottom: totalTopBoxesHeight + maxChartAreaHeight
 			};
 
 			// Step 9
@@ -319,6 +320,4 @@
 			});
 		}
 	};
-
-
-}).call(this);
+};

src/core/core.legend.js

@@ -1,17 +1,17 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.legend = {
 
 		display: true,
 		position: 'top',
 		fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+		reverse: false,
 
-		// a callback that will handle 
+		// a callback that will handle
 		onClick: function(e, legendItem) {
 			var dataset = this.chart.data.datasets[legendItem.datasetIndex];
 			dataset.hidden = !dataset.hidden;
@@ -22,10 +22,6 @@
 
 		labels: {
 			boxWidth: 40,
-			fontSize: 12,
-			fontStyle: "normal",
-			fontColor: "#666",
-			fontFamily: "Helvetica Neue",
 			padding: 10,
 			// Generates labels shown in the legend
 			// Valid properties to return:
@@ -39,7 +35,7 @@
 			// lineJoin :
 			// lineWidth :
 			generateLabels: function(data) {
-				return data.datasets.map(function(dataset, i) {
+				return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
 					return {
 						text: dataset.label,
 						fillStyle: dataset.backgroundColor,
@@ -54,9 +50,9 @@
 						// Below is extra data used for toggling the datasets
 						datasetIndex: i
 					};
-				}, this);
+				}, this) : [];
 			}
-		},
+		}
 	};
 
 	Chart.Legend = Chart.Element.extend({
@@ -134,7 +130,7 @@
 			// Reset minSize
 			this.minSize = {
 				width: 0,
-				height: 0,
+				height: 0
 			};
 		},
 		afterSetDimensions: helpers.noop,
@@ -144,6 +140,9 @@
 		beforeBuildLabels: helpers.noop,
 		buildLabels: function() {
 			this.legendItems = this.options.labels.generateLabels.call(this, this.chart.data);
+			if(this.options.reverse){
+				this.legendItems.reverse();
+			}
 		},
 		afterBuildLabels: helpers.noop,
 
@@ -153,7 +152,10 @@
 		fit: function() {
 
 			var ctx = this.ctx;
-			var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
+			var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+			var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 			// Reset hit boxes
 			this.legendHitBoxes = [];
@@ -179,16 +181,16 @@
 
 					// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
 					this.lineWidths = [0];
-					var totalHeight = this.legendItems.length ? this.options.labels.fontSize + (this.options.labels.padding) : 0;
+					var totalHeight = this.legendItems.length ? fontSize + (this.options.labels.padding) : 0;
 
 					ctx.textAlign = "left";
 					ctx.textBaseline = 'top';
 					ctx.font = labelFont;
 
 					helpers.each(this.legendItems, function(legendItem, i) {
-						var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(legendItem.text).width;
-						if (this.lineWidths[this.lineWidths.length - 1] + width >= this.width) {
-							totalHeight += this.options.labels.fontSize + (this.options.labels.padding);
+						var width = this.options.labels.boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
+						if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) {
+							totalHeight += fontSize + (this.options.labels.padding);
 							this.lineWidths[this.lineWidths.length] = this.left;
 						}
 
@@ -197,7 +199,7 @@
 							left: 0,
 							top: 0,
 							width: width,
-							height: this.options.labels.fontSize,
+							height: fontSize
 						};
 
 						this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding;
@@ -218,7 +220,7 @@
 
 		// Shared Methods
 		isHorizontal: function() {
-			return this.options.position == "top" || this.options.position == "bottom";
+			return this.options.position === "top" || this.options.position === "bottom";
 		},
 
 		// Actualy draw the legend on the canvas
@@ -228,10 +230,14 @@
 				var cursor = {
 					x: this.left + ((this.width - this.lineWidths[0]) / 2),
 					y: this.top + this.options.labels.padding,
-					line: 0,
+					line: 0
 				};
 
-				var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
+				var fontColor = helpers.getValueOrDefault(this.options.labels.fontColor, Chart.defaults.global.defaultFontColor);
+				var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+				var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 				// Horizontal
 				if (this.isHorizontal()) {
@@ -239,23 +245,23 @@
 					ctx.textAlign = "left";
 					ctx.textBaseline = 'top';
 					ctx.lineWidth = 0.5;
-					ctx.strokeStyle = this.options.labels.fontColor; // for strikethrough effect
-					ctx.fillStyle = this.options.labels.fontColor; // render in correct colour
+					ctx.strokeStyle = fontColor; // for strikethrough effect
+					ctx.fillStyle = fontColor; // render in correct colour
 					ctx.font = labelFont;
 
 					helpers.each(this.legendItems, function(legendItem, i) {
 						var textWidth = ctx.measureText(legendItem.text).width;
-						var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + textWidth;
-						
+						var width = this.options.labels.boxWidth + (fontSize / 2) + textWidth;
+
 						if (cursor.x + width >= this.width) {
-							cursor.y += this.options.labels.fontSize + (this.options.labels.padding);
+							cursor.y += fontSize + (this.options.labels.padding);
 							cursor.line++;
 							cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2);
 						}
 
 						// Set the ctx for the box
 						ctx.save();
-						
+
 						var itemOrDefault = function(item, defaulVal) {
 							return item !== undefined ? item : defaulVal;
 						};
@@ -266,30 +272,30 @@
 						ctx.lineJoin = itemOrDefault(legendItem.lineJoin, Chart.defaults.global.elements.line.borderJoinStyle);
 						ctx.lineWidth = itemOrDefault(legendItem.lineWidth, Chart.defaults.global.elements.line.borderWidth);
 						ctx.strokeStyle = itemOrDefault(legendItem.strokeStyle, Chart.defaults.global.defaultColor);
-						
+
 						if (ctx.setLineDash) {
 							// IE 9 and 10 do not support line dash
 							ctx.setLineDash(itemOrDefault(legendItem.lineDash, Chart.defaults.global.elements.line.borderDash));
 						}
-						
+
 						// Draw the box
-						ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
-						ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
-						
+						ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
+						ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
+
 						ctx.restore();
 
 						this.legendHitBoxes[i].left = cursor.x;
 						this.legendHitBoxes[i].top = cursor.y;
 
 						// Fill the actual label
-						ctx.fillText(legendItem.text, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y);
+						ctx.fillText(legendItem.text, this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y);
 
 						if (legendItem.hidden) {
 							// Strikethrough the text if hidden
 							ctx.beginPath();
 							ctx.lineWidth = 2;
-							ctx.moveTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y + (this.options.labels.fontSize / 2));
-							ctx.lineTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x + textWidth, cursor.y + (this.options.labels.fontSize / 2));
+							ctx.moveTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y + (fontSize / 2));
+							ctx.lineTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x + textWidth, cursor.y + (fontSize / 2));
 							ctx.stroke();
 						}
 
@@ -322,4 +328,4 @@
 		}
 	});
 
-}).call(this);
+};

src/core/core.scale.js

@@ -1,9 +1,8 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	Chart.defaults.scale = {
 		display: true,
@@ -17,41 +16,32 @@
 			drawTicks: true,
 			zeroLineWidth: 1,
 			zeroLineColor: "rgba(0,0,0,0.25)",
-			offsetGridLines: false,
+			offsetGridLines: false
 		},
 
 		// scale label
 		scaleLabel: {
-			fontColor: '#666',
-			fontFamily: 'Helvetica Neue',
-			fontSize: 12,
-			fontStyle: 'normal',
-
 			// actual label
 			labelString: '',
 
 			// display property
-			display: false,
+			display: false
 		},
 
 		// label settings
 		ticks: {
 			beginAtZero: false,
-			fontSize: 12,
-			fontStyle: "normal",
-			fontColor: "#666",
-			fontFamily: "Helvetica Neue",
 			maxRotation: 90,
 			mirror: false,
 			padding: 10,
 			reverse: false,
 			display: true,
 			autoSkip: true,
-		    autoSkipPadding: 20,
+			autoSkipPadding: 20,
 			callback: function(value) {
 				return '' + value;
-			},
-		},
+			}
+		}
 	};
 
 	Chart.Scale = Chart.Element.extend({
@@ -188,68 +178,66 @@
 		calculateTickRotation: function() {
 			//Get the width of each grid by calculating the difference
 			//between x offsets between 0 and 1.
-			var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-			this.ctx.font = labelFont;
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+			this.ctx.font = tickLabelFont;
 
 			var firstWidth = this.ctx.measureText(this.ticks[0]).width;
 			var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
 			var firstRotated;
-			var lastRotated;
-
-			this.paddingRight = lastWidth / 2 + 3;
-			this.paddingLeft = firstWidth / 2 + 3;
 
 			this.labelRotation = 0;
+			this.paddingRight = 0;
+			this.paddingLeft = 0;
 
-			if (this.options.display && this.isHorizontal()) {
-				var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks);
-				var cosRotation;
-				var sinRotation;
+			if (this.options.display) {
+				if (this.isHorizontal()) {
+					this.paddingRight = lastWidth / 2 + 3;
+					this.paddingLeft = firstWidth / 2 + 3;
 
-				this.labelWidth = originalLabelWidth;
-
-				// Allow 3 pixels x2 padding either side for label readability
-				// only the index matters for a dataset scale, but we want a consistent interface between scales
-
-				var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6;
-
-				//Max label rotation can be set or default to 90 - also act as a loop counter
-				while (this.labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) {
-					cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
-					sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
-
-					firstRotated = cosRotation * firstWidth;
-					lastRotated = cosRotation * lastWidth;
-
-					// We're right aligning the text now.
-					if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) {
-						this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2;
+					if (!this.longestTextCache) {
+						this.longestTextCache = {};
 					}
+					var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
+					var labelWidth = originalLabelWidth;
+					var cosRotation;
+					var sinRotation;
 
-					this.paddingRight = this.options.ticks.fontSize / 2;
+					// Allow 3 pixels x2 padding either side for label readability
+					// only the index matters for a dataset scale, but we want a consistent interface between scales
+					var tickWidth = this.getPixelForTick(1) - this.getPixelForTick(0) - 6;
 
-					if (sinRotation * originalLabelWidth > this.maxHeight) {
-						// go back one step
-						this.labelRotation--;
-						break;
+					//Max label rotation can be set or default to 90 - also act as a loop counter
+					while (labelWidth > tickWidth && this.labelRotation < this.options.ticks.maxRotation) {
+						cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
+						sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
+
+						firstRotated = cosRotation * firstWidth;
+
+						// We're right aligning the text now.
+						if (firstRotated + tickFontSize / 2 > this.yLabelWidth) {
+							this.paddingLeft = firstRotated + tickFontSize / 2;
+						}
+
+						this.paddingRight = tickFontSize / 2;
+
+						if (sinRotation * originalLabelWidth > this.maxHeight) {
+							// go back one step
+							this.labelRotation--;
+							break;
+						}
+
+						this.labelRotation++;
+						labelWidth = cosRotation * originalLabelWidth;
 					}
-
-					this.labelRotation++;
-					this.labelWidth = cosRotation * originalLabelWidth;
-
 				}
-			} else {
-				this.labelWidth = 0;
-				this.paddingRight = 0;
-				this.paddingLeft = 0;
 			}
 
 			if (this.margins) {
-				this.paddingLeft -= this.margins.left;
-				this.paddingRight -= this.margins.right;
-
-				this.paddingLeft = Math.max(this.paddingLeft, 0);
-				this.paddingRight = Math.max(this.paddingRight, 0);
+				this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0);
+				this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0);
 			}
 		},
 		afterCalculateTickRotation: function() {
@@ -265,9 +253,19 @@
 
 			this.minSize = {
 				width: 0,
-				height: 0,
+				height: 0
 			};
 
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+			var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+			var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
+
 			// Width
 			if (this.isHorizontal()) {
 				// subtract the margins to line up with the chartArea if we are a full width scale
@@ -286,42 +284,42 @@
 			// Are we showing a title for the scale?
 			if (this.options.scaleLabel.display) {
 				if (this.isHorizontal()) {
-					this.minSize.height += (this.options.scaleLabel.fontSize * 1.5);
+					this.minSize.height += (scaleLabelFontSize * 1.5);
 				} else {
-					this.minSize.width += (this.options.scaleLabel.fontSize * 1.5);
+					this.minSize.width += (scaleLabelFontSize * 1.5);
 				}
 			}
 
 			if (this.options.ticks.display && this.options.display) {
 				// Don't bother fitting the ticks if we are not showing them
-				var labelFont = helpers.fontString(this.options.ticks.fontSize,
-					this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+				if (!this.longestTextCache) {
+					this.longestTextCache = {};
+				}
+
+				var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
 
 				if (this.isHorizontal()) {
 					// A horizontal axis is more constrained by the height.
-					this.longestLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks);
+					this.longestLabelWidth = largestTextWidth;
 
 					// TODO - improve this calculation
-					var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * this.options.ticks.fontSize;
+					var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize;
 
 					this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
-
-					labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-					this.ctx.font = labelFont;
+					this.ctx.font = tickLabelFont;
 
 					var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
 					var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
 
 					// Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned which means that the right padding is dominated
-					// by the font height 
+					// by the font height
 					var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
 					var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
 					this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
-					this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (this.options.ticks.fontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
+					this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
 				} else {
 					// A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
 					var maxLabelWidth = this.maxWidth - this.minSize.width;
-					var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks);
 
 					// Account for padding
 					if (!this.options.ticks.mirror) {
@@ -336,21 +334,16 @@
 						this.minSize.width = this.maxWidth;
 					}
 
-					this.paddingTop = this.options.ticks.fontSize / 2;
-					this.paddingBottom = this.options.ticks.fontSize / 2;
+					this.paddingTop = tickFontSize / 2;
+					this.paddingBottom = tickFontSize / 2;
 				}
 			}
 
 			if (this.margins) {
-				this.paddingLeft -= this.margins.left;
-				this.paddingTop -= this.margins.top;
-				this.paddingRight -= this.margins.right;
-				this.paddingBottom -= this.margins.bottom;
-
-				this.paddingLeft = Math.max(this.paddingLeft, 0);
-				this.paddingTop = Math.max(this.paddingTop, 0);
-				this.paddingRight = Math.max(this.paddingRight, 0);
-				this.paddingBottom = Math.max(this.paddingBottom, 0);
+				this.paddingLeft = Math.max(this.paddingLeft - this.margins.left, 0);
+				this.paddingTop = Math.max(this.paddingTop - this.margins.top, 0);
+				this.paddingRight = Math.max(this.paddingRight - this.margins.right, 0);
+				this.paddingBottom = Math.max(this.paddingBottom - this.margins.bottom, 0);
 			}
 
 			this.width = this.minSize.width;
@@ -399,7 +392,7 @@
 		// Used to get data value locations.  Value can either be an index or a numerical value
 		getPixelForValue: helpers.noop,
 
-		// Used for tick location, should 
+		// Used for tick location, should
 		getPixelForTick: function(index, includeOffset) {
 			if (this.isHorizontal()) {
 				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
@@ -420,7 +413,7 @@
 		},
 
 		// Utility for getting the pixel location of a percentage of scale
-		getPixelForDecimal: function(decimal/*, includeOffset*/) {
+		getPixelForDecimal: function(decimal /*, includeOffset*/ ) {
 			if (this.isHorizontal()) {
 				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
 				var valueOffset = (innerWidth * decimal) + this.paddingLeft;
@@ -445,14 +438,33 @@
 				var scaleLabelY;
 				var useAutoskipper = this.options.ticks.autoSkip;
 
-				// Make sure we draw text in the correct color and font
-				this.ctx.fillStyle = this.options.ticks.fontColor;
-				var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+
+				// figure out the maximum number of gridlines to show
+				var maxTicks;
+
+				if (this.options.ticks.maxTicksLimit) {
+					maxTicks = this.options.ticks.maxTicksLimit;
+				}
+
+				var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+				var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+				var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor);
+				var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+				var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
 
 				var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
 				var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
 				var longestRotatedLabel = this.longestLabelWidth * cosRotation;
-				var rotatedLabelHeight = this.options.ticks.fontSize * sinRotation;
+				var rotatedLabelHeight = tickFontSize * sinRotation;
+
+				// Make sure we draw text in the correct color and font
+				this.ctx.fillStyle = tickFontColor;
 
 				if (this.isHorizontal()) {
 					setContextLineSettings = true;
@@ -461,16 +473,31 @@
 					skipRatio = false;
 
 					if (((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length > (this.width - (this.paddingLeft + this.paddingRight))) {
-					    skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
+						skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
+					}
+
+					// if they defined a max number of ticks,
+					// increase skipRatio until that number is met
+					if (maxTicks && this.ticks.length > maxTicks) {
+						while (!skipRatio || this.ticks.length / (skipRatio || 1) > maxTicks) {
+							if (!skipRatio) {
+								skipRatio = 1;
+							}
+							skipRatio += 1;
+						}
 					}
 
 					if (!useAutoskipper) {
 						skipRatio = false;
 					}
-					
+
 					helpers.each(this.ticks, function(label, index) {
 						// Blank ticks
-						if ((skipRatio > 1 && index % skipRatio > 0) || (label === undefined || label === null)) {
+						var isLastTick = this.ticks.length === index + 1;
+
+						// Since we always show the last tick,we need may need to hide the last shown one before
+						var shouldSkip = (skipRatio > 1 && index % skipRatio > 0) || (index % skipRatio === 0 && index + skipRatio > this.ticks.length);
+						if (shouldSkip && !isLastTick || (label === undefined || label === null)) {
 							return;
 						}
 						var xLineValue = this.getPixelForTick(index); // xvalues for grid lines
@@ -512,7 +539,7 @@
 							this.ctx.save();
 							this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10);
 							this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
-							this.ctx.font = labelFont;
+							this.ctx.font = tickLabelFont;
 							this.ctx.textAlign = (isRotated) ? "right" : "center";
 							this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
 							this.ctx.fillText(label, 0, 0);
@@ -524,11 +551,11 @@
 						// Draw the scale label
 						this.ctx.textAlign = "center";
 						this.ctx.textBaseline = 'middle';
-						this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
-						this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
+						this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour
+						this.ctx.font = scaleLabelFont;
 
 						scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
-						scaleLabelY = this.options.position === 'bottom' ? this.bottom - (this.options.scaleLabel.fontSize / 2) : this.top + (this.options.scaleLabel.fontSize / 2);
+						scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
 
 						this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
 					}
@@ -603,10 +630,9 @@
 								}
 							}
 
-
 							this.ctx.translate(xLabelValue, yLabelValue);
 							this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
-							this.ctx.font = labelFont;
+							this.ctx.font = tickLabelFont;
 							this.ctx.textBaseline = "middle";
 							this.ctx.fillText(label, 0, 0);
 							this.ctx.restore();
@@ -615,7 +641,7 @@
 
 					if (this.options.scaleLabel.display) {
 						// Draw the scale label
-						scaleLabelX = this.options.position === 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2);
+						scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
 						scaleLabelY = this.top + ((this.bottom - this.top) / 2);
 						var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
 
@@ -623,15 +649,37 @@
 						this.ctx.translate(scaleLabelX, scaleLabelY);
 						this.ctx.rotate(rotation);
 						this.ctx.textAlign = "center";
-						this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
-						this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
+						this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour
+						this.ctx.font = scaleLabelFont;
 						this.ctx.textBaseline = 'middle';
 						this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);
 						this.ctx.restore();
 					}
 				}
+
+				// Draw the line at the edge of the axis
+				this.ctx.lineWidth = this.options.gridLines.lineWidth;
+				this.ctx.strokeStyle = this.options.gridLines.color;
+				var x1 = this.left,
+					x2 = this.right,
+					y1 = this.top,
+					y2 = this.bottom;
+
+				if (this.isHorizontal()) {
+					y1 = y2 = this.options.position === 'top' ? this.bottom : this.top;
+					y1 += helpers.aliasPixel(this.ctx.lineWidth);
+					y2 += helpers.aliasPixel(this.ctx.lineWidth);
+				} else {
+					x1 = x2 = this.options.position === 'left' ? this.right : this.left;
+					x1 += helpers.aliasPixel(this.ctx.lineWidth);
+					x2 += helpers.aliasPixel(this.ctx.lineWidth);
+				}
+
+				this.ctx.beginPath();
+				this.ctx.moveTo(x1, y1);
+				this.ctx.lineTo(x2, y2);
+				this.ctx.stroke();
 			}
 		}
 	});
-
-}).call(this);
+};

src/core/core.scaleService.js

@@ -1,9 +1,8 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	Chart.scaleService = {
 		// Scale registration object. Extensions can register new scale types (such as log or DB scales) and then
@@ -30,8 +29,6 @@
 			helpers.each(chartInstance.scales, function(scale) {
 				Chart.layoutService.addBox(chartInstance, scale);
 			});
-		},
+		}
 	};
-
-
-}).call(this);
+};

src/core/core.title.js

@@ -1,23 +1,19 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.title = {
 		display: false,
 		position: 'top',
 		fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
 
-		fontColor: '#666',
-		fontFamily: 'Helvetica Neue',
-		fontSize: 12,
 		fontStyle: 'bold',
 		padding: 10,
 
 		// actual title
-		text: '',
+		text: ''
 	};
 
 	Chart.Title = Chart.Element.extend({
@@ -91,7 +87,7 @@
 			// Reset minSize
 			this.minSize = {
 				width: 0,
-				height: 0,
+				height: 0
 			};
 		},
 		afterSetDimensions: helpers.noop,
@@ -108,7 +104,10 @@
 		fit: function() {
 
 			var ctx = this.ctx;
-			var titleFont = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
+			var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+			var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 			// Width
 			if (this.isHorizontal()) {
@@ -129,10 +128,12 @@
 
 				// Title
 				if (this.options.display) {
-					this.minSize.height += this.options.fontSize + (this.options.padding * 2);
+					this.minSize.height += fontSize + (this.options.padding * 2);
 				}
 			} else {
-				// TODO vertical
+				if (this.options.display) {
+					this.minSize.width += fontSize + (this.options.padding * 2);
+				}
 			}
 
 			this.width = this.minSize.width;
@@ -143,7 +144,7 @@
 
 		// Shared Methods
 		isHorizontal: function() {
-			return this.options.position == "top" || this.options.position == "bottom";
+			return this.options.position === "top" || this.options.position === "bottom";
 		},
 
 		// Actualy draw the title block on the canvas
@@ -152,44 +153,41 @@
 				var ctx = this.ctx;
 				var titleX, titleY;
 
+				var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
+				var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+				var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+				ctx.fillStyle = fontColor; // render in correct colour
+				ctx.font = titleFont;
+
 				// Horizontal
 				if (this.isHorizontal()) {
 					// Title
-					if (this.options.display) {
+					ctx.textAlign = "center";
+					ctx.textBaseline = 'middle';
 
-						ctx.textAlign = "center";
-						ctx.textBaseline = 'middle';
-						ctx.fillStyle = this.options.fontColor; // render in correct colour
-						ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
+					titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
+					titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
 
-						titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
-						titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
-
-						ctx.fillText(this.options.text, titleX, titleY);
-					}
+					ctx.fillText(this.options.text, titleX, titleY);
 				} else {
 
 					// Title
-					if (this.options.display) {
-						titleX = this.options.position == 'left' ? this.left + (this.options.fontSize / 2) : this.right - (this.options.fontSize / 2);
-						titleY = this.top + ((this.bottom - this.top) / 2);
-						var rotation = this.options.position == 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
-
-						ctx.save();
-						ctx.translate(titleX, titleY);
-						ctx.rotate(rotation);
-						ctx.textAlign = "center";
-						ctx.fillStyle = this.options.fontColor; // render in correct colour
-						ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
-						ctx.textBaseline = 'middle';
-						ctx.fillText(this.options.text, 0, 0);
-						ctx.restore();
-
-					}
+					titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
+					titleY = this.top + ((this.bottom - this.top) / 2);
+					var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
 
+					ctx.save();
+					ctx.translate(titleX, titleY);
+					ctx.rotate(rotation);
+					ctx.textAlign = "center";
+					ctx.textBaseline = 'middle';
+					ctx.fillText(this.options.text, 0, 0);
+					ctx.restore();
 				}
 			}
 		}
 	});
-
-}).call(this);
+};

src/core/core.tooltip.js

@@ -1,31 +1,22 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.tooltips = {
 		enabled: true,
 		custom: null,
 		mode: 'single',
 		backgroundColor: "rgba(0,0,0,0.8)",
-		titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-		titleFontSize: 12,
 		titleFontStyle: "bold",
 		titleSpacing: 2,
 		titleMarginBottom: 6,
 		titleColor: "#fff",
 		titleAlign: "left",
-		bodyFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-		bodyFontSize: 12,
-		bodyFontStyle: "normal",
 		bodySpacing: 2,
 		bodyColor: "#fff",
 		bodyAlign: "left",
-		footerFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-		footerFontSize: 12,
 		footerFontStyle: "bold",
 		footerSpacing: 2,
 		footerMarginTop: 6,
@@ -33,6 +24,8 @@
 		footerAlign: "left",
 		yPadding: 6,
 		xPadding: 6,
+		yAlign : 'center',
+		xAlign : 'center',
 		caretSize: 5,
 		cornerRadius: 6,
 		multiKeyBackground: '#fff',
@@ -72,8 +65,8 @@
 			// Args are: (tooltipItems, data)
 			beforeFooter: helpers.noop,
 			footer: helpers.noop,
-			afterFooter: helpers.noop,
-		},
+			afterFooter: helpers.noop
+		}
 	};
 
 	// Helper to push or concat based on if the 2nd parameter is an array or not
@@ -97,29 +90,31 @@
 					// Positioning
 					xPadding: options.tooltips.xPadding,
 					yPadding: options.tooltips.yPadding,
+					xAlign : options.tooltips.yAlign,
+					yAlign : options.tooltips.xAlign,
 
 					// Body
 					bodyColor: options.tooltips.bodyColor,
-					_bodyFontFamily: options.tooltips.bodyFontFamily,
-					_bodyFontStyle: options.tooltips.bodyFontStyle,
+					_bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily),
+					_bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle),
 					_bodyAlign: options.tooltips.bodyAlign,
-					bodyFontSize: options.tooltips.bodyFontSize,
+					bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize),
 					bodySpacing: options.tooltips.bodySpacing,
 
 					// Title
 					titleColor: options.tooltips.titleColor,
-					_titleFontFamily: options.tooltips.titleFontFamily,
-					_titleFontStyle: options.tooltips.titleFontStyle,
-					titleFontSize: options.tooltips.titleFontSize,
+					_titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily),
+					_titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle),
+					titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize),
 					_titleAlign: options.tooltips.titleAlign,
 					titleSpacing: options.tooltips.titleSpacing,
 					titleMarginBottom: options.tooltips.titleMarginBottom,
 
 					// Footer
 					footerColor: options.tooltips.footerColor,
-					_footerFontFamily: options.tooltips.footerFontFamily,
-					_footerFontStyle: options.tooltips.footerFontStyle,
-					footerFontSize: options.tooltips.footerFontSize,
+					_footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily),
+					_footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle),
+					footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize),
 					_footerAlign: options.tooltips.footerAlign,
 					footerSpacing: options.tooltips.footerSpacing,
 					footerMarginTop: options.tooltips.footerMarginTop,
@@ -129,8 +124,8 @@
 					cornerRadius: options.tooltips.cornerRadius,
 					backgroundColor: options.tooltips.backgroundColor,
 					opacity: 0,
-					legendColorBackground: options.tooltips.multiKeyBackground,
-				},
+					legendColorBackground: options.tooltips.multiKeyBackground
+				}
 			});
 		},
 
@@ -160,11 +155,9 @@
 			var lines = [];
 
 			helpers.each(tooltipItems, function(bodyItem) {
-				var beforeLabel = this._options.tooltips.callbacks.beforeLabel.call(this, bodyItem, data) || '';
-				var bodyLabel = this._options.tooltips.callbacks.label.call(this, bodyItem, data) || '';
-				var afterLabel = this._options.tooltips.callbacks.afterLabel.call(this, bodyItem, data) || '';
-
-				lines.push(beforeLabel + bodyLabel + afterLabel);
+				helpers.pushAllIfDefined(this._options.tooltips.callbacks.beforeLabel.call(this, bodyItem, data), lines);
+				helpers.pushAllIfDefined(this._options.tooltips.callbacks.label.call(this, bodyItem, data), lines);
+				helpers.pushAllIfDefined(this._options.tooltips.callbacks.afterLabel.call(this, bodyItem, data), lines);
 			}, this);
 
 			return lines;
@@ -191,24 +184,25 @@
 			return lines;
 		},
 
-		getAveragePosition: function(elements){
+		getAveragePosition: function(elements) {
 
-			if(!elements.length){
+			if (!elements.length) {
 				return false;
 			}
 
 			var xPositions = [];
 			var yPositions = [];
 
-			helpers.each(elements, function(el){
-				if(el) {
+			helpers.each(elements, function(el) {
+				if (el) {
 					var pos = el.tooltipPosition();
 					xPositions.push(pos.x);
 					yPositions.push(pos.y);
 				}
 			});
 
-			var x = 0, y = 0;
+			var x = 0,
+				y = 0;
 			for (var i = 0; i < xPositions.length; i++) {
 				x += xPositions[i];
 				y += yPositions[i];
@@ -222,7 +216,7 @@
 		},
 
 		update: function(changed) {
-			if (this._active.length){
+			if (this._active.length) {
 				this._model.opacity = 1;
 
 				var element = this._active[0],
@@ -237,7 +231,7 @@
 						xLabel: element._xScale ? element._xScale.getLabelForIndex(element._index, element._datasetIndex) : '',
 						yLabel: yScale ? yScale.getLabelForIndex(element._index, element._datasetIndex) : '',
 						index: element._index,
-						datasetIndex: element._datasetIndex,
+						datasetIndex: element._datasetIndex
 					});
 					tooltipPosition = this.getAveragePosition(this._active);
 				} else {
@@ -253,19 +247,19 @@
 								xLabel: currentElement._xScale ? currentElement._xScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
 								yLabel: yScale ? yScale.getLabelForIndex(currentElement._index, currentElement._datasetIndex) : '',
 								index: element._index,
-								datasetIndex: datasetIndex,
+								datasetIndex: datasetIndex
 							});
 						}
-					});
+					}, null, element._yScale.options.stacked);
 
 					helpers.each(this._active, function(active) {
 						if (active) {
-						  labelColors.push({
-						  	borderColor: active._view.borderColor,
-						  	backgroundColor: active._view.backgroundColor
-						  });
+							labelColors.push({
+								borderColor: active._view.borderColor,
+								backgroundColor: active._view.backgroundColor
+							});
 						}
-					}, this);
+					}, null, element._yScale.options.stacked);
 
 					tooltipPosition = this.getAveragePosition(this._active);
 					tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
@@ -277,23 +271,22 @@
 					beforeBody: this.getBeforeBody(tooltipItems, this._data),
 					body: this.getBody(tooltipItems, this._data),
 					afterBody: this.getAfterBody(tooltipItems, this._data),
-					footer: this.getFooter(tooltipItems, this._data),
+					footer: this.getFooter(tooltipItems, this._data)
 				});
 
 				helpers.extend(this._model, {
 					x: Math.round(tooltipPosition.x),
 					y: Math.round(tooltipPosition.y),
 					caretPadding: helpers.getValueOrDefault(tooltipPosition.padding, 2),
-					labelColors: labelColors,
+					labelColors: labelColors
 				});
 
-				// We need to determine alignment of 
+				// We need to determine alignment of
 				var tooltipSize = this.getTooltipSize(this._model);
 				this.determineAlignment(tooltipSize); // Smart Tooltip placement to stay on the canvas
 
 				helpers.extend(this._model, this.getBackgroundPoint(this._model, tooltipSize));
-			}
-			else{
+			} else {
 				this._model.opacity = 0;
 			}
 
@@ -330,7 +323,7 @@
 			ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 			helpers.each(vm.beforeBody.concat(vm.afterBody), function(line) {
 				size.width = Math.max(size.width, ctx.measureText(line).width);
-			}, this);
+			});
 			helpers.each(vm.body, function(line) {
 				size.width = Math.max(size.width, ctx.measureText(line).width + (this._options.tooltips.mode !== 'single' ? (vm.bodyFontSize + 2) : 0));
 			}, this);
@@ -344,30 +337,61 @@
 			return size;
 		},
 		determineAlignment: function determineAlignment(size) {
-			this._model.xAlign = this._model.yAlign = "center";
-
 			if (this._model.y < size.height) {
 				this._model.yAlign = 'top';
 			} else if (this._model.y > (this._chart.height - size.height)) {
 				this._model.yAlign = 'bottom';
 			}
 
-			var lf, rf;
+			var lf, rf; // functions to determine left, right alignment
+			var olf, orf; // functions to determine if left/right alignment causes tooltip to go outside chart
+			var yf; // function to get the y alignment if the tooltip goes outside of the left or right edges
 			var _this = this;
 			var midX = (this._chartInstance.chartArea.left + this._chartInstance.chartArea.right) / 2;
+			var midY = (this._chartInstance.chartArea.top + this._chartInstance.chartArea.bottom) / 2;
 
 			if (this._model.yAlign === 'center') {
-				lf = function(x) { return x <= midX; };
-				rf = function(x) { return x > midX; };
+				lf = function(x) {
+					return x <= midX;
+				};
+				rf = function(x) {
+					return x > midX;
+				};
 			} else {
-				lf = function(x) { return x <= (size.width / 2); };
-				rf = function(x) { return x >= (_this._chart.width - (size.width / 2)); };
+				lf = function(x) {
+					return x <= (size.width / 2);
+				};
+				rf = function(x) {
+					return x >= (_this._chart.width - (size.width / 2));
+				};
 			}
 
+			olf = function(x) {
+				return x + size.width > _this._chart.width;
+			};
+			orf = function(x) {
+				return x - size.width < 0;
+			};
+			yf = function(y) {
+				return y <= midY ? 'top' : 'bottom';
+			};
+
 			if (lf(this._model.x)) {
 				this._model.xAlign = 'left';
+
+				// Is tooltip too wide and goes over the right side of the chart.?
+				if (olf(this._model.x)) {
+					this._model.xAlign = 'center';
+					this._model.yAlign = yf(this._model.y);
+				}
 			} else if (rf(this._model.x)) {
 				this._model.xAlign = 'right';
+
+				// Is tooltip too wide and goes outside left edge of canvas?
+				if (orf(this._model.x)) {
+					this._model.xAlign = 'center';
+					this._model.yAlign = yf(this._model.y);
+				}
 			}
 		},
 		getBackgroundPoint: function getBackgroundPoint(vm, size) {
@@ -391,7 +415,7 @@
 				pt.y -= (size.height / 2);
 			}
 
-			if (vm.yAlign == 'center') {
+			if (vm.yAlign === 'center') {
 				if (vm.xAlign === 'left') {
 					pt.x += vm.caretPadding + vm.caretSize;
 				} else if (vm.xAlign === 'right') {
@@ -454,7 +478,8 @@
 				}
 			}
 
-			ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString();
+			var bgColor = helpers.color(vm.backgroundColor);
+			ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
 			ctx.beginPath();
 			ctx.moveTo(x1, y1);
 			ctx.lineTo(x2, y2);
@@ -466,23 +491,27 @@
 			if (vm.title.length) {
 				ctx.textAlign = vm._titleAlign;
 				ctx.textBaseline = "top";
-				ctx.fillStyle = helpers.color(vm.titleColor).alpha(opacity).rgbString();
+				
+				var titleColor = helpers.color(vm.titleColor);
+				ctx.fillStyle = titleColor.alpha(opacity * titleColor.alpha()).rgbString();
 				ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
 
 				helpers.each(vm.title, function(title, i) {
 					ctx.fillText(title, pt.x, pt.y);
 					pt.y += vm.titleFontSize + vm.titleSpacing; // Line Height and spacing
-					
+
 					if (i + 1 === vm.title.length) {
 						pt.y += vm.titleMarginBottom - vm.titleSpacing; // If Last, add margin, remove spacing
 					}
-				}, this);
+				});
 			}
 		},
 		drawBody: function drawBody(pt, vm, ctx, opacity) {
 			ctx.textAlign = vm._bodyAlign;
 			ctx.textBaseline = "top";
-			ctx.fillStyle = helpers.color(vm.bodyColor).alpha(opacity).rgbString();
+
+			var bodyColor = helpers.color(vm.bodyColor);
+			ctx.fillStyle = bodyColor.alpha(opacity * bodyColor.alpha()).rgbString();
 			ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
 			// Before Body
@@ -529,13 +558,15 @@
 
 				ctx.textAlign = vm._footerAlign;
 				ctx.textBaseline = "top";
-				ctx.fillStyle = helpers.color(vm.footerColor).alpha(opacity).rgbString();
+				
+				var footerColor = helpers.color(vm.footerColor);
+				ctx.fillStyle = footerColor.alpha(opacity * footerColor.alpha()).rgbString();
 				ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
 
 				helpers.each(vm.footer, function(footer) {
 					ctx.fillText(footer, pt.x, pt.y);
 					pt.y += vm.footerFontSize + vm.footerSpacing;
-				}, this);
+				});
 			}
 		},
 		draw: function draw() {
@@ -558,13 +589,14 @@
 
 			if (this._options.tooltips.enabled) {
 				// Draw Background
-				ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString();
+				var bgColor = helpers.color(vm.backgroundColor);
+				ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
 				helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
 				ctx.fill();
 
 				// Draw Caret
 				this.drawCaret(pt, tooltipSize, opacity, caretPadding);
-				
+
 				// Draw Title, Body, and Footer
 				pt.x += vm.xPadding;
 				pt.y += vm.yPadding;
@@ -580,5 +612,4 @@
 			}
 		}
 	});
-
-}).call(this);
+};

src/elements/element.arc.js

@@ -1,96 +1,81 @@
-/*!
- * Chart.js
- * http://chartjs.org/
- * Version: {{ version }}
- *
- * Copyright 2015 Nick Downie
- * Released under the MIT license
- * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
- */
+"use strict";
 
+module.exports = function(Chart, moment) {
 
-(function() {
+  var helpers = Chart.helpers;
 
-	"use strict";
+  Chart.defaults.global.elements.arc = {
+    backgroundColor: Chart.defaults.global.defaultColor,
+    borderColor: "#fff",
+    borderWidth: 2
+  };
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+  Chart.elements.Arc = Chart.Element.extend({
+    inLabelRange: function(mouseX) {
+      var vm = this._view;
 
-	Chart.defaults.global.elements.arc = {
-		backgroundColor: Chart.defaults.global.defaultColor,
-		borderColor: "#fff",
-		borderWidth: 2
-	};
+      if (vm) {
+        return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
+      } else {
+        return false;
+      }
+    },
+    inRange: function(chartX, chartY) {
 
-	Chart.elements.Arc = Chart.Element.extend({
-		inLabelRange: function(mouseX) {
-			var vm = this._view;
+      var vm = this._view;
 
-			if (vm) {
-				return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
-			} else {
-				return false;
-			}
-		},
-		inRange: function(chartX, chartY) {
+      if (vm) {
+        var pointRelativePosition = helpers.getAngleFromPoint(vm, {
+          x: chartX,
+          y: chartY
+        });
 
-			var vm = this._view;
+        // Put into the range of (-PI/2, 3PI/2]
+        var startAngle = vm.startAngle < (-0.5 * Math.PI) ? vm.startAngle + (2.0 * Math.PI) : vm.startAngle > (1.5 * Math.PI) ? vm.startAngle - (2.0 * Math.PI) : vm.startAngle;
+        var endAngle = vm.endAngle < (-0.5 * Math.PI) ? vm.endAngle + (2.0 * Math.PI) : vm.endAngle > (1.5 * Math.PI) ? vm.endAngle - (2.0 * Math.PI) : vm.endAngle;
 
-			if (vm) {
-				var pointRelativePosition = helpers.getAngleFromPoint(vm, {
-					x: chartX,
-					y: chartY
-				});
+        //Check if within the range of the open/close angle
+        var betweenAngles = (pointRelativePosition.angle >= startAngle && pointRelativePosition.angle <= endAngle),
+          withinRadius = (pointRelativePosition.distance >= vm.innerRadius && pointRelativePosition.distance <= vm.outerRadius);
 
-				// Put into the range of (-PI/2, 3PI/2]
-				var startAngle = vm.startAngle < (-0.5 * Math.PI) ? vm.startAngle + (2.0 * Math.PI) : vm.startAngle > (1.5 * Math.PI) ? vm.startAngle - (2.0 * Math.PI) : vm.startAngle;
-				var endAngle = vm.endAngle < (-0.5 * Math.PI) ? vm.endAngle + (2.0 * Math.PI) : vm.endAngle > (1.5 * Math.PI) ? vm.endAngle - (2.0 * Math.PI) : vm.endAngle;
+        return (betweenAngles && withinRadius);
+      } else {
+        return false;
+      }
+    },
+    tooltipPosition: function() {
+      var vm = this._view;
 
-				//Check if within the range of the open/close angle
-				var betweenAngles = (pointRelativePosition.angle >= startAngle && pointRelativePosition.angle <= endAngle),
-					withinRadius = (pointRelativePosition.distance >= vm.innerRadius && pointRelativePosition.distance <= vm.outerRadius);
+      var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2),
+        rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
+      return {
+        x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
+        y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
+      };
+    },
+    draw: function() {
 
-				return (betweenAngles && withinRadius);
-			} else {
-				return false;
-			}			
-		},
-		tooltipPosition: function() {
-			var vm = this._view;
+      var ctx = this._chart.ctx;
+      var vm = this._view;
 
-			var centreAngle = vm.startAngle + ((vm.endAngle - vm.startAngle) / 2),
-				rangeFromCentre = (vm.outerRadius - vm.innerRadius) / 2 + vm.innerRadius;
-			return {
-				x: vm.x + (Math.cos(centreAngle) * rangeFromCentre),
-				y: vm.y + (Math.sin(centreAngle) * rangeFromCentre)
-			};
-		},
-		draw: function() {
+      ctx.beginPath();
 
-			var ctx = this._chart.ctx;
-			var vm = this._view;
+      ctx.arc(vm.x, vm.y, vm.outerRadius, vm.startAngle, vm.endAngle);
 
-			ctx.beginPath();
+      ctx.arc(vm.x, vm.y, vm.innerRadius, vm.endAngle, vm.startAngle, true);
 
-			ctx.arc(vm.x, vm.y, vm.outerRadius, vm.startAngle, vm.endAngle);
+      ctx.closePath();
+      ctx.strokeStyle = vm.borderColor;
+      ctx.lineWidth = vm.borderWidth;
 
-			ctx.arc(vm.x, vm.y, vm.innerRadius, vm.endAngle, vm.startAngle, true);
+      ctx.fillStyle = vm.backgroundColor;
 
-			ctx.closePath();
-			ctx.strokeStyle = vm.borderColor;
-			ctx.lineWidth = vm.borderWidth;
+      ctx.fill();
+      ctx.lineJoin = 'bevel';
 
-			ctx.fillStyle = vm.backgroundColor;
-
-			ctx.fill();
-			ctx.lineJoin = 'bevel';
-
-			if (vm.borderWidth) {
-				ctx.stroke();
-			}
-		}
-	});
-
-
-}).call(this);
+      if (vm.borderWidth) {
+        ctx.stroke();
+      }
+    }
+  });
+};

src/elements/element.line.js

@@ -1,21 +1,8 @@
-/*!
- * Chart.js
- * http://chartjs.org/
- * Version: {{ version }}
- *
- * Copyright 2015 Nick Downie
- * Released under the MIT license
- * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
- */
+"use strict";
 
+module.exports = function(Chart) {
 
-(function() {
-
-	"use strict";
-
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.elements.line = {
 		tension: 0.4,
@@ -26,7 +13,7 @@
 		borderDash: [],
 		borderDashOffset: 0.0,
 		borderJoinStyle: 'miter',
-		fill: true, // do we fill in the area between the line and its base axis
+		fill: true // do we fill in the area between the line and its base axis
 	};
 
 	Chart.elements.Line = Chart.Element.extend({
@@ -34,15 +21,15 @@
 			var ctx = this._chart.ctx;
 
 			if (point._view.skip) {
-				skipHandler.call(this, previousPoint, point, nextPoint); 
+				skipHandler.call(this, previousPoint, point, nextPoint);
 			} else if (previousPoint._view.skip) {
 				previousSkipHandler.call(this, previousPoint, point, nextPoint);
-			} else if (point._view.tension === 0) { 
+			} else if (point._view.tension === 0) {
 				ctx.lineTo(point._view.x, point._view.y);
 			} else {
 				// Line between points
 				ctx.bezierCurveTo(
-					previousPoint._view.controlPointNextX, 
+					previousPoint._view.controlPointNextX,
 					previousPoint._view.controlPointNextY,
 					point._view.controlPointPreviousX,
 					point._view.controlPointPreviousY,
@@ -169,7 +156,6 @@
 
 			ctx.stroke();
 			ctx.restore();
-		},
+		}
 	});
-
-}).call(this);
+};

src/elements/element.point.js

@@ -1,31 +1,19 @@
-/*!
- * Chart.js
- * http://chartjs.org/
- * Version: {{ version }}
- *
- * Copyright 2015 Nick Downie
- * Released under the MIT license
- * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
- */
+"use strict";
 
+module.exports = function(Chart) {
 
-(function() {
-
-	"use strict";
-
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.elements.point = {
 		radius: 3,
+		pointStyle: 'circle',
 		backgroundColor: Chart.defaults.global.defaultColor,
 		borderWidth: 1,
 		borderColor: Chart.defaults.global.defaultColor,
 		// Hover
 		hitRadius: 1,
 		hoverRadius: 4,
-		hoverBorderWidth: 1,
+		hoverBorderWidth: 1
 	};
 
 
@@ -67,23 +55,99 @@
 				return;
 			}
 
-			if (vm.radius > 0 || vm.borderWidth > 0) {
+			if (typeof vm.pointStyle === 'object' && ((vm.pointStyle.toString() === '[object HTMLImageElement]') || (vm.pointStyle.toString() === '[object HTMLCanvasElement]'))) {
+				ctx.drawImage(vm.pointStyle, vm.x - vm.pointStyle.width / 2, vm.y - vm.pointStyle.height / 2);
+				return;
+			}
 
-				ctx.beginPath();
-
-				ctx.arc(vm.x, vm.y, vm.radius || Chart.defaults.global.elements.point.radius, 0, Math.PI * 2);
-				ctx.closePath();
+			if (!isNaN(vm.radius) && vm.radius > 0) {
 
 				ctx.strokeStyle = vm.borderColor || Chart.defaults.global.defaultColor;
-				ctx.lineWidth = vm.borderWidth || Chart.defaults.global.elements.point.borderWidth;
+				ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, Chart.defaults.global.elements.point.borderWidth);
 
 				ctx.fillStyle = vm.backgroundColor || Chart.defaults.global.defaultColor;
 
-				ctx.fill();
+				var radius = vm.radius;
+
+				var xOffset;
+				var yOffset;
+
+				switch (vm.pointStyle) {
+					// Default includes circle
+					default: ctx.beginPath();
+					ctx.arc(vm.x, vm.y, radius, 0, Math.PI * 2);
+					ctx.closePath();
+					ctx.fill();
+					break;
+					case 'triangle':
+							ctx.beginPath();
+						var edgeLength = 3 * radius / Math.sqrt(3);
+						var height = edgeLength * Math.sqrt(3) / 2;
+						ctx.moveTo(vm.x - edgeLength / 2, vm.y + height / 3);
+						ctx.lineTo(vm.x + edgeLength / 2, vm.y + height / 3);
+						ctx.lineTo(vm.x, vm.y - 2 * height / 3);
+						ctx.closePath();
+						ctx.fill();
+						break;
+					case 'rect':
+							ctx.fillRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+						ctx.strokeRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+						break;
+					case 'rectRot':
+							ctx.translate(vm.x, vm.y);
+						ctx.rotate(Math.PI / 4);
+						ctx.fillRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+						ctx.strokeRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius);
+						ctx.setTransform(1, 0, 0, 1, 0, 0);
+						break;
+					case 'cross':
+							ctx.beginPath();
+						ctx.moveTo(vm.x, vm.y + radius);
+						ctx.lineTo(vm.x, vm.y - radius);
+						ctx.moveTo(vm.x - radius, vm.y);
+						ctx.lineTo(vm.x + radius, vm.y);
+						ctx.closePath();
+						break;
+					case 'crossRot':
+							ctx.beginPath();
+						xOffset = Math.cos(Math.PI / 4) * radius;
+						yOffset = Math.sin(Math.PI / 4) * radius;
+						ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
+						ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
+						ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
+						ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+						ctx.closePath();
+						break;
+					case 'star':
+							ctx.beginPath();
+						ctx.moveTo(vm.x, vm.y + radius);
+						ctx.lineTo(vm.x, vm.y - radius);
+						ctx.moveTo(vm.x - radius, vm.y);
+						ctx.lineTo(vm.x + radius, vm.y);
+						xOffset = Math.cos(Math.PI / 4) * radius;
+						yOffset = Math.sin(Math.PI / 4) * radius;
+						ctx.moveTo(vm.x - xOffset, vm.y - yOffset);
+						ctx.lineTo(vm.x + xOffset, vm.y + yOffset);
+						ctx.moveTo(vm.x - xOffset, vm.y + yOffset);
+						ctx.lineTo(vm.x + xOffset, vm.y - yOffset);
+						ctx.closePath();
+						break;
+					case 'line':
+							ctx.beginPath();
+						ctx.moveTo(vm.x - radius, vm.y);
+						ctx.lineTo(vm.x + radius, vm.y);
+						ctx.closePath();
+						break;
+					case 'dash':
+							ctx.beginPath();
+						ctx.moveTo(vm.x, vm.y);
+						ctx.lineTo(vm.x + radius, vm.y);
+						ctx.closePath();
+						break;
+				}
+
 				ctx.stroke();
 			}
 		}
 	});
-
-
-}).call(this);
+};

src/elements/element.rectangle.js

@@ -1,15 +1,14 @@
-(function() {
+"use strict";
 
-	"use strict";
+module.exports = function(Chart) {
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+	var helpers = Chart.helpers;
 
 	Chart.defaults.global.elements.rectangle = {
 		backgroundColor: Chart.defaults.global.defaultColor,
 		borderWidth: 0,
 		borderColor: Chart.defaults.global.defaultColor,
+		borderSkipped: 'bottom'
 	};
 
 	Chart.elements.Rectangle = Chart.Element.extend({
@@ -38,12 +37,31 @@
 			ctx.strokeStyle = vm.borderColor;
 			ctx.lineWidth = vm.borderWidth;
 
-			// It'd be nice to keep this class totally generic to any rectangle
-			// and simply specify which border to miss out.
-			ctx.moveTo(leftX, vm.base);
-			ctx.lineTo(leftX, top);
-			ctx.lineTo(rightX, top);
-			ctx.lineTo(rightX, vm.base);
+			// Corner points, from bottom-left to bottom-right clockwise
+			// | 1 2 |
+			// | 0 3 |
+			var corners = [
+				[leftX, vm.base],
+				[leftX, top],
+				[rightX, top],
+				[rightX, vm.base]
+			];
+
+			// Find first (starting) corner with fallback to 'bottom' 
+			var borders = ['bottom', 'left', 'top', 'right'];
+			var startCorner = borders.indexOf(vm.borderSkipped, 0);
+			if (startCorner === -1)
+				startCorner = 0;
+
+			function cornerAt(index) {
+				return corners[(startCorner + index) % 4];
+			}
+
+			// Draw rectangle from 'startCorner'
+			ctx.moveTo.apply(ctx, cornerAt(0));
+			for (var i = 1; i < 4; i++)
+				ctx.lineTo.apply(ctx, cornerAt(i));
+
 			ctx.fill();
 			if (vm.borderWidth) {
 				ctx.stroke();
@@ -82,9 +100,7 @@
 				x: vm.x,
 				y: vm.y
 			};
-		},
+		}
 	});
 
-
-
-}).call(this);
+};

src/scales/scale.category.js

@@ -1,50 +1,71 @@
-(function() {
-    "use strict";
+"use strict";
 
-    var root = this,
-        Chart = root.Chart,
-        helpers = Chart.helpers;
+module.exports = function(Chart) {
 
-    // Default config for a category scale
-    var defaultConfig = {
-        position: "bottom",
-    };
+	var helpers = Chart.helpers;
+	// Default config for a category scale
+	var defaultConfig = {
+		position: "bottom"
+	};
 
-    var DatasetScale = Chart.Scale.extend({
-        buildTicks: function(index) {
-            this.ticks = this.chart.data.labels;
-        },
+	var DatasetScale = Chart.Scale.extend({
+		buildTicks: function(index) {
+			this.startIndex = 0;
+			this.endIndex = this.chart.data.labels.length;
+			var findIndex;
 
-        getLabelForIndex: function(index, datasetIndex) {
-            return this.ticks[index];
-        },
+			if (this.options.ticks.min !== undefined) {
+				// user specified min value
+				findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.min);
+				this.startIndex = findIndex !== -1 ? findIndex : this.startIndex;
+			}
 
-        // Used to get data value locations.  Value can either be an index or a numerical value
-        getPixelForValue: function(value, index, datasetIndex, includeOffset) {
-            if (this.isHorizontal()) {
-                var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-                var valueWidth = innerWidth / Math.max((this.chart.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-                var widthOffset = (valueWidth * index) + this.paddingLeft;
+			if (this.options.ticks.max !== undefined) {
+				// user specified max value
+				findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.max);
+				this.endIndex = findIndex !== -1 ? findIndex : this.endIndex;
+			}
 
-                if (this.options.gridLines.offsetGridLines && includeOffset) {
-                    widthOffset += (valueWidth / 2);
-                }
+			// If we are viewing some subset of labels, slice the original array
+			this.ticks = (this.startIndex === 0 && this.endIndex === this.chart.data.labels.length) ? this.chart.data.labels : this.chart.data.labels.slice(this.startIndex, this.endIndex + 1);
+		},
 
-                return this.left + Math.round(widthOffset);
-            } else {
-                var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-                var valueHeight = innerHeight / Math.max((this.chart.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-                var heightOffset = (valueHeight * index) + this.paddingTop;
+		getLabelForIndex: function(index, datasetIndex) {
+			return this.ticks[index];
+		},
 
-                if (this.options.gridLines.offsetGridLines && includeOffset) {
-                    heightOffset += (valueHeight / 2);
-                }
+		// Used to get data value locations.  Value can either be an index or a numerical value
+		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+			// 1 is added because we need the length but we have the indexes
+			var offsetAmt = Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
 
-                return this.top + Math.round(heightOffset);
-            }
-        },
-    });
+			if (this.isHorizontal()) {
+				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+				var valueWidth = innerWidth / offsetAmt;
+				var widthOffset = (valueWidth * (index - this.startIndex)) + this.paddingLeft;
 
-    Chart.scaleService.registerScaleType("category", DatasetScale, defaultConfig);
+				if (this.options.gridLines.offsetGridLines && includeOffset) {
+					widthOffset += (valueWidth / 2);
+				}
 
-}).call(this);
+				return this.left + Math.round(widthOffset);
+			} else {
+				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+				var valueHeight = innerHeight / offsetAmt;
+				var heightOffset = (valueHeight * (index - this.startIndex)) + this.paddingTop;
+
+				if (this.options.gridLines.offsetGridLines && includeOffset) {
+					heightOffset += (valueHeight / 2);
+				}
+
+				return this.top + Math.round(heightOffset);
+			}
+		},
+		getPixelForTick: function(index, includeOffset) {
+			return this.getPixelForValue(this.ticks[index], index + this.startIndex, null, includeOffset);
+		}
+	});
+
+	Chart.scaleService.registerScaleType("category", DatasetScale, defaultConfig);
+
+};

src/scales/scale.linear.js

@@ -1,9 +1,8 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	var defaultConfig = {
 		position: "left",
@@ -43,12 +42,14 @@
 
 			if (this.options.stacked) {
 				var valuesPerType = {};
+				var hasPositiveValues = false;
+				var hasNegativeValues = false;
 
 				helpers.each(this.chart.data.datasets, function(dataset) {
 					if (valuesPerType[dataset.type] === undefined) {
 						valuesPerType[dataset.type] = {
 							positiveValues: [],
-							negativeValues: [],
+							negativeValues: []
 						};
 					}
 
@@ -71,8 +72,10 @@
 								positiveValues[index] = 100;
 							} else {
 								if (value < 0) {
+									hasNegativeValues = true;
 									negativeValues[index] += value;
 								} else {
+									hasPositiveValues = true;
 									positiveValues[index] += value;
 								}
 							}
@@ -153,33 +156,44 @@
 
 			// Figure out what the max number of ticks we can support it is based on the size of
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
-			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on 
+			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 			// the graph
 
 			var maxTicks;
 
 			if (this.isHorizontal()) {
-				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-				                    Math.ceil(this.width / 50));
+				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.width / 50));
 			} else {
 				// The factor of 2 used to scale the font size has been experimentally determined.
-				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-				                    Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.height / (2 * tickFontSize)));
 			}
 
-			// Make sure we always have at least 2 ticks 
+			// Make sure we always have at least 2 ticks
 			maxTicks = Math.max(2, maxTicks);
 
-			// To get a "nice" value for the tick spacing, we will use the appropriately named 
+			// To get a "nice" value for the tick spacing, we will use the appropriately named
 			// "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
 			// for details.
 
-			var niceRange = helpers.niceNum(this.max - this.min, false);
-			var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
+			var spacing;
+			var fixedStepSizeSet = (this.options.ticks.fixedStepSize && this.options.ticks.fixedStepSize > 0) || (this.options.ticks.stepSize && this.options.ticks.stepSize > 0);
+			if (fixedStepSizeSet) {
+				spacing = helpers.getValueOrDefault(this.options.ticks.fixedStepSize, this.options.ticks.stepSize);
+			} else {
+				var niceRange = helpers.niceNum(this.max - this.min, false);
+				spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
+			}
 			var niceMin = Math.floor(this.min / spacing) * spacing;
 			var niceMax = Math.ceil(this.max / spacing) * spacing;
+			var numSpaces = (niceMax - niceMin) / spacing;
 
-			var numSpaces = Math.ceil((niceMax - niceMin) / spacing);
+			// If very close to our rounded value, use it.
+			if (helpers.almostEquals(numSpaces, Math.round(numSpaces), spacing / 1000)) {
+				numSpaces = Math.round(numSpaces);
+			} else {
+				numSpaces = Math.ceil(numSpaces);
+			}
 
 			// Put the values into the ticks array
 			this.ticks.push(this.options.ticks.min !== undefined ? this.options.ticks.min : niceMin);
@@ -188,7 +202,7 @@
 			}
 			this.ticks.push(this.options.ticks.max !== undefined ? this.options.ticks.max : niceMax);
 
-			if (this.options.position == "left" || this.options.position == "right") {
+			if (this.options.position === "left" || this.options.position === "right") {
 				// We are in a vertical orientation. The top value is the highest. So reverse the array
 				this.ticks.reverse();
 			}
@@ -197,7 +211,6 @@
 			// range of the scale
 			this.max = helpers.max(this.ticks);
 			this.min = helpers.min(this.ticks);
-			this.ticksAsNumbers = this.ticks.slice();
 
 			if (this.options.ticks.reverse) {
 				this.ticks.reverse();
@@ -208,17 +221,19 @@
 				this.start = this.min;
 				this.end = this.max;
 			}
-
-			this.zeroLineIndex = this.ticks.indexOf(0);
 		},
-
 		getLabelForIndex: function(index, datasetIndex) {
 			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 		},
+		convertTicksToLabels: function() {
+			this.ticksAsNumbers = this.ticks.slice();
+			this.zeroLineIndex = this.ticks.indexOf(0);
 
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
+		},
 		// Utils
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
-			// This must be called after fit has been run so that 
+			// This must be called after fit has been run so that
 			//      this.left, this.top, this.right, and this.bottom have been defined
 			var rightValue = +this.getRightValue(value);
 			var pixel;
@@ -236,8 +251,8 @@
 		},
 		getPixelForTick: function(index, includeOffset) {
 			return this.getPixelForValue(this.ticksAsNumbers[index], null, null, includeOffset);
-		},
+		}
 	});
 	Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);
 
-}).call(this);
+};

src/scales/scale.logarithmic.js

@@ -1,9 +1,8 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	var defaultConfig = {
 		position: "left",
@@ -104,17 +103,17 @@
 		buildTicks: function() {
 			// Reset the ticks array. Later on, we will draw a grid line at these positions
 			// The array simply contains the numerical value of the spots where ticks will be
-			this.tickValues = [];
+			this.ticks = [];
 
 			// Figure out what the max number of ticks we can support it is based on the size of
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
-			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on 
+			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 			// the graph
 
 			var tickVal = this.options.ticks.min !== undefined ? this.options.ticks.min : Math.pow(10, Math.floor(helpers.log10(this.min)));
 
 			while (tickVal < this.max) {
-				this.tickValues.push(tickVal);
+				this.ticks.push(tickVal);
 
 				var exp = Math.floor(helpers.log10(tickVal));
 				var significand = Math.floor(tickVal / Math.pow(10, exp)) + 1;
@@ -128,20 +127,20 @@
 			}
 
 			var lastTick = this.options.ticks.max !== undefined ? this.options.ticks.max : tickVal;
-			this.tickValues.push(lastTick);
+			this.ticks.push(lastTick);
 
-			if (this.options.position == "left" || this.options.position == "right") {
+			if (this.options.position === "left" || this.options.position === "right") {
 				// We are in a vertical orientation. The top value is the highest. So reverse the array
-				this.tickValues.reverse();
+				this.ticks.reverse();
 			}
 
 			// At this point, we need to update our max and min given the tick values since we have expanded the
 			// range of the scale
-			this.max = helpers.max(this.tickValues);
-			this.min = helpers.min(this.tickValues);
+			this.max = helpers.max(this.ticks);
+			this.min = helpers.min(this.ticks);
 
 			if (this.options.ticks.reverse) {
-				this.tickValues.reverse();
+				this.ticks.reverse();
 
 				this.start = this.max;
 				this.end = this.min;
@@ -149,8 +148,11 @@
 				this.start = this.min;
 				this.end = this.max;
 			}
+		},
+		convertTicksToLabels: function() {
+			this.tickValues = this.ticks.slice();
 
-			this.ticks = this.tickValues.slice();
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
 		},
 		// Get the correct tooltip label
 		getLabelForIndex: function(index, datasetIndex) {
@@ -172,7 +174,7 @@
 				} else {
 					var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
 					pixel = this.left + (innerWidth / range * (helpers.log10(newVal) - helpers.log10(this.start)));
-					return pixel + this.paddingLeft;
+					pixel += this.paddingLeft;
 				}
 			} else {
 				// Bottom - top since pixels increase downard on a screen
@@ -180,13 +182,14 @@
 					pixel = this.top + this.paddingTop;
 				} else {
 					var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-					return (this.bottom - this.paddingBottom) - (innerHeight / range * (helpers.log10(newVal) - helpers.log10(this.start)));
+					pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (helpers.log10(newVal) - helpers.log10(this.start)));
 				}
 			}
 
-		},
+			return pixel;
+		}
 
 	});
 	Chart.scaleService.registerScaleType("logarithmic", LogarithmicScale, defaultConfig);
 
-}).call(this);
+};

src/scales/scale.radialLinear.js

@@ -1,9 +1,8 @@
-(function() {
-	"use strict";
+"use strict";
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
+
+	var helpers = Chart.helpers;
 
 	var defaultConfig = {
 		display: true,
@@ -31,22 +30,18 @@
 			backdropPaddingY: 2,
 
 			//Number - The backdrop padding to the side of the label in pixels
-			backdropPaddingX: 2,
+			backdropPaddingX: 2
 		},
 
 		pointLabels: {
-			//String - Point label font declaration
-			fontFamily: "'Arial'",
-
-			//String - Point label font weight
-			fontStyle: "normal",
-
 			//Number - Point label font size in pixels
 			fontSize: 10,
 
-			//String - Point label font colour
-			fontColor: "#666",
-		},
+			//Function - Used to convert point labels
+			callback: function(label) {
+				return label;
+			}
+		}
 	};
 
 	var LinearRadialScale = Chart.Scale.extend({
@@ -61,7 +56,8 @@
 			this.yCenter = Math.round(this.height / 2);
 
 			var minSize = helpers.min([this.height, this.width]);
-			this.drawingArea = (this.options.display) ? (minSize / 2) - (this.options.ticks.fontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
 		},
 		determineDataLimits: function() {
 			this.min = null;
@@ -90,11 +86,6 @@
 				}
 			}, this);
 
-			if (this.min === this.max) {
-				this.min--;
-				this.max++;
-			}
-
 			// If we are forcing it to begin at 0, but 0 will already be rendered on the chart,
 			// do nothing since that would make the chart weird. If the user really wants a weird chart
 			// axis, they can manually override it
@@ -110,21 +101,38 @@
 					this.min = 0;
 				}
 			}
+
+			if (this.options.ticks.min !== undefined) {
+				this.min = this.options.ticks.min;
+			} else if (this.options.ticks.suggestedMin !== undefined) {
+				this.min = Math.min(this.min, this.options.ticks.suggestedMin);
+			}
+
+			if (this.options.ticks.max !== undefined) {
+				this.max = this.options.ticks.max;
+			} else if (this.options.ticks.suggestedMax !== undefined) {
+				this.max = Math.max(this.max, this.options.ticks.suggestedMax);
+			}
+
+			if (this.min === this.max) {
+				this.min--;
+				this.max++;
+			}
 		},
 		buildTicks: function() {
-			
+
 
 			this.ticks = [];
 
 			// Figure out what the max number of ticks we can support it is based on the size of
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
-			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on 
+			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 			// the graph
-			var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-			                        Math.ceil(this.drawingArea / (1.5 * this.options.ticks.fontSize)));
-			maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks 
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize)));
+			maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks
 
-			// To get a "nice" value for the tick spacing, we will use the appropriately named 
+			// To get a "nice" value for the tick spacing, we will use the appropriately named
 			// "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks
 			// for details.
 
@@ -133,10 +141,14 @@
 			var niceMin = Math.floor(this.min / spacing) * spacing;
 			var niceMax = Math.ceil(this.max / spacing) * spacing;
 
+			var numSpaces = Math.ceil((niceMax - niceMin) / spacing);
+
 			// Put the values into the ticks array
-			for (var j = niceMin; j <= niceMax; j += spacing) {
-				this.ticks.push(j);
+			this.ticks.push(this.options.ticks.min !== undefined ? this.options.ticks.min : niceMin);
+			for (var j = 1; j < numSpaces; ++j) {
+				this.ticks.push(niceMin + (j * spacing));
 			}
+			this.ticks.push(this.options.ticks.max !== undefined ? this.options.ticks.max : niceMax);
 
 			// At this point, we need to update our max and min given the tick values since we have expanded the
 			// range of the scale
@@ -155,12 +167,15 @@
 
 			this.zeroLineIndex = this.ticks.indexOf(0);
 		},
+		convertTicksToLabels: function() {
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
+
+			// Point labels
+			this.pointLabels = this.chart.data.labels.map(this.options.pointLabels.callback, this);
+		},
 		getLabelForIndex: function(index, datasetIndex) {
 			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 		},
-		getCircumference: function() {
-			return ((Math.PI * 2) / this.getValueCount());
-		},
 		fit: function() {
 			/*
 			 * Right, this is really confusing and there is a lot of maths going on here
@@ -190,10 +205,14 @@
 			 * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
 			 */
 
+			var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+			var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
 
 			// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
 			// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
-			var largestPossibleRadius = helpers.min([(this.height / 2 - this.options.pointLabels.fontSize - 5), this.width / 2]),
+			var largestPossibleRadius = helpers.min([(this.height / 2 - pointLabelFontSize - 5), this.width / 2]),
 				pointPosition,
 				i,
 				textWidth,
@@ -209,11 +228,12 @@
 				radiusReductionRight,
 				radiusReductionLeft,
 				maxWidthRadius;
-			this.ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
+			this.ctx.font = pointLabeFont;
+
 			for (i = 0; i < this.getValueCount(); i++) {
 				// 5px to space the text slightly out - similar to what we do in the draw function.
 				pointPosition = this.getPointPosition(i, largestPossibleRadius);
-				textWidth = this.ctx.measureText(this.options.ticks.callback(this.chart.data.labels[i])).width + 5;
+				textWidth = this.ctx.measureText(this.pointLabels[i] ? this.pointLabels[i] : '').width + 5;
 				if (i === 0 || i === this.getValueCount() / 2) {
 					// If we're at index zero, or exactly the middle, we're at exactly the top/bottom
 					// of the radar chart, so text will be aligned centrally, so we'll half it and compare
@@ -276,9 +296,9 @@
 		},
 		getDistanceFromCenterForValue: function(value) {
 			if (value === null) {
-				return 0; // null always in center	
-			} 
-			
+				return 0; // null always in center
+			}
+
 			// Take into account half font size + the yPadding of the top value
 			var scalingFactor = this.drawingArea / (this.max - this.min);
 			if (this.options.reverse) {
@@ -334,22 +354,27 @@
 						}
 
 						if (this.options.ticks.display) {
-							ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+							var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+							var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+							var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+							var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+							var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+							ctx.font = tickLabelFont;
 
 							if (this.options.ticks.showLabelBackdrop) {
 								var labelWidth = ctx.measureText(label).width;
 								ctx.fillStyle = this.options.ticks.backdropColor;
 								ctx.fillRect(
 									this.xCenter - labelWidth / 2 - this.options.ticks.backdropPaddingX,
-									yHeight - this.options.ticks.fontSize / 2 - this.options.ticks.backdropPaddingY,
+									yHeight - tickFontSize / 2 - this.options.ticks.backdropPaddingY,
 									labelWidth + this.options.ticks.backdropPaddingX * 2,
-									this.options.ticks.fontSize + this.options.ticks.backdropPaddingY * 2
+									tickFontSize + this.options.ticks.backdropPaddingY * 2
 								);
 							}
 
 							ctx.textAlign = 'center';
 							ctx.textBaseline = "middle";
-							ctx.fillStyle = this.options.ticks.fontColor;
+							ctx.fillStyle = tickFontColor;
 							ctx.fillText(label, this.xCenter, yHeight);
 						}
 					}
@@ -370,11 +395,18 @@
 						}
 						// Extra 3px out for some label spacing
 						var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
-						ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
-						ctx.fillStyle = this.options.pointLabels.fontColor;
+						
+						var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor);
+						var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+						var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+						var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+						var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
 
-						var labelsCount = this.chart.data.labels.length,
-							halfLabelsCount = this.chart.data.labels.length / 2,
+						ctx.font = pointLabeFont;
+						ctx.fillStyle = pointLabelFontColor;
+
+						var labelsCount = this.pointLabels.length,
+							halfLabelsCount = this.pointLabels.length / 2,
 							quarterLabelsCount = halfLabelsCount / 2,
 							upperHalf = (i < quarterLabelsCount || i > labelsCount - quarterLabelsCount),
 							exactQuarter = (i === quarterLabelsCount || i === labelsCount - quarterLabelsCount);
@@ -397,7 +429,7 @@
 							ctx.textBaseline = 'top';
 						}
 
-						ctx.fillText(this.chart.data.labels[i], pointLabelPosition.x, pointLabelPosition.y);
+						ctx.fillText(this.pointLabels[i] ? this.pointLabels[i] : '', pointLabelPosition.x, pointLabelPosition.y);
 					}
 				}
 			}
@@ -405,5 +437,4 @@
 	});
 	Chart.scaleService.registerScaleType("radialLinear", LinearRadialScale, defaultConfig);
 
-
-}).call(this);
+};

src/scales/scale.time.js

@@ -1,60 +1,56 @@
-(function(moment) {
-	"use strict";
+/*global window: false */
+"use strict";
 
-	if (!moment) {
-		console.warn('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at http://momentjs.com/');
-		return;
-	}
+var moment = require('moment');
+moment = typeof(moment) === 'function' ? moment : window.moment;
 
-	var root = this,
-		Chart = root.Chart,
-		helpers = Chart.helpers;
+module.exports = function(Chart) {
 
+	var helpers = Chart.helpers;
 	var time = {
-		units: [
-			{
-				name: 'millisecond',
-				steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
-			}, {
-				name: 'second',
-				steps: [1, 2, 5, 10, 30]
-			}, {
-				name: 'minute',
-				steps: [1, 2, 5, 10, 30]
-			}, {
-				name: 'hour',
-				steps: [1, 2, 3, 6, 12]
-			}, {
-				name: 'day',
-				steps: [1, 2, 5]
-			}, {
-				name: 'week',
-				maxStep: 4
-			}, {
-				name: 'month',
-				maxStep: 3
-			}, {
-				name: 'quarter',
-				maxStep: 4,
-			}, {
-				name: 'year',
-				maxStep: false
-			},
-		],
+		units: [{
+			name: 'millisecond',
+			steps: [1, 2, 5, 10, 20, 50, 100, 250, 500]
+		}, {
+			name: 'second',
+			steps: [1, 2, 5, 10, 30]
+		}, {
+			name: 'minute',
+			steps: [1, 2, 5, 10, 30]
+		}, {
+			name: 'hour',
+			steps: [1, 2, 3, 6, 12]
+		}, {
+			name: 'day',
+			steps: [1, 2, 5]
+		}, {
+			name: 'week',
+			maxStep: 4
+		}, {
+			name: 'month',
+			maxStep: 3
+		}, {
+			name: 'quarter',
+			maxStep: 4
+		}, {
+			name: 'year',
+			maxStep: false
+		}]
 	};
 
 	var defaultConfig = {
 		position: "bottom",
 
 		time: {
-			format: false, // false == date objects or use pattern string from http://momentjs.com/docs/#/parsing/string-format/
+			parser: false, // false == a pattern string from http://momentjs.com/docs/#/parsing/string-format/ or a custom callback that converts its argument to a moment
+			format: false, // DEPRECATED false == date objects, moment object, callback or a pattern string from http://momentjs.com/docs/#/parsing/string-format/
 			unit: false, // false == automatic or override with week, month, year, etc.
 			round: false, // none, or override with week, month, year, etc.
 			displayFormat: false, // DEPRECATED
 
 			// defaults to unit's corresponding unitFormat below or override using pattern string from http://momentjs.com/docs/#/displaying/format/
 			displayFormats: {
-				'millisecond': 'SSS [ms]',
+				'millisecond': 'h:mm:ss.SSS a', // 11:20:01.123 AM,
 				'second': 'h:mm:ss a', // 11:20:01 AM
 				'minute': 'h:mm:ss a', // 11:20:01 AM
 				'hour': 'MMM D, hA', // Sept 4, 5PM
@@ -62,20 +58,30 @@
 				'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
 				'month': 'MMM YYYY', // Sept 2015
 				'quarter': '[Q]Q - YYYY', // Q3
-				'year': 'YYYY', // 2015
-			}, 
+				'year': 'YYYY' // 2015
+			}
 		},
+		ticks: {
+			autoSkip: false,
+		}
 	};
 
 	var TimeScale = Chart.Scale.extend({
+		initialize: function() {
+			if (!moment) {
+				throw new Error('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com');
+			}
+
+			Chart.Scale.prototype.initialize.call(this);
+		},
 		getLabelMoment: function(datasetIndex, index) {
 			return this.labelMoments[datasetIndex][index];
 		},
 		determineDataLimits: function() {
 			this.labelMoments = [];
-			
+
 			// Only parse these once. If the dataset does not have data as x,y pairs, we will use
-			// these 
+			// these
 			var scaleLabelMoments = [];
 			if (this.chart.data.labels && this.chart.data.labels.length > 0) {
 				helpers.each(this.chart.data.labels, function(label, index) {
@@ -86,17 +92,8 @@
 					scaleLabelMoments.push(labelMoment);
 				}, this);
 
-				if (this.options.time.min) {
-					this.firstTick = this.parseTime(this.options.time.min);
-				} else {
-					this.firstTick = moment.min.call(this, scaleLabelMoments);
-				}
-
-				if (this.options.time.max) {
-					this.lastTick = this.parseTime(this.options.time.max);
-				} else {
-					this.lastTick = moment.max.call(this, scaleLabelMoments);
-				}
+				this.firstTick = moment.min.call(this, scaleLabelMoments);
+				this.lastTick = moment.max.call(this, scaleLabelMoments);
 			} else {
 				this.firstTick = null;
 				this.lastTick = null;
@@ -125,6 +122,15 @@
 				this.labelMoments.push(momentsForDataset);
 			}, this);
 
+			// Set these after we've done all the data
+			if (this.options.time.min) {
+				this.firstTick = this.parseTime(this.options.time.min);
+			}
+
+			if (this.options.time.max) {
+				this.lastTick = this.parseTime(this.options.time.max);
+			}
+
 			// We will modify these, so clone for later
 			this.firstTick = (this.firstTick || moment()).clone();
 			this.lastTick = (this.lastTick || moment()).clone();
@@ -132,61 +138,82 @@
 		buildTicks: function(index) {
 
 			this.ticks = [];
-			this.unitScale = 1; // How much we scale the unit by, ie 2 means 2x unit per step 
+			this.unitScale = 1; // How much we scale the unit by, ie 2 means 2x unit per step
+			this.scaleSizeInUnits = 0; // How large the scale is in the base unit (seconds, minutes, etc)
 
 			// Set unit override if applicable
 			if (this.options.time.unit) {
 				this.tickUnit = this.options.time.unit || 'day';
 				this.displayFormat = this.options.time.displayFormats[this.tickUnit];
-				this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true));
+				this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
+				this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, 1);
 			} else {
 				// Determine the smallest needed unit of the time
-				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-				var labelCapacity = innerWidth / (this.options.ticks.fontSize + 10);
-				var buffer = this.options.time.round ? 0 : 2;
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+				var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom);
+				
+				// Crude approximation of what the label length might be
+				var tempFirstLabel = this.tickFormatFunction(this.firstTick, 0, []);
+				var tickLabelWidth = tempFirstLabel.length * tickFontSize;
+				var cosRotation = Math.cos(helpers.toRadians(this.options.ticks.maxRotation));
+				var sinRotation = Math.sin(helpers.toRadians(this.options.ticks.maxRotation));
+				tickLabelWidth = (tickLabelWidth * cosRotation) + (tickFontSize * sinRotation);
+				var labelCapacity = innerWidth / (tickLabelWidth + 10);
 
 				// Start as small as possible
 				this.tickUnit = 'millisecond';
-				this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true) + buffer);
+				this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
 				this.displayFormat = this.options.time.displayFormats[this.tickUnit];
 
 				var unitDefinitionIndex = 0;
 				var unitDefinition = time.units[unitDefinitionIndex];
 
-				// While we aren't ideal and we don't have units left 
+				// While we aren't ideal and we don't have units left
 				while (unitDefinitionIndex < time.units.length) {
 					// Can we scale this unit. If `false` we can scale infinitely
-					//var canScaleUnit = ;
 					this.unitScale = 1;
 
-					if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.tickRange / labelCapacity) < helpers.max(unitDefinition.steps)) {
+					if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.scaleSizeInUnits / labelCapacity) < helpers.max(unitDefinition.steps)) {
 						// Use one of the prefedined steps
 						for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
-							if (unitDefinition.steps[idx] > Math.ceil(this.tickRange / labelCapacity)) {
-								this.unitScale = unitDefinition.steps[idx];
+							if (unitDefinition.steps[idx] > Math.ceil(this.scaleSizeInUnits / labelCapacity)) {
+								this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, unitDefinition.steps[idx]);
 								break;
 							}
 						}
 
 						break;
-					} else if ((unitDefinition.maxStep === false) || (Math.ceil(this.tickRange / labelCapacity) < unitDefinition.maxStep)) {
+					} else if ((unitDefinition.maxStep === false) || (Math.ceil(this.scaleSizeInUnits / labelCapacity) < unitDefinition.maxStep)) {
 						// We have a max step. Scale this unit
-						this.unitScale = Math.ceil(this.tickRange / labelCapacity);
+						this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, Math.ceil(this.scaleSizeInUnits / labelCapacity));
 						break;
 					} else {
 						// Move to the next unit up
 						++unitDefinitionIndex;
 						unitDefinition = time.units[unitDefinitionIndex];
-						
+
 						this.tickUnit = unitDefinition.name;
-						this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit) + buffer);
+						this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
 						this.displayFormat = this.options.time.displayFormats[unitDefinition.name];
 					}
 				}
 			}
 
-			this.firstTick.startOf(this.tickUnit);
-			this.lastTick.endOf(this.tickUnit);
+			var roundedStart;
+
+			// Only round the first tick if we have no hard minimum
+			if (!this.options.time.min) {
+				this.firstTick.startOf(this.tickUnit);
+				roundedStart = this.firstTick;
+			} else {
+				roundedStart = this.firstTick.clone().startOf(this.tickUnit);
+			}
+
+			// Only round the last tick if we have no hard maximum
+			if (!this.options.time.max) {
+				this.lastTick.endOf(this.tickUnit);
+			}
+
 			this.smallestLabelSeparation = this.width;
 
 			helpers.each(this.chart.data.datasets, function(dataset, datasetIndex) {
@@ -200,17 +227,35 @@
 				this.displayFormat = this.options.time.displayFormat;
 			}
 
+			// first tick. will have been rounded correctly if options.time.min is not specified
+			this.ticks.push(this.firstTick.clone());
+
 			// For every unit in between the first and last moment, create a moment and add it to the ticks tick
-			for (var i = 0; i <= this.tickRange; ++i) {
-				if (i % this.unitScale === 0) {
-					this.ticks.push(this.firstTick.clone().add(i, this.tickUnit));
-				} else if (i === this.tickRange) {
-					// Expand out the last one if not an exact multiple
-					this.tickRange = Math.ceil(this.tickRange / this.unitScale) * this.unitScale;
-					this.ticks.push(this.firstTick.clone().add(this.tickRange, this.tickUnit));
-					this.lastTick = this.ticks[this.ticks.length - 1].clone();
+			for (var i = 1; i < this.scaleSizeInUnits; ++i) {
+				var newTick = roundedStart.clone().add(i, this.tickUnit);
+
+				// Are we greater than the max time
+				if (this.options.time.max && newTick.diff(this.lastTick, this.tickUnit, true) >= 0) {
 					break;
 				}
+
+				if (i % this.unitScale === 0) {
+					this.ticks.push(newTick);
+				}
+			}
+
+			// Always show the right tick
+			if (this.ticks[this.ticks.length - 1].diff(this.lastTick, this.tickUnit) !== 0 || this.scaleSizeInUnits === 0) {
+			// this is a weird case. If the <max> option is the same as the end option, we can't just diff the times because the tick was created from the roundedStart
+			// but the last tick was not rounded.
+				if (this.options.time.max) {
+					this.ticks.push(this.lastTick.clone());
+					this.scaleSizeInUnits = this.lastTick.diff(this.ticks[0], this.tickUnit, true);
+				} else {
+					this.scaleSizeInUnits = Math.ceil(this.scaleSizeInUnits / this.unitScale) * this.unitScale;
+					this.ticks.push(this.firstTick.clone().add(this.scaleSizeInUnits, this.tickUnit));
+					this.lastTick = this.ticks[this.ticks.length - 1].clone();
+				}
 			}
 		},
 		// Get tooltip label
@@ -228,40 +273,51 @@
 
 			return label;
 		},
-		convertTicksToLabels: function() {
-			this.ticks = this.ticks.map(function(tick, index, ticks) {
-				var formattedTick = tick.format(this.displayFormat);
+		// Function to format an individual tick mark
+		tickFormatFunction: function tickFormatFunction(tick, index, ticks) {
+			var formattedTick = tick.format(this.displayFormat);
 
-				if (this.options.ticks.userCallback) {
-					return this.options.ticks.userCallback(formattedTick, index, ticks);
-				} else {
-					return formattedTick;
-				}
-			}, this);
+			if (this.options.ticks.userCallback) {
+				return this.options.ticks.userCallback(formattedTick, index, ticks);
+			} else {
+				return formattedTick;
+			}
+		},
+		convertTicksToLabels: function() {
+			this.ticks = this.ticks.map(this.tickFormatFunction, this);
 		},
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
 			var labelMoment = this.getLabelMoment(datasetIndex, index);
-			var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
 
-			var decimal = offset / this.tickRange;
+			if (labelMoment) {
+				var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
 
-			if (this.isHorizontal()) {
-				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-				var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
-				var valueOffset = (innerWidth * decimal) + this.paddingLeft;
+				var decimal = offset / this.scaleSizeInUnits;
 
-				return this.left + Math.round(valueOffset);
-			} else {
-				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-				var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
-				var heightOffset = (innerHeight * decimal) + this.paddingTop;
+				if (this.isHorizontal()) {
+					var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+					var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
+					var valueOffset = (innerWidth * decimal) + this.paddingLeft;
 
-				return this.top + Math.round(heightOffset);
+					return this.left + Math.round(valueOffset);
+				} else {
+					var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+					var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
+					var heightOffset = (innerHeight * decimal) + this.paddingTop;
+
+					return this.top + Math.round(heightOffset);
+				}
 			}
 		},
 		parseTime: function(label) {
+			if (typeof this.options.time.parser === 'string') {
+				return moment(label, this.options.time.parser);
+			}
+			if (typeof this.options.time.parser === 'function') {
+				return this.options.time.parser(label);
+			}
 			// Date objects
-			if (typeof label.getMonth === 'function' || typeof label == 'number') {
+			if (typeof label.getMonth === 'function' || typeof label === 'number') {
 				return moment(label);
 			}
 			// Moment support
@@ -270,12 +326,13 @@
 			}
 			// Custom parsing (return an instance of moment)
 			if (typeof this.options.time.format !== 'string' && this.options.time.format.call) {
+				console.warn("options.time.format is deprecated and replaced by options.time.parser. See http://nnnick.github.io/Chart.js/docs-v2/#scales-time-scale");
 				return this.options.time.format(label);
 			}
 			// Moment format parsing
 			return moment(label, this.options.time.format);
-		},
+		}
 	});
 	Chart.scaleService.registerScaleType("time", TimeScale, defaultConfig);
 
-}).call(this, moment);
+};

test/controller.bar.tests.js

@@ -204,6 +204,7 @@ describe('Bar controller tests', function() {
 				elements: {
 					rectangle: {
 						backgroundColor: 'rgb(255, 0, 0)',
+						borderSkipped: 'top',
 						borderColor: 'rgb(0, 0, 255)',
 						borderWidth: 2,
 					}
@@ -247,6 +248,7 @@ describe('Bar controller tests', function() {
 			base: 194,
 			width: 13.680000000000001,
 			backgroundColor: 'rgb(255, 0, 0)',
+			borderSkipped: 'top',
 			borderColor: 'rgb(0, 0, 255)',
 			borderWidth: 2,
 		});
@@ -264,6 +266,7 @@ describe('Bar controller tests', function() {
 			base: 194,
 			width: 13.680000000000001,
 			backgroundColor: 'rgb(255, 0, 0)',
+			borderSkipped: 'top',
 			borderColor: 'rgb(0, 0, 255)',
 			borderWidth: 2,
 		});
@@ -275,6 +278,255 @@ describe('Bar controller tests', function() {
 		expect(chart.data.datasets[1].metaData.length).toBe(3); // should add a new meta data item
 	});
 
+	it ('should get the correct bar points when datasets of different types exist', function() {
+		var data = {
+			datasets: [{
+				data: [1, 2],
+				label: 'dataset1',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				bar: true,
+			}, {
+				data: [10, 15],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+			}, {
+				data: [30, 25],
+				label: 'dataset3',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				bar: true
+			}],
+			labels: ['label1', 'label2']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+		var chart = {
+			data: data,
+			config: {
+				type: 'bar'
+			},
+			options: {
+				elements: {
+					rectangle: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 0, 255)',
+						borderWidth: 2,
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.bar(chart, 2);
+		controller.buildOrUpdateElements();
+		controller.update();
+
+		var bar1 = chart.data.datasets[2].metaData[0];
+		var bar2 = chart.data.datasets[2].metaData[1];
+
+		expect(bar1._model.x).toBe(119.9);
+		expect(bar1._model.y).toBe(6);
+		expect(bar2._model.x).toBe(186.9);
+		expect(bar2._model.y).toBe(37);
+	});
+
+	it('should update elements when the scales are stacked', function() {
+		var data = {
+			datasets: [{
+				data: [10, -10, 10, -10],
+				label: 'dataset1',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				bar: true
+			}, {
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				bar: true
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bar.scales.yAxes[0]);
+		verticalScaleConfig.stacked = true;
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bar.scales.xAxes[0]);
+		horizontalScaleConfig.stacked = true;
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+		var chart = {
+			data: data,
+			config: {
+				type: 'bar'
+			},
+			options: {
+				elements: {
+					rectangle: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 0, 255)',
+						borderWidth: 2,
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller0 = new Chart.controllers.bar(chart, 0);
+		var controller1 = new Chart.controllers.bar(chart, 1);
+
+		controller0.buildOrUpdateElements();
+		controller0.update();
+		controller1.buildOrUpdateElements();
+		controller1.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual(jasmine.objectContaining({
+			x: 106,
+			y: 60,
+			base: 113,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual(jasmine.objectContaining({
+			x: 144,
+			y: 167,
+			base: 113,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual(jasmine.objectContaining({
+			x: 183,
+			y: 60,
+			base: 113,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual(jasmine.objectContaining({
+			x: 222,
+			y: 167,
+			base: 113,
+			width: 30.400000000000002
+		}));
+
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
+			x: 106,
+			y: 6,
+			base: 60,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
+			x: 144,
+			y: 33,
+			base: 113,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
+			x: 183,
+			y: 60,
+			base: 60,
+			width: 30.400000000000002
+		}));
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
+			x: 222,
+			y: 189,
+			base: 167,
+			width: 30.400000000000002
+		}));
+	});
+
 	it ('should draw all bars', function() {
 		var data = {
 			datasets: [{}, {

test/controller.bubble.tests.js

@@ -0,0 +1,836 @@
+// Test the bubble controller
+describe('Bubble controller tests', function() {
+	it('Should be constructed', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					xAxisID: 'myXAxis',
+					yAxisID: 'myYAxis',
+					data: []
+				}]
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		expect(controller).not.toBe(undefined);
+		expect(controller.index).toBe(0);
+		expect(chart.data.datasets[0].metaData).toEqual([]);
+
+		controller.updateIndex(1);
+		expect(controller.index).toBe(1);
+	});
+
+	it('Should use the first scale IDs if the dataset does not specify them', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: []
+				}]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		expect(chart.data.datasets[0].xAxisID).toBe('firstXScaleID');
+		expect(chart.data.datasets[0].yAxisID).toBe('firstYScaleID');
+	});
+
+	it('Should create point elements for each data item during initialization', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'bubble'
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+
+		expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 points created
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
+	});
+
+	it('should draw all elements', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'bubble'
+			},
+			options: {
+				showLines: true,
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+
+		spyOn(chart.data.datasets[0].metaData[0], 'draw');
+		spyOn(chart.data.datasets[0].metaData[1], 'draw');
+		spyOn(chart.data.datasets[0].metaData[2], 'draw');
+		spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+		controller.draw();
+
+		expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+	});
+
+	it('should update elements', function() {
+		var data = {
+			datasets: [{
+				data: [{
+					x: 10,
+					y: 10,
+					r: 5
+				}, {
+					x: -15,
+					y: -10,
+					r: 1
+				}, {
+					x: 0,
+					y: -9,
+					r: 2
+				}, {
+					x: -4,
+					y: 10,
+					r: 1
+				}],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
+		horizontalScaleConfig.position = 'bottom';
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: xScale.left + 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'bubble'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+						pointStyle: 'circle'
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 5,
+			skip: false,
+
+			// Point
+			x: 195,
+			y: 6,
+
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 1,
+			skip: false,
+
+			// Point
+			x: 89,
+			y: 194,
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 2,
+			skip: false,
+
+			// Point
+			x: 153,
+			y: 185,
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 1,
+			skip: false,
+
+			// Point
+			x: 136,
+			y: 6,
+		});
+
+		// Use dataset level styles for lines & points
+		chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
+		chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
+		chart.data.datasets[0].borderWidth = 0.55;
+
+		// point styles
+		chart.data.datasets[0].radius = 22;
+		chart.data.datasets[0].hitRadius = 3.3;
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: 'rgb(98, 98, 98)',
+			borderWidth: 0.55,
+			borderColor: 'rgb(8, 8, 8)',
+			hitRadius: 3.3,
+			radius: 5,
+			skip: false,
+
+			// Point
+			x: 195,
+			y: 6,
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			backgroundColor: 'rgb(98, 98, 98)',
+			borderWidth: 0.55,
+			borderColor: 'rgb(8, 8, 8)',
+			hitRadius: 3.3,
+			radius: 1,
+			skip: false,
+
+			// Point
+			x: 89,
+			y: 194,
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			backgroundColor: 'rgb(98, 98, 98)',
+			borderWidth: 0.55,
+			borderColor: 'rgb(8, 8, 8)',
+			hitRadius: 3.3,
+			radius: 2,
+			skip: false,
+
+			// Point
+			x: 153,
+			y: 185,
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			backgroundColor: 'rgb(98, 98, 98)',
+			borderWidth: 0.55,
+			borderColor: 'rgb(8, 8, 8)',
+			hitRadius: 3.3,
+			radius: 1,
+			skip: false,
+
+			// Point
+			x: 136,
+			y: 6,
+		});
+
+		// point styles
+		chart.data.datasets[0].metaData[0].custom = {
+			radius: 2.2,
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderColor: 'rgb(4, 6, 8)',
+			borderWidth: 0.787,
+			tension: 0.15,
+			skip: true,
+			hitRadius: 5,
+		};
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderWidth: 0.787,
+			borderColor: 'rgb(4, 6, 8)',
+			hitRadius: 5,
+			radius: 2.2,
+			skip: true,
+
+			// Point
+			x: 195,
+			y: 6,
+		});
+	});
+
+	it('should handle number of data point changes in update', function() {
+		var data = {
+			datasets: [{
+				data: [{
+					x: 10,
+					y: 10,
+					r: 5
+				}, {
+					x: -15,
+					y: -10,
+					r: 1
+				}, {
+					x: 0,
+					y: -9,
+					r: 2
+				}, {
+					x: -4,
+					y: 10,
+					r: 1
+				}],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		chart.data.datasets[0].data = [{
+			x: 1,
+			y: 1,
+			r: 10
+		}, {
+			x: 10,
+			y: 5,
+			r: 2
+		}]; // remove 2 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+
+		chart.data.datasets[0].data = [{
+			x: 10,
+			y: 10,
+			r: 5
+		}, {
+			x: -15,
+			y: -10,
+			r: 1
+		}, {
+			x: 0,
+			y: -9,
+			r: 2
+		}, {
+			x: -4,
+			y: 10,
+			r: 1
+		}, {
+			x: -5,
+			y: 0,
+			r: 3
+		}]; // add 3 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Point).toBe(true);
+	});
+
+	it('should set hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [{
+					x: 10,
+					y: 10,
+					r: 5
+				}, {
+					x: -15,
+					y: -10,
+					r: 1
+				}, {
+					x: 0,
+					y: -9,
+					r: 2
+				}, {
+					x: -4,
+					y: 10,
+					r: 1
+				}],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+					point: {
+						backgroundColor: 'rgb(255, 255, 0)',
+						borderWidth: 1,
+						borderColor: 'rgb(255, 255, 255)',
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		controller.update();
+		var point = chart.data.datasets[0].metaData[0];
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
+		expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
+		expect(point._model.borderWidth).toBe(1);
+		expect(point._model.radius).toBe(9);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].hoverRadius = 3.3;
+		chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].hoverBorderWidth = 2.1;
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(point._model.borderWidth).toBe(2.1);
+		expect(point._model.radius).toBe(8.3);
+
+		// Custom style
+		point.custom = {
+			hoverRadius: 4.4,
+			hoverBorderWidth: 5.5,
+			hoverBackgroundColor: 'rgb(0, 0, 0)',
+			hoverBorderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(point._model.borderWidth).toBe(5.5);
+		expect(point._model.radius).toBe(4.4);
+	});
+
+	it('should remove hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [{
+					x: 10,
+					y: 10,
+					r: 5
+				}, {
+					x: -15,
+					y: -10,
+					r: 1
+				}, {
+					x: 0,
+					y: -9,
+					r: 2
+				}, {
+					x: -4,
+					y: 10,
+					r: 1
+				}],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.bubble.scales.yAxes[0]);
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.bubble.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: 'rgb(255, 255, 0)',
+						borderWidth: 1,
+						borderColor: 'rgb(255, 255, 255)',
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.bubble(chart, 0);
+		controller.update();
+		var point = chart.data.datasets[0].metaData[0];
+
+		chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
+		chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
+		chart.options.elements.point.borderWidth = 10.1;
+		chart.options.elements.point.radius = 1.01;
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
+		expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
+		expect(point._model.borderWidth).toBe(10.1);
+		expect(point._model.radius).toBe(5);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].radius = 3.3;
+		chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].borderWidth = 2.1;
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(point._model.borderWidth).toBe(2.1);
+		expect(point._model.radius).toBe(5);
+
+		// Custom style
+		point.custom = {
+			radius: 4.4,
+			borderWidth: 5.5,
+			backgroundColor: 'rgb(0, 0, 0)',
+			borderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(point._model.borderWidth).toBe(5.5);
+		expect(point._model.radius).toBe(4.4);
+	});
+});

test/controller.doughnut.tests.js

@@ -82,7 +82,7 @@ describe('Doughnut controller tests', function() {
 		var controller = new Chart.controllers.doughnut(chart, 1);
 		controller.reset(); // reset first
 
-		expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -90,9 +90,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 2.166614539857563,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -100,9 +100,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 3.2499218097863447,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -110,9 +110,9 @@ describe('Doughnut controller tests', function() {
 			circumference: 0,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -120,11 +120,11 @@ describe('Doughnut controller tests', function() {
 			circumference: 0.8666458159430251,
 			outerRadius: 49,
 			innerRadius: 36.75
-		});
+		}));
 
 		controller.update();
 
-		expect(chart.data.datasets[1].metaData[0]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: Math.PI * -0.5,
@@ -139,9 +139,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label0',
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[1]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 0.5958182130626666,
@@ -156,9 +156,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label1'
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[2]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 3.8457400228490113,
@@ -173,9 +173,9 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 
 			label: 'label2'
-		});
+		}));
 
-		expect(chart.data.datasets[1].metaData[3]._model).toEqual({
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
 			x: 50,
 			y: 100,
 			startAngle: 3.8457400228490113,
@@ -190,7 +190,7 @@ describe('Doughnut controller tests', function() {
 			hoverBackgroundColor: 'rgb(255, 255, 255)',
 			
 			label: 'label3'
-		});
+		}));
 
 		// Change the amount of data and ensure that arcs are updated accordingly
 		chart.data.datasets[1].data = [1, 2]; // remove 2 elements from dataset 0

test/controller.line.tests.js

@@ -87,6 +87,7 @@ describe('Line controller tests', function() {
 				type: 'line'
 			},
 			options: {
+				showLines: true,
 				scales: {
 					xAxes: [{
 						id: 'firstXScaleID'
@@ -114,6 +115,45 @@ describe('Line controller tests', function() {
 		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
 	});
 
+	it('should draw all elements except lines', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: false,
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			}
+		};
+
+		var controller = new Chart.controllers.line(chart, 0);
+
+		spyOn(chart.data.datasets[0].metaDataset, 'draw');
+		spyOn(chart.data.datasets[0].metaData[0], 'draw');
+		spyOn(chart.data.datasets[0].metaData[1], 'draw');
+		spyOn(chart.data.datasets[0].metaData[2], 'draw');
+		spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+		controller.draw();
+
+		expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(0);
+		expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+	});
+
 	it('should update elements', function() {
 		var data = {
 			datasets: [{
@@ -177,6 +217,7 @@ describe('Line controller tests', function() {
 				type: 'line'
 			},
 			options: {
+				showLines: true,
 				elements: {
 					line: {
 						backgroundColor: 'rgb(255, 0, 0)',
@@ -197,6 +238,7 @@ describe('Line controller tests', function() {
 						hoverRadius: 4,
 						hoverBorderWidth: 1,
 						radius: 3,
+						pointStyle: 'circle'
 					}
 				},
 				scales: {
@@ -240,6 +282,7 @@ describe('Line controller tests', function() {
 			borderColor: Chart.defaults.global.defaultColor,
 			hitRadius: 1,
 			radius: 3,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0.1,
 
@@ -260,6 +303,7 @@ describe('Line controller tests', function() {
 			borderColor: Chart.defaults.global.defaultColor,
 			hitRadius: 1,
 			radius: 3,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0.1,
 
@@ -280,6 +324,7 @@ describe('Line controller tests', function() {
 			borderColor: Chart.defaults.global.defaultColor,
 			hitRadius: 1,
 			radius: 3,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0.1,
 
@@ -300,6 +345,7 @@ describe('Line controller tests', function() {
 			borderColor: Chart.defaults.global.defaultColor,
 			hitRadius: 1,
 			radius: 3,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0.1,
 
@@ -356,6 +402,7 @@ describe('Line controller tests', function() {
 			borderColor: 'rgb(56, 57, 58)',
 			hitRadius: 3.3,
 			radius: 22,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0,
 
@@ -376,6 +423,7 @@ describe('Line controller tests', function() {
 			borderColor: 'rgb(56, 57, 58)',
 			hitRadius: 3.3,
 			radius: 22,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0,
 
@@ -396,6 +444,7 @@ describe('Line controller tests', function() {
 			borderColor: 'rgb(56, 57, 58)',
 			hitRadius: 3.3,
 			radius: 22,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0,
 
@@ -416,6 +465,7 @@ describe('Line controller tests', function() {
 			borderColor: 'rgb(56, 57, 58)',
 			hitRadius: 3.3,
 			radius: 22,
+			pointStyle: 'circle',
 			skip: false,
 			tension: 0,
 
@@ -478,6 +528,7 @@ describe('Line controller tests', function() {
 			borderColor: 'rgb(4, 6, 8)',
 			hitRadius: 5,
 			radius: 2.2,
+			pointStyle: 'circle',
 			skip: true,
 			tension: 0.15,
 
@@ -493,6 +544,409 @@ describe('Line controller tests', function() {
 		});
 	});
 
+	it('should update elements when the y scale is stacked', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, -4, -4],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				type: 'line'
+			}, {
+				data: [20, 20, 30, -30],
+				label: 'dataset1',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				type: 'line'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.line.scales.yAxes[0]);
+		verticalScaleConfig.stacked = true;
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.line.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: xScale.left + 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+						pointStyle: 'circle'
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.line(chart, 0);
+		var controller2 = new Chart.controllers.line(chart, 1);
+		controller.update();
+		controller2.update();
+
+		// Line element
+		expect(chart.data.datasets[0].metaDataset._model).toEqual(jasmine.objectContaining({
+			scaleTop: 0,
+			scaleBottom: 200,
+			scaleZero: 100,
+		}));
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 91,
+			y: 77,
+		}));
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 141,
+			y: 65,
+		}));
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 192,
+			y: 109,
+		}));
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 242,
+			y: 109,
+		}));
+
+		expect(chart.data.datasets[1].metaData[0]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 91,
+			y: 30,
+		}));
+
+		expect(chart.data.datasets[1].metaData[1]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 141,
+			y: 18,
+		}));
+
+		expect(chart.data.datasets[1].metaData[2]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 192,
+			y: 30,
+		}));
+
+		expect(chart.data.datasets[1].metaData[3]._model).toEqual(jasmine.objectContaining({
+			// Point
+			x: 242,
+			y: 180,
+		}));
+
+
+	});
+
+	it('should find the correct scale zero when the data is all positive', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 20, 20],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				type: 'line'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.line.scales.yAxes[0]);
+		verticalScaleConfig.stacked = true;
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.line.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: xScale.left + 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+						pointStyle: 'circle'
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.line(chart, 0);
+		controller.update();
+
+		// Line element
+		expect(chart.data.datasets[0].metaDataset._model).toEqual(jasmine.objectContaining({
+			scaleTop: 0,
+			scaleBottom: 200,
+			scaleZero: 194, // yScale.min is the 0 point
+		}));
+	});
+
+	it('should find the correct scale zero when the data is all negative', function() {
+		var data = {
+			datasets: [{
+				data: [-10, -15, -20, -20],
+				label: 'dataset2',
+				xAxisID: 'firstXScaleID',
+				yAxisID: 'firstYScaleID',
+				type: 'line'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var VerticalScaleConstructor = Chart.scaleService.getScaleConstructor('linear');
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('linear'));
+		verticalScaleConfig = Chart.helpers.scaleMerge(verticalScaleConfig, Chart.defaults.line.scales.yAxes[0]);
+		verticalScaleConfig.stacked = true;
+		var yScale = new VerticalScaleConstructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstYScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var verticalSize = yScale.update(50, 200);
+		yScale.top = 0;
+		yScale.left = 0;
+		yScale.right = verticalSize.width;
+		yScale.bottom = verticalSize.height;
+
+		var HorizontalScaleConstructor = Chart.scaleService.getScaleConstructor('category');
+		var horizontalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		horizontalScaleConfig = Chart.helpers.scaleMerge(horizontalScaleConfig, Chart.defaults.line.scales.xAxes[0]);
+		var xScale = new HorizontalScaleConstructor({
+			ctx: mockContext,
+			options: horizontalScaleConfig,
+			chart: {
+				data: data
+			},
+			id: 'firstXScaleID'
+		});
+
+		// Update ticks & set physical dimensions
+		var horizontalSize = xScale.update(200, 50);
+		xScale.left = yScale.right;
+		xScale.top = yScale.bottom;
+		xScale.right = horizontalSize.width + xScale.left;
+		xScale.bottom = horizontalSize.height + xScale.top;
+
+
+		var chart = {
+			chartArea: {
+				bottom: 200,
+				left: xScale.left,
+				right: xScale.left + 200,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+						pointStyle: 'circle'
+					}
+				},
+				scales: {
+					xAxes: [{
+						id: 'firstXScaleID'
+					}],
+					yAxes: [{
+						id: 'firstYScaleID'
+					}]
+				}
+			},
+			scales: {
+				firstXScaleID: xScale,
+				firstYScaleID: yScale,
+			}
+		};
+
+		var controller = new Chart.controllers.line(chart, 0);
+		controller.update();
+
+		// Line element
+		expect(chart.data.datasets[0].metaDataset._model).toEqual(jasmine.objectContaining({
+			scaleTop: 0,
+			scaleBottom: 200,
+			scaleZero: 6, // yScale.max is the zero point
+		}));
+	});
+
 	it ('should fall back to the line styles for points', function() {
 		var data = {
 			datasets: [{

test/controller.polarArea.tests.js

@@ -0,0 +1,508 @@
+// Test the polar area controller
+describe('Polar area controller tests', function() {
+	it('Should be constructed', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: []
+				}]
+			}
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+		expect(controller).not.toBe(undefined);
+		expect(controller.index).toBe(0);
+		expect(chart.data.datasets[0].metaData).toEqual([]);
+
+		controller.updateIndex(1);
+		expect(controller.index).toBe(1);
+	});
+
+	it('Should create arc elements for each data item during initialization', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'polarArea'
+			},
+			options: {
+			}
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+
+		expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 arcs created
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true);
+	});
+
+	it('should draw all elements', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'polarArea'
+			},
+			options: {
+			}
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+
+		spyOn(chart.data.datasets[0].metaData[0], 'draw');
+		spyOn(chart.data.datasets[0].metaData[1], 'draw');
+		spyOn(chart.data.datasets[0].metaData[2], 'draw');
+		spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+		controller.draw();
+
+		expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+	});
+
+	it('should update elements', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.update(300, 300);
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					arc: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+				},
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 59.5,
+			startAngle: -0.5 * Math.PI,
+			endAngle: 0,
+			backgroundColor: 'rgb(255, 0, 0)',
+			borderColor: 'rgb(0, 255, 0)',
+			borderWidth: 1.2,
+			label: 'label1'
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 80.75,
+			startAngle: 0,
+			endAngle: 0.5 * Math.PI,
+			backgroundColor: 'rgb(255, 0, 0)',
+			borderColor: 'rgb(0, 255, 0)',
+			borderWidth: 1.2,
+			label: 'label2'
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 17,
+			startAngle: 0.5 * Math.PI,
+			endAngle: Math.PI,
+			backgroundColor: 'rgb(255, 0, 0)',
+			borderColor: 'rgb(0, 255, 0)',
+			borderWidth: 1.2,
+			label: 'label3'
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 0,
+			startAngle: Math.PI,
+			endAngle: 1.5 * Math.PI,
+			backgroundColor: 'rgb(255, 0, 0)',
+			borderColor: 'rgb(0, 255, 0)',
+			borderWidth: 1.2,
+			label: 'label4'
+		});
+
+		// arc styles
+		chart.data.datasets[0].backgroundColor = 'rgb(128, 129, 130)';
+		chart.data.datasets[0].borderColor = 'rgb(56, 57, 58)';
+		chart.data.datasets[0].borderWidth = 1.123;
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 59.5,
+			startAngle: -0.5 * Math.PI,
+			endAngle: 0,
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			label: 'label1'
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 80.75,
+			startAngle: 0,
+			endAngle: 0.5 * Math.PI,
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			label: 'label2'
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 17,
+			startAngle: 0.5 * Math.PI,
+			endAngle: Math.PI,
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			label: 'label3'
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 0,
+			startAngle: Math.PI,
+			endAngle: 1.5 * Math.PI,
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			label: 'label4'
+		});
+
+		// arc styles
+		chart.data.datasets[0].metaData[0].custom = {
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderColor: 'rgb(4, 6, 8)',
+			borderWidth: 0.787,
+
+		};
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			x: 150,
+			y: 150,
+			innerRadius: 0,
+			outerRadius: 59.5,
+			startAngle: -0.5 * Math.PI,
+			endAngle: 0,
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderWidth: 0.787,
+			borderColor: 'rgb(4, 6, 8)',
+			label: 'label1'
+		});
+	});
+
+	it('should handle number of data point changes in update', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.update(300, 300);
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					arc: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+				},
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(4);
+
+		chart.data.datasets[0].data = [1, 2]; // remove 2 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(2);
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+
+		chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(5);
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Arc).toBe(true);
+		expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Arc).toBe(true);
+	});
+
+	it('should set arc hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.update(300, 300);
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					arc: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+				},
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+		controller.update();
+		var arc = chart.data.datasets[0].metaData[0];
+
+		controller.setHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)');
+		expect(arc._model.borderColor).toBe('rgb(0, 230, 0)');
+		expect(arc._model.borderWidth).toBe(1.2);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].hoverBorderWidth = 2.1;
+
+		controller.setHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(arc._model.borderWidth).toBe(2.1);
+
+		// Custom style
+		arc.custom = {
+			hoverBorderWidth: 5.5,
+			hoverBackgroundColor: 'rgb(0, 0, 0)',
+			hoverBorderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.setHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(arc._model.borderWidth).toBe(5.5);
+	});
+
+	it('should remove hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.polarArea.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.update(300, 300);
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'line'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					arc: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderColor: 'rgb(0, 255, 0)',
+						borderWidth: 1.2,
+					},
+				},
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.polarArea(chart, 0);
+		controller.update();
+		var arc = chart.data.datasets[0].metaData[0];
+
+		chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)';
+		chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)';
+		chart.options.elements.arc.borderWidth = 10.1;
+
+		controller.removeHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)');
+		expect(arc._model.borderColor).toBe('rgb(50, 51, 52)');
+		expect(arc._model.borderWidth).toBe(10.1);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].borderWidth = 2.1;
+
+		controller.removeHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(arc._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(arc._model.borderWidth).toBe(2.1);
+
+		// Custom style
+		arc.custom = {
+			borderWidth: 5.5,
+			backgroundColor: 'rgb(0, 0, 0)',
+			borderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.removeHoverStyle(arc);
+		expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(arc._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(arc._model.borderWidth).toBe(5.5);
+	});
+});

test/controller.radar.tests.js

@@ -0,0 +1,747 @@
+// Test the polar area controller
+describe('Radar controller tests', function() {
+	it('Should be constructed', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: []
+				}]
+			}
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+		expect(controller).not.toBe(undefined);
+		expect(controller.index).toBe(0);
+		expect(chart.data.datasets[0].metaData).toEqual([]);
+
+		controller.updateIndex(1);
+		expect(controller.index).toBe(1);
+	});
+
+	it('Should create arc elements for each data item during initialization', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}],
+				labels: ['label1', 'label2', 'label3', 'label4']
+			},
+			config: {
+				type: 'radar'
+			},
+			options: {
+			}
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+
+		// Line element
+		expect(chart.data.datasets[0].metaDataset instanceof Chart.elements.Line).toBe(true);
+
+		expect(chart.data.datasets[0].metaData.length).toBe(4); // 4 points created
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
+	});
+
+	it('should draw all elements', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					data: [10, 15, 0, -4]
+				}]
+			},
+			config: {
+				type: 'radar'
+			},
+			options: {
+			}
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+
+		spyOn(chart.data.datasets[0].metaDataset, 'draw');
+		spyOn(chart.data.datasets[0].metaData[0], 'draw');
+		spyOn(chart.data.datasets[0].metaData[1], 'draw');
+		spyOn(chart.data.datasets[0].metaData[2], 'draw');
+		spyOn(chart.data.datasets[0].metaData[3], 'draw');
+
+		controller.draw();
+
+		expect(chart.data.datasets[0].metaDataset.draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[0].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[1].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[2].draw.calls.count()).toBe(1);
+		expect(chart.data.datasets[0].metaData[3].draw.calls.count()).toBe(1);
+	});
+
+	it('should update elements', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2'
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+		scale.update(300, 300);
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'radar'
+			},
+			options: {
+				showLines: true,
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+						pointStyle: 'circle'
+					}
+				}
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+		controller.update();
+
+		// Line element
+		expect(chart.data.datasets[0].metaDataset._model).toEqual({
+			backgroundColor: 'rgb(255, 0, 0)',
+			borderCapStyle: 'round',
+			borderColor: 'rgb(0, 255, 0)',
+			borderDash: [],
+			borderDashOffset: 0.1,
+			borderJoinStyle: 'bevel',
+			borderWidth: 1.2,
+			fill: true,
+			tension: 0.1,
+
+			scaleTop: 0,
+			scaleBottom: 300,
+			scaleZero: {
+				x: 150,
+				y: 133
+			},
+		});
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 3,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0.1,
+
+			// Point
+			x: 150,
+			y: 91,
+
+			// Control points
+			controlPointPreviousX: 146.99829997808834,
+			controlPointPreviousY: 91,
+			controlPointNextX: 155.09829997808833,
+			controlPointNextY: 91,
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 3,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0.1,
+
+			// Point
+			x: 231,
+			y: 150,
+
+			// Control points
+			controlPointPreviousX: 231,
+			controlPointPreviousY: 145.8377025234528,
+			controlPointNextX: 231,
+			controlPointNextY: 153.4377025234528,
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 3,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0.1,
+
+			// Point
+			x: 150,
+			y: 167,
+
+			// Control points
+			controlPointPreviousX: 156.7197526476963,
+			controlPointPreviousY: 167,
+			controlPointNextX: 148.61975264769632,
+			controlPointNextY: 167,
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			backgroundColor: Chart.defaults.global.defaultColor,
+			borderWidth: 1,
+			borderColor: Chart.defaults.global.defaultColor,
+			hitRadius: 1,
+			radius: 3,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0.1,
+
+			// Point
+			x: 150,
+			y: 150,
+
+			// Control points
+			controlPointPreviousX: 150,
+			controlPointPreviousY: 151.7,
+			controlPointNextX: 150,
+			controlPointNextY: 144.1,
+		});
+
+		// Use dataset level styles for lines & points
+		chart.data.datasets[0].tension = 0;
+		chart.data.datasets[0].backgroundColor = 'rgb(98, 98, 98)';
+		chart.data.datasets[0].borderColor = 'rgb(8, 8, 8)';
+		chart.data.datasets[0].borderWidth = 0.55;
+		chart.data.datasets[0].borderCapStyle = 'butt';
+		chart.data.datasets[0].borderDash = [2, 3];
+		chart.data.datasets[0].borderDashOffset = 7;
+		chart.data.datasets[0].borderJoinStyle = 'miter';
+		chart.data.datasets[0].fill = false;
+
+		// point styles
+		chart.data.datasets[0].pointRadius = 22;
+		chart.data.datasets[0].hitRadius = 3.3;
+		chart.data.datasets[0].pointBackgroundColor = 'rgb(128, 129, 130)';
+		chart.data.datasets[0].pointBorderColor = 'rgb(56, 57, 58)';
+		chart.data.datasets[0].pointBorderWidth = 1.123;
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaDataset._model).toEqual({
+			backgroundColor: 'rgb(98, 98, 98)',
+			borderCapStyle: 'butt',
+			borderColor: 'rgb(8, 8, 8)',
+			borderDash: [2, 3],
+			borderDashOffset: 7,
+			borderJoinStyle: 'miter',
+			borderWidth: 0.55,
+			fill: false,
+			tension: 0,
+
+			scaleTop: 0,
+			scaleBottom: 300,
+			scaleZero: {
+				x: 150,
+				y: 133
+			}
+		});
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			hitRadius: 3.3,
+			radius: 22,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0,
+
+			// Point
+			x: 150,
+			y: 91,
+
+			// Control points
+			controlPointPreviousX: 150,
+			controlPointPreviousY: 91,
+			controlPointNextX: 150,
+			controlPointNextY: 91,
+		});
+
+		expect(chart.data.datasets[0].metaData[1]._model).toEqual({
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			hitRadius: 3.3,
+			radius: 22,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0,
+
+			// Point
+			x: 231,
+			y: 150,
+
+			// Control points
+			controlPointPreviousX: 231,
+			controlPointPreviousY: 150,
+			controlPointNextX: 231,
+			controlPointNextY: 150,
+		});
+
+		expect(chart.data.datasets[0].metaData[2]._model).toEqual({
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			hitRadius: 3.3,
+			radius: 22,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0,
+
+			// Point
+			x: 150,
+			y: 167,
+
+			// Control points
+			controlPointPreviousX: 150,
+			controlPointPreviousY: 167,
+			controlPointNextX: 150,
+			controlPointNextY: 167,
+		});
+
+		expect(chart.data.datasets[0].metaData[3]._model).toEqual({
+			backgroundColor: 'rgb(128, 129, 130)',
+			borderWidth: 1.123,
+			borderColor: 'rgb(56, 57, 58)',
+			hitRadius: 3.3,
+			radius: 22,
+			pointStyle: 'circle',
+			skip: false,
+			tension: 0,
+
+			// Point
+			x: 150,
+			y: 150,
+
+			// Control points
+			controlPointPreviousX: 150,
+			controlPointPreviousY: 150,
+			controlPointNextX: 150,
+			controlPointNextY: 150,
+		});
+
+		// Use custom styles for lines & first point
+		chart.data.datasets[0].metaDataset.custom = {
+			tension: 0.25,
+			backgroundColor: 'rgb(55, 55, 54)',
+			borderColor: 'rgb(8, 7, 6)',
+			borderWidth: 0.3,
+			borderCapStyle: 'square',
+			borderDash: [4, 3],
+			borderDashOffset: 4.4,
+			borderJoinStyle: 'round',
+			fill: true,
+		};
+
+		// point styles
+		chart.data.datasets[0].metaData[0].custom = {
+			radius: 2.2,
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderColor: 'rgb(4, 6, 8)',
+			borderWidth: 0.787,
+			tension: 0.15,
+			skip: true,
+			hitRadius: 5,
+		};
+
+		controller.update();
+
+		expect(chart.data.datasets[0].metaDataset._model).toEqual({
+			backgroundColor: 'rgb(55, 55, 54)',
+			borderCapStyle: 'square',
+			borderColor: 'rgb(8, 7, 6)',
+			borderDash: [4, 3],
+			borderDashOffset: 4.4,
+			borderJoinStyle: 'round',
+			borderWidth: 0.3,
+			fill: true,
+			tension: 0.25,
+
+			scaleTop: 0,
+			scaleBottom: 300,
+			scaleZero: {
+				x: 150,
+				y: 133
+			},
+		});
+
+		expect(chart.data.datasets[0].metaData[0]._model).toEqual({
+			backgroundColor: 'rgb(0, 1, 3)',
+			borderWidth: 0.787,
+			borderColor: 'rgb(4, 6, 8)',
+			hitRadius: 5,
+			radius: 2.2,
+			pointStyle: 'circle',
+			skip: true,
+			tension: 0.15,
+
+			// Point
+			x: 150,
+			y: 91,
+
+			// Control points
+			controlPointPreviousX: 145.4974499671325,
+			controlPointPreviousY: 91,
+			controlPointNextX: 157.6474499671325,
+			controlPointNextY: 91,
+		});
+	});
+
+	it('should handle number of data point changes in update', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+		scale.update(300, 300);
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'radar'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: Chart.defaults.global.defaultColor,
+						borderWidth: 1,
+						borderColor: Chart.defaults.global.defaultColor,
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				},
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(4);
+
+		chart.data.datasets[0].data = [1, 2]; // remove 2 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(2);
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+
+		chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
+		controller.buildOrUpdateElements();
+		controller.update();
+		expect(chart.data.datasets[0].metaData.length).toBe(5);
+		expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[2] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[3] instanceof Chart.elements.Point).toBe(true);
+		expect(chart.data.datasets[0].metaData[4] instanceof Chart.elements.Point).toBe(true);
+	});
+
+	it('should set point hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+		scale.update(300, 300);
+
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'radar'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						skipNull: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: 'rgb(255, 255, 0)',
+						borderWidth: 1,
+						borderColor: 'rgb(255, 255, 255)',
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				}
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+		controller.update();
+		var point = chart.data.datasets[0].metaData[0];
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)');
+		expect(point._model.borderColor).toBe('rgb(230, 230, 230)');
+		expect(point._model.borderWidth).toBe(1);
+		expect(point._model.radius).toBe(4);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].pointHoverRadius = 3.3;
+		chart.data.datasets[0].pointHoverBackgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].pointHoverBorderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].pointHoverBorderWidth = 2.1;
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(point._model.borderWidth).toBe(2.1);
+		expect(point._model.radius).toBe(3.3);
+
+		// Custom style
+		point.custom = {
+			hoverRadius: 4.4,
+			hoverBorderWidth: 5.5,
+			hoverBackgroundColor: 'rgb(0, 0, 0)',
+			hoverBorderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.setHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(point._model.borderWidth).toBe(5.5);
+		expect(point._model.radius).toBe(4.4);
+	});
+
+
+	it('should remove hover styles', function() {
+		var data = {
+			datasets: [{
+				data: [10, 15, 0, -4],
+				label: 'dataset2',
+			}],
+			labels: ['label1', 'label2', 'label3', 'label4']
+		};
+		var mockContext = window.createMockContext();
+
+		var ScaleConstructor = Chart.scaleService.getScaleConstructor('radialLinear');
+		var scaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('radialLinear'));
+		scaleConfig = Chart.helpers.scaleMerge(scaleConfig, Chart.defaults.radar.scale);
+		var scale = new ScaleConstructor({
+			ctx: mockContext,
+			options: scaleConfig,
+			chart: {
+				data: data
+			},
+		});
+
+		// Update ticks & set physical dimensions
+		scale.top = 0;
+		scale.left = 0;
+		scale.right = 300;
+		scale.bottom = 300;
+		scale.update(300, 300);
+
+
+		var chart = {
+			chartArea: {
+				bottom: 300,
+				left: 0,
+				right: 300,
+				top: 0
+			},
+			data: data,
+			config: {
+				type: 'radar'
+			},
+			options: {
+				elements: {
+					line: {
+						backgroundColor: 'rgb(255, 0, 0)',
+						borderCapStyle: 'round',
+						borderColor: 'rgb(0, 255, 0)',
+						borderDash: [],
+						borderDashOffset: 0.1,
+						borderJoinStyle: 'bevel',
+						borderWidth: 1.2,
+						fill: true,
+						skipNull: true,
+						tension: 0.1,
+					},
+					point: {
+						backgroundColor: 'rgb(255, 255, 0)',
+						borderWidth: 1,
+						borderColor: 'rgb(255, 255, 255)',
+						hitRadius: 1,
+						hoverRadius: 4,
+						hoverBorderWidth: 1,
+						radius: 3,
+					}
+				}
+			},
+			scale: scale
+		};
+
+		var controller = new Chart.controllers.radar(chart, 0);
+		controller.update();
+		var point = chart.data.datasets[0].metaData[0];
+
+		chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)';
+		chart.options.elements.point.borderColor = 'rgb(50, 51, 52)';
+		chart.options.elements.point.borderWidth = 10.1;
+		chart.options.elements.point.radius = 1.01;
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)');
+		expect(point._model.borderColor).toBe('rgb(50, 51, 52)');
+		expect(point._model.borderWidth).toBe(10.1);
+		expect(point._model.radius).toBe(1.01);
+
+		// Can set hover style per dataset
+		chart.data.datasets[0].radius = 3.3;
+		chart.data.datasets[0].pointBackgroundColor = 'rgb(77, 79, 81)';
+		chart.data.datasets[0].pointBorderColor = 'rgb(123, 125, 127)';
+		chart.data.datasets[0].pointBorderWidth = 2.1;
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)');
+		expect(point._model.borderColor).toBe('rgb(123, 125, 127)');
+		expect(point._model.borderWidth).toBe(2.1);
+		expect(point._model.radius).toBe(3.3);
+
+		// Custom style
+		point.custom = {
+			radius: 4.4,
+			borderWidth: 5.5,
+			backgroundColor: 'rgb(0, 0, 0)',
+			borderColor: 'rgb(10, 10, 10)'
+		};
+
+		controller.removeHoverStyle(point);
+		expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)');
+		expect(point._model.borderColor).toBe('rgb(10, 10, 10)');
+		expect(point._model.borderWidth).toBe(5.5);
+		expect(point._model.radius).toBe(4.4);
+	});
+});

test/core.helpers.tests.js

@@ -225,19 +225,11 @@ describe('Core helper tests', function() {
 					},
 					position: "right",
 					scaleLabel: {
-						fontColor: '#666',
-						fontFamily: 'Helvetica Neue',
-						fontSize: 12,
-						fontStyle: 'normal',
 						labelString: '',
 						display: false,
 					},
 					ticks: {
 						beginAtZero: false,
-						fontColor: "#666",
-						fontFamily: "Helvetica Neue",
-						fontSize: 12,
-						fontStyle: "normal",
 						maxRotation: 90,
 						mirror: false,
 						padding: 10,
@@ -263,19 +255,11 @@ describe('Core helper tests', function() {
 					},
 					position: "left",
 					scaleLabel: {
-						fontColor: '#666',
-						fontFamily: 'Helvetica Neue',
-						fontSize: 12,
-						fontStyle: 'normal',
 						labelString: '',
 						display: false,
 					},
 					ticks: {
 						beginAtZero: false,
-						fontColor: "#666",
-						fontFamily: "Helvetica Neue",
-						fontSize: 12,
-						fontStyle: "normal",
 						maxRotation: 90,
 						mirror: false,
 						padding: 10,
@@ -329,6 +313,13 @@ describe('Core helper tests', function() {
 		expect(helpers.log10(1000)).toBeCloseTo(3, 1e-9);
 	});
 
+	it('should correctly determine if two numbers are essentially equal', function() {
+		expect(helpers.almostEquals(0, Number.EPSILON, 2 * Number.EPSILON)).toBe(true);
+		expect(helpers.almostEquals(1, 1.1, 0.0001)).toBe(false);
+		expect(helpers.almostEquals(1e30, 1e30 + Number.EPSILON, 0)).toBe(false);
+		expect(helpers.almostEquals(1e30, 1e30 + Number.EPSILON, 2 * Number.EPSILON)).toBe(true);
+	});
+
 	it('Should generate ids', function() {
 		expect(helpers.uid()).toBe('chart-0');
 		expect(helpers.uid()).toBe('chart-1');
@@ -493,4 +484,184 @@ describe('Core helper tests', function() {
 			args: []
 		}])
 	});
+
+	it ('should get the maximum width and height for a node', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(200);
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(300);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "50%";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "50%";
+		div.appendChild(parentDiv);
+
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
 });

test/core.layoutService.tests.js

@@ -46,24 +46,24 @@ describe('Test the layout service', function() {
 		Chart.layoutService.update(chartInstance, canvasWidth, canvasHeight);
 
 		expect(chartInstance.chartArea).toEqual({
-			left: 55,
-			right: 245,
-			top: 5,
-			bottom: 75.0664716027288,
+			left: 50,
+			right: 250,
+			top: 0,
+			bottom: 81.0423977855504,
 		});
 
 		// Is xScale at the right spot
-		expect(xScale.left).toBe(55);
-		expect(xScale.right).toBe(245);
-		expect(xScale.top).toBe(75.0664716027288);
-		expect(xScale.bottom).toBe(145);
-		expect(xScale.labelRotation).toBe(57);
+		expect(xScale.left).toBe(50);
+		expect(xScale.right).toBe(250);
+		expect(xScale.top).toBe(81.0423977855504);
+		expect(xScale.bottom).toBe(150);
+		expect(xScale.labelRotation).toBe(55);
 
 		// Is yScale at the right spot
-		expect(yScale.left).toBe(5);
-		expect(yScale.right).toBe(55);
-		expect(yScale.top).toBe(5);
-		expect(yScale.bottom).toBe(75.0664716027288);
+		expect(yScale.left).toBe(0);
+		expect(yScale.right).toBe(50);
+		expect(yScale.top).toBe(0);
+		expect(yScale.bottom).toBe(81.0423977855504);
 	});
 
 	it('should fit scales that are in the top and right positions', function() {
@@ -114,24 +114,24 @@ describe('Test the layout service', function() {
 		Chart.layoutService.update(chartInstance, canvasWidth, canvasHeight);
 
 		expect(chartInstance.chartArea).toEqual({
-			left: 5,
-			right: 195,
-			top: 74.9335283972712,
-			bottom: 145,
+			left: 0,
+			right: 200,
+			top: 68.9576022144496,
+			bottom: 150,
 		});
 
 		// Is xScale at the right spot
-		expect(xScale.left).toBe(5);
-		expect(xScale.right).toBe(195);
-		expect(xScale.top).toBe(5);
-		expect(xScale.bottom).toBe(74.9335283972712);
-		expect(xScale.labelRotation).toBe(57);
+		expect(xScale.left).toBe(0);
+		expect(xScale.right).toBe(200);
+		expect(xScale.top).toBe(0);
+		expect(xScale.bottom).toBe(68.9576022144496);
+		expect(xScale.labelRotation).toBe(55);
 
 		// Is yScale at the right spot
-		expect(yScale.left).toBe(195);
-		expect(yScale.right).toBe(245);
-		expect(yScale.top).toBe(74.9335283972712);
-		expect(yScale.bottom).toBe(145);
+		expect(yScale.left).toBe(200);
+		expect(yScale.right).toBe(250);
+		expect(yScale.top).toBe(68.9576022144496);
+		expect(yScale.bottom).toBe(150);
 	});
 
 	it('should fit multiple axes in the same position', function() {
@@ -193,28 +193,28 @@ describe('Test the layout service', function() {
 		Chart.layoutService.update(chartInstance, canvasWidth, canvasHeight);
 
 		expect(chartInstance.chartArea).toEqual({
-			left: 115,
-			right: 245,
-			top: 5,
-			bottom: 68.48521368620018,
+			left: 110,
+			right: 250,
+			top: 0,
+			bottom: 75,
 		});
 
 		// Is xScale at the right spot
-		expect(xScale.left).toBe(115);
-		expect(xScale.right).toBe(245);
-		expect(xScale.top).toBe(68.48521368620018);
-		expect(xScale.bottom).toBe(145);
+		expect(xScale.left).toBe(110);
+		expect(xScale.right).toBe(250);
+		expect(xScale.top).toBe(75);
+		expect(xScale.bottom).toBe(150);
 
 		// Are yScales at the right spot
-		expect(yScale1.left).toBe(5);
-		expect(yScale1.right).toBe(55);
-		expect(yScale1.top).toBe(5);
-		expect(yScale1.bottom).toBe(68.48521368620018);
+		expect(yScale1.left).toBe(0);
+		expect(yScale1.right).toBe(50);
+		expect(yScale1.top).toBe(0);
+		expect(yScale1.bottom).toBe(75);
 
-		expect(yScale2.left).toBe(55);
-		expect(yScale2.right).toBe(115);
-		expect(yScale2.top).toBe(5);
-		expect(yScale2.bottom).toBe(68.48521368620018);
+		expect(yScale2.left).toBe(50);
+		expect(yScale2.right).toBe(110);
+		expect(yScale2.top).toBe(0);
+		expect(yScale2.bottom).toBe(75);
 	});
 
 	// This is an oddball case. What happens is, when the scales are fit the first time they must fit within the assigned size. In this case,
@@ -257,18 +257,18 @@ describe('Test the layout service', function() {
 		Chart.layoutService.update(chartInstance, canvasWidth, canvasHeight);
 
 		expect(chartInstance.chartArea).toEqual({
-			left: 5,
-			right: 295,
-			top: 5,
-			bottom: 345,
+			left: 0,
+			right: 300,
+			top: 0,
+			bottom: 350,
 		});
 
-		expect(scale.left).toBe(5);
-		expect(scale.right).toBe(295);
-		expect(scale.top).toBe(5);
-		expect(scale.bottom).toBe(345);
-		expect(scale.width).toBe(290);
-		expect(scale.height).toBe(340)
+		expect(scale.left).toBe(0);
+		expect(scale.right).toBe(300);
+		expect(scale.top).toBe(0);
+		expect(scale.bottom).toBe(350);
+		expect(scale.width).toBe(300);
+		expect(scale.height).toBe(350)
 	});
 
 	it ('should fix a full width box correctly', function() {
@@ -334,27 +334,27 @@ describe('Test the layout service', function() {
 		Chart.layoutService.update(chartInstance, canvasWidth, canvasHeight);
 
 		expect(chartInstance.chartArea).toEqual({
-			left: 45,
-			right: 245,
-			top: 45,
-			bottom: 105,
+			left: 60,
+			right: 250,
+			top: 54.495963211660246,
+			bottom: 80.0664716027288,
 		});
 
 		// Are xScales at the right spot
-		expect(xScale1.left).toBe(45);
-		expect(xScale1.right).toBe(245);
-		expect(xScale1.top).toBe(105);
-		expect(xScale1.bottom).toBe(145);
+		expect(xScale1.left).toBe(60);
+		expect(xScale1.right).toBe(250);
+		expect(xScale1.top).toBeCloseTo(80.06, 1e-3);
+		expect(xScale1.bottom).toBe(150);
 
-		expect(xScale2.left).toBe(5);
-		expect(xScale2.right).toBe(245);
-		expect(xScale2.top).toBe(5);
-		expect(xScale2.bottom).toBe(45);
+		expect(xScale2.left).toBe(0);
+		expect(xScale2.right).toBe(250);
+		expect(xScale2.top).toBe(0);
+		expect(xScale2.bottom).toBeCloseTo(54.49, 1e-3);
 
 		// Is yScale at the right spot
-		expect(yScale.left).toBe(5);
-		expect(yScale.right).toBe(45);
-		expect(yScale.top).toBe(45);
-		expect(yScale.bottom).toBe(105);
+		expect(yScale.left).toBe(0);
+		expect(yScale.right).toBe(60);
+		expect(yScale.top).toBeCloseTo(54.49, 1e-3);
+		expect(yScale.bottom).toBeCloseTo(80.06, 1e-3);
 	});
 });

test/core.legend.tests.js

@@ -0,0 +1,305 @@
+// Test the rectangle element
+
+describe('Legend block tests', function() {
+	it('Should be constructed', function() {
+		var legend = new Chart.Legend({});
+		expect(legend).not.toBe(undefined);
+	});
+
+	it('should have the correct default config', function() {
+		expect(Chart.defaults.global.legend).toEqual({
+			display: true,
+			position: 'top',
+			fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
+			reverse: false,
+
+			// a callback that will handle
+			onClick: jasmine.any(Function),
+
+			labels: {
+				boxWidth: 40,
+				padding: 10,
+				generateLabels: jasmine.any(Function)
+			}
+		});
+	});
+
+	it('should update correctly', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					label: 'dataset1',
+					backgroundColor: '#f31',
+					borderCapStyle: 'butt',
+					borderDash: [2, 2],
+					borderDashOffset: 5.5
+				}, {
+					label: 'dataset2',
+					hidden: true,
+					borderJoinStyle: 'miter',
+				}, {
+					label: 'dataset3',
+					borderWidth: 10,
+					borderColor: 'green'
+				}]
+			}
+		};
+		var context = window.createMockContext();
+		var options = Chart.helpers.clone(Chart.defaults.global.legend);
+		var legend = new Chart.Legend({
+			chart: chart,
+			ctx: context,
+			options: options
+		});
+
+		var minSize = legend.update(400, 200);
+		expect(minSize).toEqual({
+			width: 400,
+			height: 54
+		});
+		expect(legend.legendItems).toEqual([{
+			text: 'dataset1',
+			fillStyle: '#f31',
+			hidden: undefined,
+			lineCap: 'butt',
+			lineDash: [2, 2],
+			lineDashOffset: 5.5,
+			lineJoin: undefined,
+			lineWidth: undefined,
+			strokeStyle: undefined,
+			datasetIndex: 0
+		}, {
+			text: 'dataset2',
+			fillStyle: undefined,
+			hidden: true,
+			lineCap: undefined,
+			lineDash: undefined,
+			lineDashOffset: undefined,
+			lineJoin: 'miter',
+			lineWidth: undefined,
+			strokeStyle: undefined,
+			datasetIndex: 1
+		}, {
+			text: 'dataset3',
+			fillStyle: undefined,
+			hidden: undefined,
+			lineCap: undefined,
+			lineDash: undefined,
+			lineDashOffset: undefined,
+			lineJoin: undefined,
+			lineWidth: 10,
+			strokeStyle: 'green',
+			datasetIndex: 2
+		}]);
+	});
+
+	it('should draw correctly', function() {
+		var chart = {
+			data: {
+				datasets: [{
+					label: 'dataset1',
+					backgroundColor: '#f31',
+					borderCapStyle: 'butt',
+					borderDash: [2, 2],
+					borderDashOffset: 5.5
+				}, {
+					label: 'dataset2',
+					hidden: true,
+					borderJoinStyle: 'miter',
+				}, {
+					label: 'dataset3',
+					borderWidth: 10,
+					borderColor: 'green'
+				}]
+			}
+		};
+		var context = window.createMockContext();
+		var options = Chart.helpers.clone(Chart.defaults.global.legend);
+		var legend = new Chart.Legend({
+			chart: chart,
+			ctx: context,
+			options: options
+		});
+
+		var minSize = legend.update(400, 200);
+		legend.left = 50;
+		legend.top = 100;
+		legend.right = legend.left + minSize.width;
+		legend.bottom = legend.top + minSize.height;
+
+		legend.draw();
+		expect(legend.legendHitBoxes).toEqual([{
+			left: 114,
+			top: 110,
+			width: 126,
+			height: 12
+		}, {
+			left: 250,
+			top: 110,
+			width: 126,
+			height: 12
+		}, {
+			left: 182,
+			top: 132,
+			width: 126,
+			height: 12
+		}]);
+		expect(context.getCalls()).toEqual([{
+			"name": "measureText",
+			"args": ["dataset1"]
+		}, {
+			"name": "measureText",
+			"args": ["dataset2"]
+		}, {
+			"name": "measureText",
+			"args": ["dataset3"]
+		}, {
+			"name": "setLineWidth",
+			"args": [0.5]
+		}, {
+			"name": "setStrokeStyle",
+			"args": ["#666"]
+		}, {
+			"name": "setFillStyle",
+			"args": ["#666"]
+		}, {
+			"name": "measureText",
+			"args": ["dataset1"]
+		}, {
+			"name": "save",
+			"args": []
+		}, {
+			"name": "setFillStyle",
+			"args": ["#f31"]
+		}, {
+			"name": "setLineCap",
+			"args": ["butt"]
+		}, {
+			"name": "setLineDashOffset",
+			"args": [5.5]
+		}, {
+			"name": "setLineJoin",
+			"args": ["miter"]
+		}, {
+			"name": "setLineWidth",
+			"args": [3]
+		}, {
+			"name": "setStrokeStyle",
+			"args": ["rgba(0,0,0,0.1)"]
+		}, {
+			"name": "setLineDash",
+			"args": [
+				[2, 2]
+			]
+		}, {
+			"name": "strokeRect",
+			"args": [114, 110, 40, 12]
+		}, {
+			"name": "fillRect",
+			"args": [114, 110, 40, 12]
+		}, {
+			"name": "restore",
+			"args": []
+		}, {
+			"name": "fillText",
+			"args": ["dataset1", 160, 110]
+		}, {
+			"name": "measureText",
+			"args": ["dataset2"]
+		}, {
+			"name": "save",
+			"args": []
+		}, {
+			"name": "setFillStyle",
+			"args": ["rgba(0,0,0,0.1)"]
+		}, {
+			"name": "setLineCap",
+			"args": ["butt"]
+		}, {
+			"name": "setLineDashOffset",
+			"args": [0]
+		}, {
+			"name": "setLineJoin",
+			"args": ["miter"]
+		}, {
+			"name": "setLineWidth",
+			"args": [3]
+		}, {
+			"name": "setStrokeStyle",
+			"args": ["rgba(0,0,0,0.1)"]
+		}, {
+			"name": "setLineDash",
+			"args": [
+				[]
+			]
+		}, {
+			"name": "strokeRect",
+			"args": [250, 110, 40, 12]
+		}, {
+			"name": "fillRect",
+			"args": [250, 110, 40, 12]
+		}, {
+			"name": "restore",
+			"args": []
+		}, {
+			"name": "fillText",
+			"args": ["dataset2", 296, 110]
+		}, {
+			"name": "beginPath",
+			"args": []
+		}, {
+			"name": "setLineWidth",
+			"args": [2]
+		}, {
+			"name": "moveTo",
+			"args": [296, 116]
+		}, {
+			"name": "lineTo",
+			"args": [376, 116]
+		}, {
+			"name": "stroke",
+			"args": []
+		}, {
+			"name": "measureText",
+			"args": ["dataset3"]
+		}, {
+			"name": "save",
+			"args": []
+		}, {
+			"name": "setFillStyle",
+			"args": ["rgba(0,0,0,0.1)"]
+		}, {
+			"name": "setLineCap",
+			"args": ["butt"]
+		}, {
+			"name": "setLineDashOffset",
+			"args": [0]
+		}, {
+			"name": "setLineJoin",
+			"args": ["miter"]
+		}, {
+			"name": "setLineWidth",
+			"args": [10]
+		}, {
+			"name": "setStrokeStyle",
+			"args": ["green"]
+		}, {
+			"name": "setLineDash",
+			"args": [
+				[]
+			]
+		}, {
+			"name": "strokeRect",
+			"args": [182, 132, 40, 12]
+		}, {
+			"name": "fillRect",
+			"args": [182, 132, 40, 12]
+		}, {
+			"name": "restore",
+			"args": []
+		}, {
+			"name": "fillText",
+			"args": ["dataset3", 228, 132]
+		}]);
+	});
+});

test/core.title.tests.js

@@ -0,0 +1,198 @@
+// Test the rectangle element
+
+describe('Title block tests', function() {
+	it('Should be constructed', function() {
+		var title = new Chart.Title({});
+		expect(title).not.toBe(undefined);
+	});
+
+	it('Should have the correct default config', function() {
+		expect(Chart.defaults.global.title).toEqual({
+			display: false,
+			position: 'top',
+			fullWidth: true,
+			fontStyle: 'bold',
+			padding: 10,
+			text: ''
+		})
+	});
+
+	it('should update correctly', function() {
+		var chart = {};
+
+		var options = Chart.helpers.clone(Chart.defaults.global.title);
+		options.text = "My title";
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options
+		});
+
+		var minSize = title.update(400, 200);
+
+		expect(minSize).toEqual({
+			width: 400,
+			height: 0
+		});
+
+		// Now we have a height since we display
+		title.options.display = true;
+
+		minSize = title.update(400, 200);
+
+		expect(minSize).toEqual({
+			width: 400,
+			height: 32
+		});
+	});
+
+	it('should update correctly when vertical', function() {
+		var chart = {};
+
+		var options = Chart.helpers.clone(Chart.defaults.global.title);
+		options.text = "My title";
+		options.position = 'left';
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options
+		});
+
+		var minSize = title.update(200, 400);
+
+		expect(minSize).toEqual({
+			width: 0,
+			height: 400
+		});
+
+		// Now we have a height since we display
+		title.options.display = true;
+
+		minSize = title.update(200, 400);
+
+		expect(minSize).toEqual({
+			width: 32,
+			height: 400
+		});
+	});
+
+	it('should draw correctly horizontally', function() {
+		var chart = {};
+		var context = window.createMockContext();
+
+		var options = Chart.helpers.clone(Chart.defaults.global.title);
+		options.text = "My title";
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options,
+			ctx: context
+		});
+
+		title.update(400, 200);
+		title.draw();
+
+		expect(context.getCalls()).toEqual([]);
+
+		// Now we have a height since we display
+		title.options.display = true;
+
+		var minSize = title.update(400, 200);
+		title.top = 50;
+		title.left = 100;
+		title.bottom = title.top + minSize.height;
+		title.right = title.left + minSize.width;
+		title.draw();
+
+		expect(context.getCalls()).toEqual([{
+			name: 'setFillStyle',
+			args: ['#666']
+		}, {
+			name: 'fillText',
+			args: ['My title', 300, 66]
+		}]);
+	});
+
+	it ('should draw correctly vertically', function() {
+		var chart = {};
+		var context = window.createMockContext();
+
+		var options = Chart.helpers.clone(Chart.defaults.global.title);
+		options.text = "My title";
+		options.position = 'left';
+
+		var title = new Chart.Title({
+			chart: chart,
+			options: options,
+			ctx: context
+		});
+
+		title.update(200, 400);
+		title.draw();
+
+		expect(context.getCalls()).toEqual([]);
+
+		// Now we have a height since we display
+		title.options.display = true;
+
+		var minSize = title.update(200, 400);
+		title.top = 50;
+		title.left = 100;
+		title.bottom = title.top + minSize.height;
+		title.right = title.left + minSize.width;
+		title.draw();
+
+		expect(context.getCalls()).toEqual([{
+			name: 'setFillStyle',
+			args: ['#666']
+		}, {
+			name: 'save',
+			args: []
+		}, {
+			name: 'translate',
+			args: [106, 250]
+		}, {
+			name: 'rotate',
+			args: [-0.5 * Math.PI]
+		}, {
+			name: 'fillText',
+			args: ['My title', 0, 0]
+		}, {
+			name: 'restore',
+			args: []
+		}]);
+
+		// Rotation is other way on right side
+		title.options.position = 'right';
+
+		// Reset call tracker
+		context.resetCalls();
+
+		minSize = title.update(200, 400);
+		title.top = 50;
+		title.left = 100;
+		title.bottom = title.top + minSize.height;
+		title.right = title.left + minSize.width;
+		title.draw();
+
+		expect(context.getCalls()).toEqual([{
+			name: 'setFillStyle',
+			args: ['#666']
+		}, {
+			name: 'save',
+			args: []
+		}, {
+			name: 'translate',
+			args: [126, 250]
+		}, {
+			name: 'rotate',
+			args: [0.5 * Math.PI]
+		}, {
+			name: 'fillText',
+			args: ['My title', 0, 0]
+		}, {
+			name: 'restore',
+			args: []
+		}]);
+	});
+});

test/defaultConfig.tests.js

@@ -0,0 +1,257 @@
+// Test the bubble chart default config
+describe("Test the bubble chart default config", function() {
+	it('should reutrn correct tooltip strings', function() {
+		var config = Chart.defaults.bubble;
+
+		// Title is always blank
+		expect(config.tooltips.callbacks.title()).toBe('');
+
+		// Item label
+		var data = {
+			datasets: [{
+				label: 'My dataset',
+				data: [{
+					x: 10,
+					y: 12,
+					r: 5
+				}]
+			}]
+		};
+
+		var tooltipItem = {
+			datasetIndex: 0,
+			index: 0
+		};
+
+		expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('My dataset: (10, 12, 5)');
+	});
+});
+
+describe('Test the doughnut chart default config', function() {
+	it('should return correct tooltip strings', function() {
+		var config = Chart.defaults.doughnut;
+
+		// Title is always blank
+		expect(config.tooltips.callbacks.title()).toBe('');
+
+		// Item label
+		var data = {
+			labels: ['label1', 'label2', 'label3'],
+			datasets: [{
+				data: [10, 20, 30],
+			}]
+		};
+
+		var tooltipItem = {
+			datasetIndex: 0,
+			index: 1
+		};
+
+		expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20');
+	});
+
+	it('should return the correct html legend', function() {
+		var config = Chart.defaults.doughnut;
+
+		var chart = {
+			id: 'mychart',
+			data: {
+				labels: ['label1', 'label2'],
+				datasets: [{
+					data: [10, 20],
+					backgroundColor: ['red', 'green']
+				}]
+			}
+		};
+		var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red">label1</span></li><li><span style="background-color:green">label2</span></li></ul>';
+
+		expect(config.legendCallback(chart)).toBe(expectedLegend);
+	});
+
+	it('should return correct legend label objects', function() {
+		var config = Chart.defaults.doughnut;
+		var data = {
+			labels: ['label1', 'label2', 'label3'],
+			datasets: [{
+				data: [10, 20, NaN],
+				backgroundColor: ['red', 'green', 'blue']
+			}]
+		};
+
+		var expected = [{
+			text: 'label1',
+			fillStyle: 'red',
+			hidden: false,
+			index: 0
+		}, {
+			text: 'label2',
+			fillStyle: 'green',
+			hidden: false,
+			index: 1
+		}, {
+			text: 'label3',
+			fillStyle: 'blue',
+			hidden: true,
+			index: 2
+		}];
+
+		expect(config.legend.labels.generateLabels(data)).toEqual(expected);
+	});
+
+	it('should hide the correct arc when a legend item is clicked', function() {
+		var config = Chart.defaults.doughnut;
+
+		var legendItem = {
+			text: 'label1',
+			fillStyle: 'red',
+			hidden: false,
+			index: 0
+		};
+
+		var chart = {
+			data: {
+				labels: ['label1', 'label2', 'label3'],
+				datasets: [{
+					data: [10, 20, NaN],
+					backgroundColor: ['red', 'green', 'blue']
+				}]
+			},
+			update: function() {}
+		};
+
+		spyOn(chart, 'update');
+		var scope = {
+			chart: chart
+		};
+
+		config.legend.onClick.call(scope, null, legendItem);
+
+		expect(chart.data.datasets[0].metaHiddenData).toEqual([10]);
+		expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]);
+
+		expect(chart.update).toHaveBeenCalled();
+
+		config.legend.onClick.call(scope, null, legendItem);
+		expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
+
+		// Should not toggle index 2 since there was never data for it
+		legendItem.index = 2;
+		config.legend.onClick.call(scope, null, legendItem);
+		expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
+	});
+});
+
+describe('Test the polar area chart default config', function() {
+	it('should return correct tooltip strings', function() {
+		var config = Chart.defaults.polarArea;
+
+		// Title is always blank
+		expect(config.tooltips.callbacks.title()).toBe('');
+
+		// Item label
+		var data = {
+			labels: ['label1', 'label2', 'label3'],
+			datasets: [{
+				data: [10, 20, 30],
+			}]
+		};
+
+		var tooltipItem = {
+			datasetIndex: 0,
+			index: 1,
+			yLabel: 20
+		};
+
+		expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20');
+	});
+
+	it('should return the correct html legend', function() {
+		var config = Chart.defaults.polarArea;
+
+		var chart = {
+			id: 'mychart',
+			data: {
+				labels: ['label1', 'label2'],
+				datasets: [{
+					data: [10, 20],
+					backgroundColor: ['red', 'green']
+				}]
+			}
+		};
+		var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red">label1</span></li><li><span style="background-color:green">label2</span></li></ul>';
+
+		expect(config.legendCallback(chart)).toBe(expectedLegend);
+	});
+
+	it('should return correct legend label objects', function() {
+		var config = Chart.defaults.polarArea;
+		var data = {
+			labels: ['label1', 'label2', 'label3'],
+			datasets: [{
+				data: [10, 20, NaN],
+				backgroundColor: ['red', 'green', 'blue']
+			}]
+		};
+
+		var expected = [{
+			text: 'label1',
+			fillStyle: 'red',
+			hidden: false,
+			index: 0
+		}, {
+			text: 'label2',
+			fillStyle: 'green',
+			hidden: false,
+			index: 1
+		}, {
+			text: 'label3',
+			fillStyle: 'blue',
+			hidden: true,
+			index: 2
+		}];
+
+		expect(config.legend.labels.generateLabels(data)).toEqual(expected);
+	});
+
+	it('should hide the correct arc when a legend item is clicked', function() {
+		var config = Chart.defaults.polarArea;
+
+		var legendItem = {
+			text: 'label1',
+			fillStyle: 'red',
+			hidden: false,
+			index: 0
+		};
+
+		var chart = {
+			data: {
+				labels: ['label1', 'label2', 'label3'],
+				datasets: [{
+					data: [10, 20, NaN],
+					backgroundColor: ['red', 'green', 'blue']
+				}]
+			},
+			update: function() {}
+		};
+
+		spyOn(chart, 'update');
+		var scope = {
+			chart: chart
+		};
+
+		config.legend.onClick.call(scope, null, legendItem);
+
+		expect(chart.data.datasets[0].metaHiddenData).toEqual([10]);
+		expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]);
+
+		expect(chart.update).toHaveBeenCalled();
+
+		config.legend.onClick.call(scope, null, legendItem);
+		expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
+
+		// Should not toggle index 2 since there was never data for it
+		legendItem.index = 2;
+		config.legend.onClick.call(scope, null, legendItem);
+		expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
+	});
+});