Merge pull request #5145 from chartjs/master

Version 2.7.2

.codeclimate.yml

@@ -1,25 +1,19 @@
-engines:
+version: "2"
+plugins:
   duplication:
     enabled: true
     config:
       languages:
-      - javascript
-  eslint:
-    enabled: true
-    channel: "eslint-3"
+        - javascript
   fixme:
     enabled: true
-ratings:
-  paths:
-  - "src/**/*.js"
-exclude_paths:
-- '.github/'
-- 'dist/'
-- 'test/'
-- 'docs/'
-- 'samples/'
-- 'scripts/'
-- '**.md'
-- '**.json'
-- 'gulpfile.js'
-- 'karma.conf.js'
+exclude_patterns:
+  - "dist/"
+  - "docs/"
+  - "samples/"
+  - "scripts/"
+  - "test/"
+  - "*.js"
+  - "*.json"
+  - "*.md"
+  - ".*"

.eslintrc

@@ -1,224 +0,0 @@
-ecmaFeatures:
-  modules: true
-  jsx: true
-
-env:
-  amd: true
-  browser: true
-  es6: true
-  jquery: true
-  node: true
-
-# http://eslint.org/docs/rules/
-rules:
-  # Possible Errors
-  no-cond-assign: 2
-  no-console: [2, {allow: [warn, error]}]
-  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: [2, functions]
-  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
-  array-callback-return: 0
-  block-scoped-var: 0
-  complexity: [2, 10]
-  consistent-return: 0
-  curly: [2, all]
-  default-case: 2
-  dot-location: 0
-  dot-notation: 2
-  eqeqeq: 2
-  guard-for-in: 2
-  no-alert: 2
-  no-caller: 2
-  no-case-declarations: 2
-  no-div-regex: 2
-  no-else-return: 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: 2
-  no-implicit-coercion: 0
-  no-implied-eval: 2
-  no-invalid-this: 0
-  no-iterator: 2
-  no-labels: 2
-  no-lone-blocks: 2
-  no-loop-func: 2
-  no-magic-number: 0
-  no-multi-spaces: 2
-  no-multi-str: 2
-  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: 2
-  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: [1, never]
-
-  # 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: 2
-  no-undef-init: 2
-  no-undef: 2
-  no-undefined: 0
-  no-unused-vars: 2
-  no-use-before-define: 2
-
-  # 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: [2, never]
-  block-spacing: 0
-  brace-style: [2, 1tbs]
-  camelcase: 2
-  comma-dangle: [2, only-multiline]
-  comma-spacing: 2
-  comma-style: [2, last]
-  computed-property-spacing: [2, never]
-  consistent-this: [2, me]
-  eol-last: 2
-  func-call-spacing: 0
-  func-names: [2, never]
-  func-style: 0
-  id-length: 0
-  id-match: 0
-  indent: [2, tab]
-  jsx-quotes: 0
-  key-spacing: 2
-  keyword-spacing: 2
-  linebreak-style: 0
-  lines-around-comment: 0
-  max-depth: 0
-  max-len: 0
-  max-lines: 0
-  max-nested-callbacks: 0
-  max-params: 0
-  max-statements-per-line: 0
-  max-statements: [2, 30]
-  multiline-ternary: 0
-  new-cap: 0
-  new-parens: 2
-  newline-after-var: 0
-  newline-before-return: 0
-  newline-per-chained-call: 0
-  no-array-constructor: 0
-  no-bitwise: 0
-  no-continue: 0
-  no-inline-comments: 0
-  no-lonely-if: 2
-  no-mixed-operators: 0
-  no-mixed-spaces-and-tabs: 2
-  no-multiple-empty-lines: [2, {max: 2}]
-  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: 2
-  no-underscore-dangle: 0
-  no-unneeded-ternary: 0
-  no-whitespace-before-property: 2
-  object-curly-newline: 0
-  object-curly-spacing: [2, never]
-  object-property-newline: 0
-  one-var-declaration-per-line: 2
-  one-var: [2, {initialized: never}]
-  operator-assignment: 0
-  operator-linebreak: 0
-  padded-blocks: 0
-  quote-props: [2, as-needed]
-  quotes: [2, single, {avoidEscape: true}]
-  require-jsdoc: 0
-  semi-spacing: 2
-  semi: [2, always]
-  sort-keys: 0
-  sort-vars: 0
-  space-before-blocks: [2, always]
-  space-before-function-paren: [2, never]
-  space-in-parens: [2, never]
-  space-infix-ops: 2
-  space-unary-ops: [2, {words: true, nonwords: false}]
-  spaced-comment: [2, always]
-  unicode-bom: 0
-  wrap-regex: 2
-
-  # 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

.eslintrc.yml

@@ -0,0 +1,7 @@
+extends: chartjs
+
+env:
+  browser: true
+  node: true
+
+plugins: ['html']

.gitignore

@@ -6,9 +6,11 @@
 /gh-pages
 /jsdoc
 /node_modules
+/package-lock.json
 .DS_Store
 .idea
 .vscode
 bower.json
 *.log
 *.swp
+*.stackdump

.htmllintrc

@@ -0,0 +1,18 @@
+{
+	"indent-style": "tabs",
+	"attr-quote-style": "double",
+	"spec-char-escape": false,
+	"attr-bans": [
+		"align",
+		"background",
+		"bgcolor",
+		"border",
+		"frameborder",
+		"longdesc",
+		"marginwidth",
+		"marginheight",
+		"scrolling"
+	],
+	"tag-bans": [ "b", "i" ],
+	"id-class-style": false
+}

.travis.yml

@@ -13,7 +13,7 @@ script:
   - gulp docs
   - gulp package
   - gulp bower
-  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
+  - cat ./coverage/lcov.info | ./node_modules/.bin/coveralls || true
 
 notifications:
   slack: chartjs:pcfCZR6ugg5TEcaLtmIfQYuA

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2017 Nick Downie
+Copyright (c) 2018 Chart.js Contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,6 +1,6 @@
 # Chart.js
 
-[![travis](https://img.shields.io/travis/chartjs/Chart.js.svg?style=flat-square&maxAge=60)](https://travis-ci.org/chartjs/Chart.js) [![codeclimate](https://img.shields.io/codeclimate/github/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://codeclimate.com/github/chartjs/Chart.js) [![coveralls](https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://coveralls.io/github/chartjs/Chart.js?branch=master) [![slack](https://img.shields.io/badge/slack-Chart.js-blue.svg?style=flat-square&maxAge=3600)](https://chart-js-automation.herokuapp.com/)
+[![travis](https://img.shields.io/travis/chartjs/Chart.js.svg?style=flat-square&maxAge=60)](https://travis-ci.org/chartjs/Chart.js) [![coveralls](https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://coveralls.io/github/chartjs/Chart.js?branch=master) [![codeclimate](https://img.shields.io/codeclimate/maintainability/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://codeclimate.com/github/chartjs/Chart.js) [![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
 
 *Simple HTML5 Charts using the canvas element* [chartjs.org](http://www.chartjs.org)
 
@@ -19,11 +19,23 @@ To install via bower:
 bower install chart.js --save
 ```
 
-#### Selecting the Correct Build
+### Selecting the Correct Build
 
-Chart.js provides two different builds that are available for your use. The `Chart.js` and `Chart.min.js` files include Chart.js and the accompanying color parsing library. If this version is used and you require the use of the time axis, [Moment.js](http://momentjs.com/) will need to be included before Chart.js.
+Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
 
-The `Chart.bundle.js` and `Chart.bundle.min.js` builds include Moment.js in a single file. This version should be used if you require time axes and want a single file to include, select this version. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
+#### Stand-Alone Build
+Files:
+* `dist/Chart.js`
+* `dist/Chart.min.js`
+
+The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](http://momentjs.com/) before Chart.js for the functionality of the time axis.
+
+#### Bundled Build
+Files:
+* `dist/Chart.bundle.js`
+* `dist/Chart.bundle.min.js`
+
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.
 
 ## Documentation
 

book.json

@@ -1,5 +1,6 @@
 {
   "root": "./docs",
+  "title": "Chart.js documentation",
   "author": "chartjs",
   "gitbook": "3.2.2",
   "plugins": ["-lunr", "-search", "search-plus", "anchorjs", "chartjs", "ga"],

docs/README.md

@@ -1,6 +1,6 @@
 # Chart.js
 
-[![slack](https://img.shields.io/badge/slack-Chart.js-blue.svg?style=flat-square&maxAge=600)](https://chart-js-automation.herokuapp.com/)
+[![slack](https://img.shields.io/badge/slack-chartjs-blue.svg?style=flat-square&maxAge=3600)](https://chartjs-slack.herokuapp.com/)
 
 ## Installation
 

docs/SUMMARY.md

@@ -7,6 +7,7 @@
   * [Usage](getting-started/usage.md)
 * [General](general/README.md)
   * [Responsive](general/responsive.md)
+  * [Pixel Ratio](general/device-pixel-ratio.md)
   * [Interactions](general/interactions/README.md)
     * [Events](general/interactions/events.md)
     * [Modes](general/interactions/modes.md)

docs/axes/README.md

@@ -26,18 +26,18 @@ There are a number of config callbacks that can be used to change parameters in
 | Name | Arguments | Description
 | ---- | --------- | -----------
 | `beforeUpdate` | `axis` | Callback called before the update process starts.
-| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set. 
+| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
 | `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
 | `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
 | `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
 | `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
 | `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
 | `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
-| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings. 
+| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
 | `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
 | `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
-| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas. 
-| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas. 
+| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
+| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
 | `afterUpdate` | `axis` | Callback that runs at the end of the update process.
 
 ## Updating Axis Defaults

docs/axes/cartesian/README.md

@@ -75,13 +75,13 @@ var myChart = new Chart(ctx, {
     data: {
         datasets: [{
             data: [20, 50, 100, 75, 25, 0],
-            label: 'Left dataset'
+            label: 'Left dataset',
 
             // This binds the dataset to the left y axis
             yAxisID: 'left-y-axis'
         }, {
-            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0]
-            label: 'Right dataset'
+            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
+            label: 'Right dataset',
 
             // This binds the dataset to the right y axis
             yAxisID: 'right-y-axis',

docs/axes/cartesian/linear.md

@@ -20,7 +20,7 @@ The following options are provided by the linear scale. They are all located in
 
 Given the number of axis range settings, it is important to understand how they all interact with each other.
 
-The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaing the auto fit behaviour.
+The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
 
 ```javascript
 let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
@@ -43,7 +43,7 @@ let chart = new Chart(ctx, {
         scales: {
             yAxes: [{
                 ticks: {
-                    suggestedMin: 50
+                    suggestedMin: 50,
                     suggestedMax: 100
                 }
             }]

docs/axes/cartesian/time.md

@@ -147,6 +147,6 @@ The `ticks.source` property controls the ticks generation
 * `'labels'`: generates ticks from user given `data.labels` values ONLY
 
 ### Parser
-If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date. 
+If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.
 
 If this is a function, it must return a moment.js object given the appropriate data value.

docs/axes/radial/linear.md

@@ -36,7 +36,7 @@ The following options are provided by the linear scale. They are all located in
 
 Given the number of axis range settings, it is important to understand how they all interact with each other.
 
-The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaing the auto fit behaviour.
+The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.
 
 ```javascript
 let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
@@ -58,7 +58,7 @@ let chart = new Chart(ctx, {
     options: {
         scale: {
             ticks: {
-                suggestedMin: 50
+                suggestedMin: 50,
                 suggestedMax: 100
             }
         }
@@ -104,7 +104,7 @@ The following options are used to configure the point labels that are shown on t
 | Name | Type | Default | Description
 | -----| ---- | --------| -----------
 | `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
-| `fontColor` | `Color` | `'#666'` | Font color for point labels.
+| `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
 | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
 | `fontSize` | `Number` | 10 | font size in pixels
 | `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.

docs/axes/styling.md

@@ -35,8 +35,8 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
 | `fontSize` | `Number` | `12` | Font size for the tick labels.
 | `fontStyle` | `String` | `'normal'` | Font style for the tick labels, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
 | `reverse` | `Boolean` | `false` | Reverses order of tick labels.
-| `minor` | `object` | `{}` | Minor ticks configuration. Ommited options are inherited from options above.
-| `major` | `object` | `{}` | Major ticks configuration. Ommited options are inherited from options above.
+| `minor` | `object` | `{}` | Minor ticks configuration. Omitted options are inherited from options above.
+| `major` | `object` | `{}` | Major ticks configuration. Omitted options are inherited from options above.
 
 ## Minor Tick Configuration
 The minorTick configuration is nested under the ticks configuration in the `minor` key. It defines options for the minor tick marks that are generated by the axis. Omitted options are inherited from `ticks` configuration.

docs/charts/bar.md

@@ -6,12 +6,12 @@ A bar chart provides a way of showing data values represented as vertical bars.
     "type": "bar",
     "data": {
         "labels": [
-            "January", 
-            "February", 
-            "March", 
-            "April", 
-            "May", 
-            "June", 
+            "January",
+            "February",
+            "March",
+            "April",
+            "May",
+            "June",
             "July"
         ],
         "datasets": [{
@@ -152,7 +152,7 @@ The `data` property of a dataset for a bar chart is specified as a an array of n
 data: [20, 10]
 ```
 
-You can also specify the dataset as x/y coordinates when using the [time scale](./time.md).
+You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis).
 
 ```javascript
 data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]

docs/charts/doughnut.md

@@ -55,7 +55,6 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 
 | Name | Type | Description
 | ---- | ---- | -----------
-| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
 | `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
 | `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
 | `borderWidth` | `Number[]` | The border width of the arcs in the dataset.

docs/charts/line.md

@@ -119,7 +119,7 @@ The `data` property of a dataset for a line chart can be passed in two formats.
 data: [20, 10]
 ```
 
-When the `data` array is an array of numbers, the x axis is generally a [category](../axes/cartesian/category.md#Category Axis). The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the `labels` property of the data object must be specified.
+When the `data` array is an array of numbers, the x axis is generally a [category](../axes/cartesian/category.md#category-cartesian-axis). The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the `labels` property of the data object must be specified.
 
 ### Point[]
 

docs/charts/mixed.md

@@ -41,9 +41,9 @@ At this point we have a chart rendering how we'd like. It's important to note th
   "type": "bar",
   "data": {
     "labels": [
-      "January", 
-      "February", 
-      "March", 
+      "January",
+      "February",
+      "March",
       "April"
     ],
     "datasets": [{

docs/charts/polar.md

@@ -46,7 +46,6 @@ The following options can be included in a polar area chart dataset to configure
 
 | Name | Type | Description
 | ---- | ---- | -----------
-| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
 | `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
 | `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
 | `borderWidth` | `Number[]` | The border width of the arcs in the dataset.

docs/charts/radar.md

@@ -8,9 +8,9 @@ They are often useful for comparing the points of two or more different data set
     "type": "radar",
     "data": {
         "labels": [
-            "Eating", 
-            "Drinking", 
-            "Sleeping", 
+            "Eating",
+            "Drinking",
+            "Sleeping",
             "Designing",
             "Coding",
             "Cycling",
@@ -94,7 +94,7 @@ The style of point. Options are:
 * 'circle'
 * 'cross'
 * 'crossRot'
-* 'dash'. 
+* 'dash'.
 * 'line'
 * 'rect'
 * 'rectRounded'
@@ -127,7 +127,7 @@ It is common to want to apply a configuration setting to all created radar chart
 
 ## Data Structure
 
-The `data` property of a dataset for a radar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis. 
+The `data` property of a dataset for a radar chart is specified as a an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
 
 ```javascript
 data: [20, 10]

docs/configuration/legend.md

@@ -10,7 +10,7 @@ The legend configuration is passed into the `options.legend` namespace. The glob
 | `display` | `Boolean` | `true` | is the legend shown
 | `position` | `String` | `'top'` | Position of the legend. [more...](#position)
 | `fullWidth` | `Boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
-| `onClick` | `Function` | | A callback that is called when a click event is registered on a label item 
+| `onClick` | `Function` | | A callback that is called when a click event is registered on a label item
 | `onHover` | `Function` | | A callback that is called when a 'mousemove' event is registered on top of a label item
 | `reverse` | `Boolean` | `false` | Legend will show datasets in reverse order.
 | `labels` | `Object` | | See the [Legend Label Configuration](#legend-label-configuration) section below.
@@ -164,3 +164,7 @@ var chart = new Chart(ctx, {
     }
 });
 ```
+
+Note that legendCallback is not called automatically and you must call `generateLegend()` yourself in code when creating a legend using this method.
+
+

docs/configuration/tooltip.md

@@ -6,7 +6,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 
 | Name | Type | Default | Description
 | -----| ---- | --------| -----------
-| `enabled` | `Boolean` | `true` | Are tooltips enabled
+| `enabled` | `Boolean` | `true` | Are on-canvas tooltips enabled
 | `custom` | `Function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
 | `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
 | `intersect` | `Boolean` | `true` | if true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
@@ -30,7 +30,7 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 | `footerFontSize` | `Number` | `12` | Footer font size
 | `footerFontStyle` | `String` | `'bold'` | Footer font style
 | `footerFontColor` | `Color` | `'#fff'` | Footer font color
-| `footerSpacing` | `Number` | `2` | Spacing to add to top and bottom of each fotter line.
+| `footerSpacing` | `Number` | `2` | Spacing to add to top and bottom of each footer line.
 | `footerMarginTop` | `Number` | `6` | Margin to add before drawing the footer.
 | `xPadding` | `Number` | `6` | Padding to add on left and right of tooltip.
 | `yPadding` | `Number` | `6` | Padding to add on top and bottom of tooltip.
@@ -63,9 +63,9 @@ Example:
 Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
     /** @type {Chart.Tooltip} */
     var tooltip = this;
-	    
+
     /* ... */
-	    
+
     return {
         x: 0,
         y: 0
@@ -103,6 +103,32 @@ All functions are called with the same arguments: a [tooltip item](#tooltip-item
 | `footer` | `Array[tooltipItem], data` | Returns text to render as the footer of the tooltip.
 | `afterFooter` | `Array[tooltipItem], data` | Text to render after the footer section
 
+### Label Callback
+
+The label callback can change the text that displays for a given data point. A common example to round data values; the following example rounds the data to two decimal places.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            callbacks: {
+                label: function(tooltipItem, data) {
+                    var label = data.datasets[tooltipItem.datasetIndex].label || '';
+
+                    if (label) {
+                        label += ': ';
+                    }
+                    label += Math.round(tooltipItem.yLabel * 100) / 100;
+                    return label;
+                }
+            }
+        }
+    }
+});
+```
+
 ### Label Color Callback
 
 For example, to return a red box for each item in the tooltip you could do:
@@ -165,6 +191,9 @@ var myPieChart = new Chart(ctx, {
     data: data,
     options: {
         tooltips: {
+            // Disable the on-canvas tooltip
+            enabled: false,
+
             custom: function(tooltipModel) {
                 // Tooltip Element
                 var tooltipEl = document.getElementById('chartjs-tooltip');
@@ -173,7 +202,7 @@ var myPieChart = new Chart(ctx, {
                 if (!tooltipEl) {
                     tooltipEl = document.createElement('div');
                     tooltipEl.id = 'chartjs-tooltip';
-                    tooltipEl.innerHTML = "<table></table>"
+                    tooltipEl.innerHTML = "<table></table>";
                     document.body.appendChild(tooltipEl);
                 }
 
@@ -212,7 +241,7 @@ var myPieChart = new Chart(ctx, {
                         var style = 'background:' + colors.backgroundColor;
                         style += '; border-color:' + colors.borderColor;
                         style += '; border-width: 2px';
-                        var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+                        var span = '<span style="' + style + '"></span>';
                         innerHtml += '<tr><td>' + span + body + '</td></tr>';
                     });
                     innerHtml += '</tbody>';
@@ -226,11 +255,12 @@ var myPieChart = new Chart(ctx, {
 
                 // Display, position, and set styles for font
                 tooltipEl.style.opacity = 1;
+                tooltipEl.style.position = 'absolute';
                 tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
                 tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
-                tooltipEl.style.fontFamily = tooltipModel._fontFamily;
-                tooltipEl.style.fontSize = tooltipModel.fontSize;
-                tooltipEl.style.fontStyle = tooltipModel._fontStyle;
+                tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
+                tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
+                tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
                 tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
             }
         }
@@ -238,7 +268,7 @@ var myPieChart = new Chart(ctx, {
 });
 ```
 
-See `samples/tooltips/line-customTooltips.html` for examples on how to get started.
+See [samples](http://www.chartjs.org/samples/) for examples on how to get started with custom tooltips.
 
 ## Tooltip Model
 The tooltip model contains parameters that can be used to render the tooltip.

docs/developers/api.md

@@ -132,9 +132,9 @@ To get an item that was clicked on, `getElementAtEvent` can be used.
 
 ```javascript
 function clickHandler(evt) {
-    var item = myChart.getElementAtEvent(evt)[0];
+    var firstPoint = myChart.getElementAtEvent(evt)[0];
 
-    if (item) {
+    if (firstPoint) {
         var label = myChart.data.labels[firstPoint._index];
         var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
     }

docs/developers/axes.md

@@ -78,14 +78,14 @@ To work with Chart.js, custom scale types must implement the following interface
 
     // Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
     // @param index: index into the ticks array
-    // @param includeOffset: if true, get the pixel halway between the given tick and the next
+    // @param includeOffset: if true, get the pixel halfway between the given tick and the next
     getPixelForTick: function(index, includeOffset) {},
 
     // Get the pixel (x coordinate for horizontal axis, y coordinate for vertical axis) for a given value
     // @param value : the value to get the pixel for
     // @param index : index into the data array of the value
     // @param datasetIndex : index of the dataset the value comes from
-    // @param includeOffset : if true, get the pixel halway between the given tick and the next
+    // @param includeOffset : if true, get the pixel halfway between the given tick and the next
     getPixelForValue: function(value, index, datasetIndex, includeOffset) {}
 
     // Get the value for a given pixel (x coordinate for horizontal axis, y coordinate for vertical axis)

docs/developers/charts.md

@@ -75,7 +75,7 @@ The built in controller types are:
 For example, to derive a new chart type that extends from a bubble chart, you would do the following.
 
 ```javascript
-// Sets the default config for 'derivedBubble' to be the same as the bubble defaults. 
+// Sets the default config for 'derivedBubble' to be the same as the bubble defaults.
 // We look for the defaults by doing Chart.defaults[chartType]
 // It looks like a bug exists when the defaults don't exist
 Chart.defaults.derivedBubble = Chart.defaults.bubble;
@@ -102,7 +102,7 @@ var custom = Chart.controllers.bubble.extend({
 
 // Stores the controller so that the chart initialization routine can look it up with
 // Chart.controllers[type]
-Chart.controllers.derivedBubble = custom; 
+Chart.controllers.derivedBubble = custom;
 
 // Now we can create and use our new chart type
 new Chart(ctx, {

docs/developers/contributing.md

@@ -12,7 +12,7 @@ New contributions to the library are welcome, but we ask that you please follow
 
 # Joining the project
 
- Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join [here](https://chart-js-automation.herokuapp.com/). If you think you can help, we'd love to have you!
+ Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join [here](https://chartjs-slack.herokuapp.com/). If you think you can help, we'd love to have you!
 
 # Building and Testing
 

docs/developers/updates.md

@@ -1,6 +1,6 @@
 # Updating Charts
 
-It's pretty common to want to update charts after they've been created. When the chart data is changed, Chart.js will animate to the new data values. 
+It's pretty common to want to update charts after they've been created. When the chart data or options are changed, Chart.js will animate to the new data values and options.
 
 ## Adding or Removing Data
 
@@ -14,9 +14,7 @@ function addData(chart, label, data) {
     });
     chart.update();
 }
-```
 
-```javascript
 function removeData(chart) {
     chart.data.labels.pop();
     chart.data.datasets.forEach((dataset) => {
@@ -26,6 +24,78 @@ function removeData(chart) {
 }
 ```
 
+## Updating Options
+
+To update the options, mutating the options property in place or passing in a new options object are supported.
+
+- If the options are mutated in place, other option properties would be preserved, including those calculated by Chart.js.
+- If created as a new object, it would be like creating a new chart with the options - old options would be discarded.
+
+```javascript
+function updateConfigByMutating(chart) {
+    chart.options.title.text = 'new title';
+    chart.update();
+}
+
+function updateConfigAsNewObject(chart) {
+    chart.options = {
+        responsive: true,
+        title:{
+            display:true,
+            text: 'Chart.js'
+        },
+        scales: {
+            xAxes: [{
+                display: true
+            }],
+            yAxes: [{
+                display: true
+            }]
+        }
+    }
+    chart.update();
+}
+```
+
+Scales can be updated separately without changing other options.
+To update the scales, pass in an object containing all the customization including those unchanged ones.
+
+Variables referencing any one from `chart.scales` would be lost after updating scales with a new `id` or the changed `type`.
+
+```javascript
+function updateScales(chart) {
+    var xScale = chart.scales['x-axis-0'];
+    var yScale = chart.scales['y-axis-0'];
+    chart.options.scales = {
+        xAxes: [{
+            id: 'newId',
+            display: true
+        }],
+        yAxes: [{
+            display: true,
+            type: 'logarithmic'
+        }]
+    }
+    chart.update();
+    // need to update the reference
+    xScale = chart.scales['newId'];
+    yScale = chart.scales['y-axis-0'];
+}
+```
+
+You can also update a specific scale either by specifying its index or id.
+
+```javascript
+function updateScale(chart) {
+    chart.options.scales.yAxes[0] = {
+        type: 'logarithmic'
+    }
+    chart.update();
+}
+```
+
+Code sample for updating options can be found in [toggle-scale-type.html](../../samples/scales/toggle-scale-type.html).
+
 ## Preventing Animations
 
 Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.

docs/general/colors.md

@@ -6,7 +6,7 @@ You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/We
 
 ## Patterns and Gradients
 
-An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour. 
+An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.
 
 For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
 

docs/general/interactions/README.md

@@ -1,6 +1,6 @@
 # Interactions
 
-The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events). 
+The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

docs/general/interactions/events.md

@@ -7,7 +7,7 @@ The following properties define how the chart interacts with events.
 | `onHover` | `Function` | `null` | Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
 | `onClick` | `Function` | `null` | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements
 
-## Event Option 
+## Event Option
 For example, to have the chart only respond to click events, you could do
 ```javascript
 var chart = new Chart(ctx, {

docs/general/interactions/modes.md

@@ -41,7 +41,7 @@ Finds the first item that intersects the point and returns it. Behaves like 'nea
 See `'index'` mode
 
 ## index
-Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index. 
+Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
 
 ```javascript
 var chart = new Chart(ctx, {

docs/general/responsive.md

@@ -33,3 +33,15 @@ The chart can also be programmatically resized by modifying the container size:
 ```javascript
 chart.canvas.parentNode.style.height = '128px';
 ```
+
+## Printing Resizeable Charts
+
+CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, one needs to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart.
+
+```javascript
+function beforePrintHandler () {
+  for (var id in Chart.instances) {
+    Chart.instances[id].resize()
+  }
+}
+```

docs/getting-started/README.md

@@ -40,4 +40,4 @@ var chart = new Chart(ctx, {
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
 
-There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attatched to every [release](https://github.com/chartjs/Chart.js/releases).
+There are many examples of Chart.js that are available in the `/samples` folder of `Chart.js.zip` that is attached to every [release](https://github.com/chartjs/Chart.js/releases).

docs/getting-started/installation.md

@@ -36,22 +36,22 @@ https://www.jsdelivr.com/package/npm/chart.js?path=dist
 
 You can download the latest version of [Chart.js on GitHub](https://github.com/chartjs/Chart.js/releases/latest).
 
-If you download or clone the repository, you must [build](../developers/contributing.md#building-chartjs) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised.
+If you download or clone the repository, you must [build](../developers/contributing.md#building-and-testing) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised.
 
 # Selecting the Correct Build
 
-Chart.js provides two different builds that are available for your use.
+Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
 
 ## Stand-Alone Build
 Files:
 * `dist/Chart.js`
 * `dist/Chart.min.js`
 
-This version only includes Chart.js. If this version is used and you require the use of the time axis, [Moment.js](http://momentjs.com/) will need to be included before Chart.js.
+The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](http://momentjs.com/) before Chart.js for the functionality of the time axis.
 
 ## Bundled Build
 Files:
 * `dist/Chart.bundle.js`
 * `dist/Chart.bundle.min.js`
 
-The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.

docs/notes/extensions.md

@@ -18,13 +18,19 @@ In addition, many charts can be found on the [npm registry](https://www.npmjs.co
  - <a href="https://github.com/chartjs/chartjs-plugin-deferred" target="_blank">chartjs-plugin-deferred</a> - Defers initial chart update until chart scrolls into viewport.
  - <a href="https://github.com/compwright/chartjs-plugin-draggable" target="_blank">chartjs-plugin-draggable</a> - Makes select chart elements draggable with the mouse.
  - <a href="https://github.com/y-takey/chartjs-plugin-stacked100" target="_blank">chartjs-plugin-stacked100</a> - Draws 100% stacked bar chart.
+ - <a href="https://github.com/everestate/chartjs-plugin-waterfall" target="_blank">chartjs-plugin-waterfall</a> - Enables easy use of waterfall charts.
  - <a href="https://github.com/chartjs/chartjs-plugin-zoom" target="_blank">chartjs-plugin-zoom</a> - Enables zooming and panning on charts.
 
 In addition, many plugins can be found on the [npm registry](https://www.npmjs.com/search?q=chartjs-plugin-).
 
 ## Integrations
 
-### Angular
+### Angular (v2+)
+
+ - <a href="https://github.com/emn178/angular2-chartjs" target="_blank">emn178/angular2-chartjs</a>
+ - <a href="https://github.com/valor-software/ng2-charts" target="_blank">valor-software/ng2-charts</a>
+
+### Angular (v1)
  - <a href="https://github.com/jtblin/angular-chart.js" target="_blank">angular-chart.js</a>
  - <a href="https://github.com/carlcraig/tc-angular-chartjs" target="_blank">tc-angular-chartjs</a>
  - <a href="https://github.com/petermelias/angular-chartjs" target="_blank">angular-chartjs</a>
@@ -49,3 +55,9 @@ In addition, many plugins can be found on the [npm registry](https://www.npmjs.c
 
 ### Java
  - <a href="https://github.com/mdewilde/chart/" target="_blank">Chart.java</a>
+
+### GWT (Google Web toolkit)
+ - <a href="https://github.com/pepstock-org/Charba" target="_blank">Charba</a>
+
+### Ember.js
+ - <a href="https://github.com/aomran/ember-cli-chart" target="_blank">ember-cli-chart</a>

gulpfile.js

@@ -3,7 +3,6 @@ var concat = require('gulp-concat');
 var connect = require('gulp-connect');
 var eslint = require('gulp-eslint');
 var file = require('gulp-file');
-var htmlv = require('gulp-html-validator');
 var insert = require('gulp-insert');
 var replace = require('gulp-replace');
 var size = require('gulp-size');
@@ -17,10 +16,18 @@ var browserify = require('browserify');
 var source = require('vinyl-source-stream');
 var merge = require('merge-stream');
 var collapse = require('bundle-collapser/plugin');
-var argv  = require('yargs').argv
+var yargs = require('yargs');
 var path = require('path');
+var fs = require('fs');
+var htmllint = require('gulp-htmllint');
 var package = require('./package.json');
 
+var argv = yargs
+  .option('force-output', {default: false})
+  .option('silent-errors', {default: false})
+  .option('verbose', {default: false})
+  .argv
+
 var srcDir = './src/';
 var outDir = './dist/';
 
@@ -29,21 +36,26 @@ var header = "/*!\n" +
   " * http://chartjs.org/\n" +
   " * Version: {{ version }}\n" +
   " *\n" +
-  " * Copyright 2017 Nick Downie\n" +
+  " * Copyright " + (new Date().getFullYear()) + " Chart.js Contributors\n" +
   " * Released under the MIT license\n" +
   " * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md\n" +
   " */\n";
 
+if (argv.verbose) {
+  util.log("Gulp running with options: " + JSON.stringify(argv, null, 2));
+}
+
 gulp.task('bower', bowerTask);
 gulp.task('build', buildTask);
 gulp.task('package', packageTask);
 gulp.task('watch', watchTask);
-gulp.task('lint', lintTask);
+gulp.task('lint', ['lint-html', 'lint-js']);
+gulp.task('lint-html', lintHtmlTask);
+gulp.task('lint-js', lintJsTask);
 gulp.task('docs', docsTask);
-gulp.task('test', ['lint', 'validHTML', 'unittest']);
+gulp.task('test', ['lint', 'unittest']);
 gulp.task('size', ['library-size', 'module-sizes']);
 gulp.task('server', serverTask);
-gulp.task('validHTML', validHTMLTask);
 gulp.task('unittest', unittestTask);
 gulp.task('library-size', librarySizeTask);
 gulp.task('module-sizes', moduleSizesTask);
@@ -79,9 +91,25 @@ function bowerTask() {
 
 function buildTask() {
 
+  var errorHandler = function (err) {
+    if(argv.forceOutput) {
+      var browserError = 'console.error("Gulp: ' + err.toString() + '")';
+      ['Chart', 'Chart.min', 'Chart.bundle', 'Chart.bundle.min'].forEach(function(fileName) {
+        fs.writeFileSync(outDir+fileName+'.js', browserError);
+      });
+    }
+    if(argv.silentErrors) {
+      util.log(util.colors.red('[Error]'), err.toString());
+      this.emit('end');
+    } else {
+      throw err;
+    }
+  }
+
   var bundled = browserify('./src/chart.js', { standalone: 'Chart' })
     .plugin(collapse)
     .bundle()
+    .on('error', errorHandler)
     .pipe(source('Chart.bundle.js'))
     .pipe(insert.prepend(header))
     .pipe(streamify(replace('{{ version }}', package.version)))
@@ -96,6 +124,7 @@ function buildTask() {
     .ignore('moment')
     .plugin(collapse)
     .bundle()
+    .on('error', errorHandler)
     .pipe(source('Chart.js'))
     .pipe(insert.prepend(header))
     .pipe(streamify(replace('{{ version }}', package.version)))
@@ -125,8 +154,9 @@ function packageTask() {
   .pipe(gulp.dest(outDir));
 }
 
-function lintTask() {
+function lintJsTask() {
   var files = [
+    'samples/**/*.html',
     'samples/**/*.js',
     'src/**/*.js',
     'test/**/*.js'
@@ -148,6 +178,13 @@ function lintTask() {
     .pipe(eslint.failAfterError());
 }
 
+function lintHtmlTask() {
+  return gulp.src('samples/**/*.html')
+    .pipe(htmllint({
+      failOnError: true,
+    }));
+}
+
 function docsTask(done) {
   const script = require.resolve('gitbook-cli/bin/gitbook.js');
   const cmd = process.execPath;
@@ -161,11 +198,6 @@ function docsTask(done) {
   });
 }
 
-function validHTMLTask() {
-  return gulp.src('samples/*.html')
-    .pipe(htmlv());
-}
-
 function startTest() {
   return [
     {pattern: './test/fixtures/**/*.json', included: false},

package.json

@@ -2,7 +2,7 @@
   "name": "chart.js",
   "homepage": "http://www.chartjs.org",
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "license": "MIT",
   "main": "src/chart.js",
   "repository": {
@@ -10,30 +10,33 @@
     "url": "https://github.com/chartjs/Chart.js.git"
   },
   "devDependencies": {
-    "browserify": "^14.3.0",
-    "browserify-istanbul": "^2.0.0",
-    "bundle-collapser": "^1.2.1",
+    "browserify": "^14.5.0",
+    "browserify-istanbul": "^3.0.1",
+    "bundle-collapser": "^1.3.0",
     "child-process-promise": "^2.2.1",
-    "coveralls": "^2.13.1",
-    "gitbook-cli": "^2.3.0",
+    "coveralls": "^3.0.0",
+    "eslint": "^4.9.0",
+    "eslint-config-chartjs": "^0.1.0",
+    "eslint-plugin-html": "^4.0.2",
+    "gitbook-cli": "^2.3.2",
     "gulp": "3.9.x",
     "gulp-concat": "~2.6.x",
     "gulp-connect": "~5.0.0",
-    "gulp-eslint": "^3.0.1",
+    "gulp-eslint": "^4.0.0",
     "gulp-file": "^0.3.0",
-    "gulp-html-validator": "^0.0.5",
+    "gulp-htmllint": "^0.0.15",
     "gulp-insert": "~0.5.0",
-    "gulp-replace": "^0.5.4",
+    "gulp-replace": "^0.6.1",
     "gulp-size": "~2.1.0",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "~3.0.x",
     "gulp-util": "~3.0.x",
     "gulp-zip": "~4.0.0",
-    "jasmine": "^2.6.0",
-    "jasmine-core": "^2.6.2",
-    "karma": "^1.7.0",
+    "jasmine": "^2.8.0",
+    "jasmine-core": "^2.8.0",
+    "karma": "^1.7.1",
     "karma-browserify": "^5.1.1",
-    "karma-chrome-launcher": "^2.1.1",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.1.0",
@@ -42,13 +45,13 @@
     "pixelmatch": "^4.0.2",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.9.0",
-    "yargs": "^8.0.1"
+    "yargs": "^9.0.1"
   },
   "spm": {
     "main": "Chart.js"
   },
   "dependencies": {
-    "chartjs-color": "~2.2.0",
-    "moment": "~2.18.0"
+    "chartjs-color": "^2.1.0",
+    "moment": "^2.10.2"
   }
 }

samples/.eslintrc.yml

@@ -0,0 +1,9 @@
+globals:
+  $: true
+  Chart: true
+  Samples: true
+  moment: true
+  randomScalingFactor: true
+
+rules:
+  no-new: 0

samples/advanced/data-labelling.html

@@ -3,130 +3,129 @@
 <html>
 
 <head>
-    <title>Labelling Data Points</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Labelling Data Points</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width: 75%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-        var color = Chart.helpers.color;
-        var barChartData = {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                type: 'bar',
-                label: 'Dataset 1',
-                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
-                borderColor: window.chartColors.red,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                type: 'line',
-                label: 'Dataset 2',
-                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
-                borderColor: window.chartColors.blue,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                type: 'bar',
-                label: 'Dataset 3',
-                backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
-                borderColor: window.chartColors.green,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }]
-        };
+	<div style="width: 75%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var color = Chart.helpers.color;
+		var barChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				type: 'bar',
+				label: 'Dataset 1',
+				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+				borderColor: window.chartColors.red,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				type: 'line',
+				label: 'Dataset 2',
+				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+				borderColor: window.chartColors.blue,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				type: 'bar',
+				label: 'Dataset 3',
+				backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
+				borderColor: window.chartColors.green,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
+		};
 
-        // Define a plugin to provide data labels
-        Chart.plugins.register({
-            afterDatasetsDraw: function(chart, easing) {
-                // To only draw at the end of animation, check for easing === 1
-                var ctx = chart.ctx;
+		// Define a plugin to provide data labels
+		Chart.plugins.register({
+			afterDatasetsDraw: function(chart) {
+				var ctx = chart.ctx;
 
-                chart.data.datasets.forEach(function (dataset, i) {
-                    var meta = chart.getDatasetMeta(i);
-                    if (!meta.hidden) {
-                        meta.data.forEach(function(element, index) {
-                            // Draw the text in black, with the specified font
-                            ctx.fillStyle = 'rgb(0, 0, 0)';
+				chart.data.datasets.forEach(function(dataset, i) {
+					var meta = chart.getDatasetMeta(i);
+					if (!meta.hidden) {
+						meta.data.forEach(function(element, index) {
+							// Draw the text in black, with the specified font
+							ctx.fillStyle = 'rgb(0, 0, 0)';
 
-                            var fontSize = 16;
-                            var fontStyle = 'normal';
-                            var fontFamily = 'Helvetica Neue';
-                            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+							var fontSize = 16;
+							var fontStyle = 'normal';
+							var fontFamily = 'Helvetica Neue';
+							ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
 
-                            // Just naively convert to string for now
-                            var dataString = dataset.data[index].toString();
+							// Just naively convert to string for now
+							var dataString = dataset.data[index].toString();
 
-                            // Make sure alignment settings are correct
-                            ctx.textAlign = 'center';
-                            ctx.textBaseline = 'middle';
+							// Make sure alignment settings are correct
+							ctx.textAlign = 'center';
+							ctx.textBaseline = 'middle';
 
-                            var padding = 5;
-                            var position = element.tooltipPosition();
-                            ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
-                        });
-                    }
-                });
-            }
-        });
+							var padding = 5;
+							var position = element.tooltipPosition();
+							ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
+						});
+					}
+				});
+			}
+		});
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myBar = new Chart(ctx, {
-                type: 'bar',
-                data: barChartData,
-                options: {
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Combo Bar Line Chart'
-                    },
-                }
-            });
-        };
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myBar = new Chart(ctx, {
+				type: 'bar',
+				data: barChartData,
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: 'Chart.js Combo Bar Line Chart'
+					},
+				}
+			});
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            barChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return randomScalingFactor();
-                })
-            });
-            window.myBar.update();
-        });
-    </script>
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			barChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
+			window.myBar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/advanced/progress-bar.html

@@ -1,96 +1,95 @@
 <!doctype html>
 <html>
 <head>
-	<title> Animation Callbacks </title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+<title> Animation Callbacks </title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width: 75%;">
-        <canvas id="canvas"></canvas>
-        <progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
-    </div>
-    <br>
-    <br>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var progress = document.getElementById('animationProgress');
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    fill: false,
-                    borderColor: window.chartColors.red,
-                    backgroundColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ]
-                }, {
-                    label: "My Second dataset ",
-                    fill: false,
-                    borderColor: window.chartColors.blue,
-                    backgroundColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ]
-                }]
-            },
-            options: {
-                title:{
-                    display:true,
-                    text: "Chart.js Line Chart - Animation Progress Bar"
-                },
-                animation: {
-                    duration: 2000,
-                    onProgress: function(animation) {
-                        progress.value = animation.currentStep / animation.numSteps;
-                    },
-                    onComplete: function(animation) {
-                        window.setTimeout(function() {
-                            progress.value = 0;
-                        }, 2000);
-                    }
-                }
-            }
-        };
+	<div style="width: 75%;">
+		<canvas id="canvas"></canvas>
+		<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>
+	</div>
+	<br>
+	<br>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var progress = document.getElementById('animationProgress');
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					fill: false,
+					borderColor: window.chartColors.red,
+					backgroundColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'My Second dataset ',
+					fill: false,
+					borderColor: window.chartColors.blue,
+					backgroundColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}]
+			},
+			options: {
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Animation Progress Bar'
+				},
+				animation: {
+					duration: 2000,
+					onProgress: function(animation) {
+						progress.value = animation.currentStep / animation.numSteps;
+					},
+					onComplete: function() {
+						window.setTimeout(function() {
+							progress.value = 0;
+						}, 2000);
+					}
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            config.data.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return randomScalingFactor();
-                });
-            });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-            window.myLine.update();
-        });
-    </script>
+			window.myLine.update();
+		});
+	</script>
 </body>
 
-</html>
+</html>

samples/charts/area/analyser.js

@@ -4,7 +4,7 @@
 
 (function() {
 	Chart.plugins.register({
-		id: 'samples_filler_analyser',
+		id: 'samples-filler-analyser',
 
 		beforeInit: function(chart, options) {
 			this.element = document.getElementById(options.target);

samples/charts/area/line-boundaries.html

@@ -94,15 +94,16 @@
 			});
 		});
 
-
+		// eslint-disable-next-line no-unused-vars
 		function toggleSmooth(btn) {
 			var value = btn.classList.toggle('btn-on');
 			Chart.helpers.each(Chart.instances, function(chart) {
-				chart.options.elements.line.tension = value? 0.4 : 0.000001;
+				chart.options.elements.line.tension = value ? 0.4 : 0.000001;
 				chart.update();
 			});
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function randomize() {
 			var seed = utils.rand();
 			Chart.helpers.each(Chart.instances, function(chart) {

samples/charts/area/line-datasets.html

@@ -38,7 +38,7 @@
 			return utils.numbers(inputs);
 		}
 
-		function generateLabels(config) {
+		function generateLabels() {
 			return utils.months({count: inputs.count});
 		}
 
@@ -122,7 +122,7 @@
 				filler: {
 					propagate: false
 				},
-				samples_filler_analyser: {
+				'samples-filler-analyser': {
 					target: 'chart-analyser'
 				}
 			}
@@ -134,18 +134,21 @@
 			options: options
 		});
 
+		// eslint-disable-next-line no-unused-vars
 		function togglePropagate(btn) {
 			var value = btn.classList.toggle('btn-on');
 			chart.options.plugins.filler.propagate = value;
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function toggleSmooth(btn) {
 			var value = btn.classList.toggle('btn-on');
-			chart.options.elements.line.tension = value? 0.4 : 0.000001;
+			chart.options.elements.line.tension = value ? 0.4 : 0.000001;
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function randomize() {
 			chart.data.datasets.forEach(function(dataset) {
 				dataset.data = generateData();

samples/charts/area/line-stacked.html

@@ -7,9 +7,9 @@
 	<script src="../../utils.js"></script>
 	<style>
 		canvas {
-				-moz-user-select: none;
-				-webkit-user-select: none;
-				-ms-user-select: none;
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
 		}
 	</style>
 </head>
@@ -26,70 +26,70 @@
 	<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 MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 		var config = {
 			type: 'line',
 			data: {
-				labels: ["January", "February", "March", "April", "May", "June", "July"],
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 				datasets: [{
-					label: "My First dataset",
+					label: 'My First dataset',
 					borderColor: window.chartColors.red,
 					backgroundColor: window.chartColors.red,
 					data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
 				}, {
-					label: "My Second dataset",
+					label: 'My Second dataset',
 					borderColor: window.chartColors.blue,
 					backgroundColor: window.chartColors.blue,
 					data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
 				}, {
-					label: "My Third dataset",
+					label: 'My Third dataset',
 					borderColor: window.chartColors.green,
 					backgroundColor: window.chartColors.green,
 					data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
 				}, {
-					label: "My Third dataset",
+					label: 'My Third dataset',
 					borderColor: window.chartColors.yellow,
 					backgroundColor: window.chartColors.yellow,
 					data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
 				}]
 			},
 			options: {
 				responsive: true,
-				title:{
-					display:true,
-					text:"Chart.js Line Chart - Stacked Area"
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Stacked Area'
 				},
 				tooltips: {
 					mode: 'index',
@@ -116,7 +116,7 @@
 		};
 
 		window.onload = function() {
-			var ctx = document.getElementById("canvas").getContext("2d");
+			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myLine = new Chart(ctx, config);
 		};
 
@@ -171,7 +171,7 @@
 		document.getElementById('removeData').addEventListener('click', function() {
 			config.data.labels.splice(-1, 1); // remove the label first
 
-			config.data.datasets.forEach(function(dataset, datasetIndex) {
+			config.data.datasets.forEach(function(dataset) {
 				dataset.data.pop();
 			});
 

samples/charts/area/radar.html

@@ -41,7 +41,7 @@
 			return values;
 		}
 
-		function generateLabels(config) {
+		function generateLabels() {
 			return utils.months({count: inputs.count});
 		}
 
@@ -100,7 +100,7 @@
 				filler: {
 					propagate: false
 				},
-				samples_filler_analyser: {
+				'samples-filler-analyser': {
 					target: 'chart-analyser'
 				}
 			}
@@ -112,18 +112,21 @@
 			options: options
 		});
 
+		// eslint-disable-next-line no-unused-vars
 		function togglePropagate(btn) {
 			var value = btn.classList.toggle('btn-on');
 			chart.options.plugins.filler.propagate = value;
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function toggleSmooth(btn) {
 			var value = btn.classList.toggle('btn-on');
-			chart.options.elements.line.tension = value? 0.4 : 0.000001;
+			chart.options.elements.line.tension = value ? 0.4 : 0.000001;
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function randomize() {
 			inputs.from = [];
 			chart.data.datasets.forEach(function(dataset) {

samples/charts/bar/horizontal.html

@@ -2,148 +2,148 @@
 <html>
 
 <head>
-    <title>Horizontal Bar Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Horizontal Bar Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div 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>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var color = Chart.helpers.color;
-        var horizontalBarChartData = {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                label: 'Dataset 1',
-                backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.red,
-                borderWidth: 1,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                label: 'Dataset 2',
-                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.blue,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }]
+	<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>
+	<script>
+		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'Dataset 1',
+				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.red,
+				borderWidth: 1,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				label: 'Dataset 2',
+				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.blue,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
 
-        };
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myHorizontalBar = new Chart(ctx, {
-                type: 'horizontalBar',
-                data: horizontalBarChartData,
-                options: {
-                    // Elements options apply to all of the options unless overridden in a dataset
-                    // In this case, we are setting the border of each horizontal bar to be 2px wide
-                    elements: {
-                        rectangle: {
-                            borderWidth: 2,
-                        }
-                    },
-                    responsive: true,
-                    legend: {
-                        position: 'right',
-                    },
-                    title: {
-                        display: true,
-                        text: 'Chart.js Horizontal Bar Chart'
-                    }
-                }
-            });
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+					// Elements options apply to all of the options unless overridden in a dataset
+					// In this case, we are setting the border of each horizontal bar to be 2px wide
+					elements: {
+						rectangle: {
+							borderWidth: 2,
+						}
+					},
+					responsive: true,
+					legend: {
+						position: 'right',
+					},
+					title: {
+						display: true,
+						text: 'Chart.js Horizontal Bar Chart'
+					}
+				}
+			});
 
-        };
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            var zero = Math.random() < 0.2 ? true : false;
-            horizontalBarChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return zero ? 0.0 : randomScalingFactor();
-                });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			var zero = Math.random() < 0.2 ? true : false;
+			horizontalBarChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return zero ? 0.0 : randomScalingFactor();
+				});
 
-            });
-            window.myHorizontalBar.update();
-        });
+			});
+			window.myHorizontalBar.update();
+		});
 
-        var colorNames = Object.keys(window.chartColors);
+		var colorNames = Object.keys(window.chartColors);
 
-        document.getElementById('addDataset').addEventListener('click', function() {
-            var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];;
-            var dsColor = window.chartColors[colorName];
-            var newDataset = {
-                label: 'Dataset ' + horizontalBarChartData.datasets.length,
-                backgroundColor: color(dsColor).alpha(0.5).rgbString(),
-                borderColor: dsColor,
-                data: []
-            };
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];
+			var dsColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + horizontalBarChartData.datasets.length,
+				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+				borderColor: dsColor,
+				data: []
+			};
 
-            for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
-                newDataset.data.push(randomScalingFactor());
-            }
+			for (var index = 0; index < horizontalBarChartData.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
 
-            horizontalBarChartData.datasets.push(newDataset);
-            window.myHorizontalBar.update();
-        });
+			horizontalBarChartData.datasets.push(newDataset);
+			window.myHorizontalBar.update();
+		});
 
-        document.getElementById('addData').addEventListener('click', function() {
-            if (horizontalBarChartData.datasets.length > 0) {
-                var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
-                horizontalBarChartData.labels.push(month);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (horizontalBarChartData.datasets.length > 0) {
+				var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
+				horizontalBarChartData.labels.push(month);
 
-                for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
-                    horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
-                }
+				for (var index = 0; index < horizontalBarChartData.datasets.length; ++index) {
+					horizontalBarChartData.datasets[index].data.push(randomScalingFactor());
+				}
 
-                window.myHorizontalBar.update();
-            }
-        });
+				window.myHorizontalBar.update();
+			}
+		});
 
-        document.getElementById('removeDataset').addEventListener('click', function() {
-            horizontalBarChartData.datasets.splice(0, 1);
-            window.myHorizontalBar.update();
-        });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			horizontalBarChartData.datasets.splice(0, 1);
+			window.myHorizontalBar.update();
+		});
 
-        document.getElementById('removeData').addEventListener('click', function() {
-            horizontalBarChartData.labels.splice(-1, 1); // remove the label first
+		document.getElementById('removeData').addEventListener('click', function() {
+			horizontalBarChartData.labels.splice(-1, 1); // remove the label first
 
-            horizontalBarChartData.datasets.forEach(function (dataset, datasetIndex) {
-                dataset.data.pop();
-            });
+			horizontalBarChartData.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-            window.myHorizontalBar.update();
-        });
-    </script>
+			window.myHorizontalBar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/bar/multi-axis.html

@@ -2,107 +2,107 @@
 <html>
 
 <head>
-    <title>Bar Chart Multi Axis</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Bar Chart Multi Axis</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width: 75%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-    var barChartData = {
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [{
-            label: 'Dataset 1',
-            backgroundColor: [
-                window.chartColors.red,
-                window.chartColors.orange,
-                window.chartColors.yellow,
-                window.chartColors.green,
-                window.chartColors.blue,
-                window.chartColors.purple,
-                window.chartColors.red
-            ],
-            yAxisID: "y-axis-1",
-            data: [
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor()
-            ]
-        }, {
-            label: 'Dataset 2',
-            backgroundColor: window.chartColors.grey,
-            yAxisID: "y-axis-2",
-            data: [
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor()
-            ]
-        }]
+	<div style="width: 75%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var barChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'Dataset 1',
+				backgroundColor: [
+					window.chartColors.red,
+					window.chartColors.orange,
+					window.chartColors.yellow,
+					window.chartColors.green,
+					window.chartColors.blue,
+					window.chartColors.purple,
+					window.chartColors.red
+				],
+				yAxisID: 'y-axis-1',
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				label: 'Dataset 2',
+				backgroundColor: window.chartColors.grey,
+				yAxisID: 'y-axis-2',
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
 
-    };
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myBar = new Chart(ctx, {
-            type: 'bar',
-            data: barChartData,
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:"Chart.js Bar Chart - Multi Axis"
-                },
-                tooltips: {
-                    mode: 'index',
-                    intersect: true
-                },
-                scales: {
-                    yAxes: [{
-                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                        display: true,
-                        position: "left",
-                        id: "y-axis-1",
-                    }, {
-                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                        display: true,
-                        position: "right",
-                        id: "y-axis-2",
-                        gridLines: {
-                            drawOnChartArea: false
-                        }
-                    }],
-                }
-            }
-        });
-    };
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myBar = new Chart(ctx, {
+				type: 'bar',
+				data: barChartData,
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: 'Chart.js Bar Chart - Multi Axis'
+					},
+					tooltips: {
+						mode: 'index',
+						intersect: true
+					},
+					scales: {
+						yAxes: [{
+							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+							display: true,
+							position: 'left',
+							id: 'y-axis-1',
+						}, {
+							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+							display: true,
+							position: 'right',
+							id: 'y-axis-2',
+							gridLines: {
+								drawOnChartArea: false
+							}
+						}],
+					}
+				}
+			});
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        barChartData.datasets.forEach(function(dataset, i) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-        });
-        window.myBar.update();
-    });
-    </script>
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			barChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
+			window.myBar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/bar/stacked-group.html

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

samples/charts/bar/stacked.html

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

samples/charts/bar/vertical.html

@@ -2,143 +2,143 @@
 <html>
 
 <head>
-    <title>Bar Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Bar Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div 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>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var color = Chart.helpers.color;
-        var barChartData = {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                label: 'Dataset 1',
-                backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.red,
-                borderWidth: 1,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                label: 'Dataset 2',
-                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.blue,
-                borderWidth: 1,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }]
+	<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>
+	<script>
+		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		var color = Chart.helpers.color;
+		var barChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'Dataset 1',
+				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.red,
+				borderWidth: 1,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				label: 'Dataset 2',
+				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.blue,
+				borderWidth: 1,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
 
-        };
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myBar = new Chart(ctx, {
-                type: 'bar',
-                data: barChartData,
-                options: {
-                    responsive: true,
-                    legend: {
-                        position: 'top',
-                    },
-                    title: {
-                        display: true,
-                        text: 'Chart.js Bar Chart'
-                    }
-                }
-            });
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myBar = new Chart(ctx, {
+				type: 'bar',
+				data: barChartData,
+				options: {
+					responsive: true,
+					legend: {
+						position: 'top',
+					},
+					title: {
+						display: true,
+						text: 'Chart.js Bar Chart'
+					}
+				}
+			});
 
-        };
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            var zero = Math.random() < 0.2 ? true : false;
-            barChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return zero ? 0.0 : randomScalingFactor();
-                });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			var zero = Math.random() < 0.2 ? true : false;
+			barChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return zero ? 0.0 : randomScalingFactor();
+				});
 
-            });
-            window.myBar.update();
-        });
+			});
+			window.myBar.update();
+		});
 
-        var colorNames = Object.keys(window.chartColors);
-        document.getElementById('addDataset').addEventListener('click', function() {
-            var colorName = colorNames[barChartData.datasets.length % colorNames.length];;
-            var dsColor = window.chartColors[colorName];
-            var newDataset = {
-                label: 'Dataset ' + barChartData.datasets.length,
-                backgroundColor: color(dsColor).alpha(0.5).rgbString(),
-                borderColor: dsColor,
-                borderWidth: 1,
-                data: []
-            };
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[barChartData.datasets.length % colorNames.length];
+			var dsColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + barChartData.datasets.length,
+				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+				borderColor: dsColor,
+				borderWidth: 1,
+				data: []
+			};
 
-            for (var index = 0; index < barChartData.labels.length; ++index) {
-                newDataset.data.push(randomScalingFactor());
-            }
+			for (var index = 0; index < barChartData.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
 
-            barChartData.datasets.push(newDataset);
-            window.myBar.update();
-        });
+			barChartData.datasets.push(newDataset);
+			window.myBar.update();
+		});
 
-        document.getElementById('addData').addEventListener('click', function() {
-            if (barChartData.datasets.length > 0) {
-                var month = MONTHS[barChartData.labels.length % MONTHS.length];
-                barChartData.labels.push(month);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (barChartData.datasets.length > 0) {
+				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);
-                    barChartData.datasets[index].data.push(randomScalingFactor());
-                }
+				for (var index = 0; index < barChartData.datasets.length; ++index) {
+					// window.myBar.addData(randomScalingFactor(), index);
+					barChartData.datasets[index].data.push(randomScalingFactor());
+				}
 
-                window.myBar.update();
-            }
-        });
+				window.myBar.update();
+			}
+		});
 
-        document.getElementById('removeDataset').addEventListener('click', function() {
-            barChartData.datasets.splice(0, 1);
-            window.myBar.update();
-        });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			barChartData.datasets.splice(0, 1);
+			window.myBar.update();
+		});
 
-        document.getElementById('removeData').addEventListener('click', function() {
-            barChartData.labels.splice(-1, 1); // remove the label first
+		document.getElementById('removeData').addEventListener('click', function() {
+			barChartData.labels.splice(-1, 1); // remove the label first
 
-            barChartData.datasets.forEach(function(dataset, datasetIndex) {
-                dataset.data.pop();
-            });
+			barChartData.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-            window.myBar.update();
-        });
-    </script>
+			window.myBar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/bubble.html

@@ -2,190 +2,190 @@
 <html>
 
 <head>
-    <title>Bubble Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style type="text/css">
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Bubble Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style type="text/css">
+		canvas{
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <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>
-    <script>
-        var DEFAULT_DATASET_SIZE = 7;
+	<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>
+	<script>
+		var DEFAULT_DATASET_SIZE = 7;
 
-        var addedCount = 0;
-        var color = Chart.helpers.color;
-        var bubbleChartData = {
-            animation: {
-                duration: 10000
-            },
-            datasets: [{
-                label: "My First dataset",
-                backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.red,
-                borderWidth: 1,
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }]
-            }, {
-                label: "My Second dataset",
-                backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
-                borderColor: window.chartColors.orange,
-                borderWidth: 1,
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                }]
-            }]
-        };
+		var addedCount = 0;
+		var color = Chart.helpers.color;
+		var bubbleChartData = {
+			animation: {
+				duration: 10000
+			},
+			datasets: [{
+				label: 'My First dataset',
+				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.red,
+				borderWidth: 1,
+				data: [{
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}]
+			}, {
+				label: 'My Second dataset',
+				backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
+				borderColor: window.chartColors.orange,
+				borderWidth: 1,
+				data: [{
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				}]
+			}]
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myChart = new Chart(ctx, {
-                type: 'bubble',
-                data: bubbleChartData,
-                options: {
-                    responsive: true,
-                    title:{
-                        display:true,
-                        text:'Chart.js Bubble Chart'
-                    },
-                    tooltips: {
-                        mode: 'point'
-                    }
-                }
-            });
-        };
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myChart = new Chart(ctx, {
+				type: 'bubble',
+				data: bubbleChartData,
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: 'Chart.js Bubble Chart'
+					},
+					tooltips: {
+						mode: 'point'
+					}
+				}
+			});
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            bubbleChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return {
-                        x: randomScalingFactor(),
-                        y: randomScalingFactor(),
-                        r: Math.abs(randomScalingFactor()) / 5,
-                    };
-                });
-            });
-            window.myChart.update();
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			bubbleChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return {
+						x: randomScalingFactor(),
+						y: randomScalingFactor(),
+						r: Math.abs(randomScalingFactor()) / 5,
+					};
+				});
+			});
+			window.myChart.update();
+		});
 
-        var colorNames = Object.keys(window.chartColors);
-        document.getElementById('addDataset').addEventListener('click', function() {
-            ++addedCount;
-            var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];;
-            var dsColor = window.chartColors[colorName];
-            var newDataset = {
-                label: "My added dataset " + addedCount,
-                backgroundColor: color(dsColor).alpha(0.5).rgbString(),
-                borderColor: dsColor,
-                borderWidth: 1,
-                data: []
-            };
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			++addedCount;
+			var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];
+			var dsColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'My added dataset ' + addedCount,
+				backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+				borderColor: dsColor,
+				borderWidth: 1,
+				data: []
+			};
 
-            for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
-                newDataset.data.push({
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                    r: Math.abs(randomScalingFactor()) / 5,
-                });
-            }
+			for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
+				newDataset.data.push({
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+					r: Math.abs(randomScalingFactor()) / 5,
+				});
+			}
 
-            bubbleChartData.datasets.push(newDataset);
-            window.myChart.update();
-        });
+			bubbleChartData.datasets.push(newDataset);
+			window.myChart.update();
+		});
 
-        document.getElementById('addData').addEventListener('click', function() {
-            if (bubbleChartData.datasets.length > 0) {
-                for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
-                    bubbleChartData.datasets[index].data.push({
-                        x: randomScalingFactor(),
-                        y: randomScalingFactor(),
-                        r: Math.abs(randomScalingFactor()) / 5,
-                    });
-                }
+		document.getElementById('addData').addEventListener('click', function() {
+			if (bubbleChartData.datasets.length > 0) {
+				for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
+					bubbleChartData.datasets[index].data.push({
+						x: randomScalingFactor(),
+						y: randomScalingFactor(),
+						r: Math.abs(randomScalingFactor()) / 5,
+					});
+				}
 
-                window.myChart.update();
-            }
-        });
+				window.myChart.update();
+			}
+		});
 
-        document.getElementById('removeDataset').addEventListener('click', function() {
-            bubbleChartData.datasets.splice(0, 1);
-            window.myChart.update();
-        });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			bubbleChartData.datasets.splice(0, 1);
+			window.myChart.update();
+		});
 
-        document.getElementById('removeData').addEventListener('click', function() {
-            bubbleChartData.datasets.forEach(function(dataset, datasetIndex) {
-                dataset.data.pop();
-            });
+		document.getElementById('removeData').addEventListener('click', function() {
+			bubbleChartData.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-            window.myChart.update();
-        });
-    </script>
+			window.myChart.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/combo-bar-line.html

@@ -2,100 +2,100 @@
 <html>
 
 <head>
-    <title>Combo Bar-Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Combo Bar-Line Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width: 75%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-        var chartData = {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                type: 'line',
-                label: 'Dataset 1',
-                borderColor: window.chartColors.blue,
-                borderWidth: 2,
-                fill: false,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                type: 'bar',
-                label: 'Dataset 2',
-                backgroundColor: window.chartColors.red,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ],
-                borderColor: 'white',
-                borderWidth: 2
-            }, {
-                type: 'bar',
-                label: 'Dataset 3',
-                backgroundColor: window.chartColors.green,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }]
+	<div style="width: 75%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var chartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				type: 'line',
+				label: 'Dataset 1',
+				borderColor: window.chartColors.blue,
+				borderWidth: 2,
+				fill: false,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}, {
+				type: 'bar',
+				label: 'Dataset 2',
+				backgroundColor: window.chartColors.red,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				],
+				borderColor: 'white',
+				borderWidth: 2
+			}, {
+				type: 'bar',
+				label: 'Dataset 3',
+				backgroundColor: window.chartColors.green,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				]
+			}]
 
-        };
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myMixedChart = new Chart(ctx, {
-                type: 'bar',
-                data: chartData,
-                options: {
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Chart.js Combo Bar Line Chart'
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: true
-                    }
-                }
-            });
-        };
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myMixedChart = new Chart(ctx, {
+				type: 'bar',
+				data: chartData,
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: 'Chart.js Combo Bar Line Chart'
+					},
+					tooltips: {
+						mode: 'index',
+						intersect: true
+					}
+				}
+			});
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            chartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return randomScalingFactor();
-                });
-            });
-            window.myMixedChart.update();
-        });
-    </script>
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			chartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
+			window.myMixedChart.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/doughnut.html

@@ -2,143 +2,143 @@
 <html>
 
 <head>
-    <title>Doughnut Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Doughnut Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:40%">
-        <canvas id="chart-area" />
-    </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>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100);
-    };
+	<div id="canvas-holder" style="width:40%">
+		<canvas id="chart-area"></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>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-    var config = {
-        type: 'doughnut',
-        data: {
-            datasets: [{
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                ],
-                backgroundColor: [
-                    window.chartColors.red,
-                    window.chartColors.orange,
-                    window.chartColors.yellow,
-                    window.chartColors.green,
-                    window.chartColors.blue,
-                ],
-                label: 'Dataset 1'
-            }],
-            labels: [
-                "Red",
-                "Orange",
-                "Yellow",
-                "Green",
-                "Blue"
-            ]
-        },
-        options: {
-            responsive: true,
-            legend: {
-                position: 'top',
-            },
-            title: {
-                display: true,
-                text: 'Chart.js Doughnut Chart'
-            },
-            animation: {
-                animateScale: true,
-                animateRotate: true
-            }
-        }
-    };
+		var config = {
+			type: 'doughnut',
+			data: {
+				datasets: [{
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+					],
+					backgroundColor: [
+						window.chartColors.red,
+						window.chartColors.orange,
+						window.chartColors.yellow,
+						window.chartColors.green,
+						window.chartColors.blue,
+					],
+					label: 'Dataset 1'
+				}],
+				labels: [
+					'Red',
+					'Orange',
+					'Yellow',
+					'Green',
+					'Blue'
+				]
+			},
+			options: {
+				responsive: true,
+				legend: {
+					position: 'top',
+				},
+				title: {
+					display: true,
+					text: 'Chart.js Doughnut Chart'
+				},
+				animation: {
+					animateScale: true,
+					animateRotate: true
+				}
+			}
+		};
 
-    window.onload = function() {
-        var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myDoughnut = new Chart(ctx, config);
-    };
+		window.onload = function() {
+			var ctx = document.getElementById('chart-area').getContext('2d');
+			window.myDoughnut = new Chart(ctx, config);
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-        window.myDoughnut.update();
-    });
+			window.myDoughnut.update();
+		});
 
-    var colorNames = Object.keys(window.chartColors);
-    document.getElementById('addDataset').addEventListener('click', function() {
-        var newDataset = {
-            backgroundColor: [],
-            data: [],
-            label: 'New dataset ' + config.data.datasets.length,
-        };
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var newDataset = {
+				backgroundColor: [],
+				data: [],
+				label: 'New dataset ' + config.data.datasets.length,
+			};
 
-        for (var index = 0; index < config.data.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
 
-            var colorName = colorNames[index % colorNames.length];;
-            var newColor = window.chartColors[colorName];
-            newDataset.backgroundColor.push(newColor);
-        }
+				var colorName = colorNames[index % colorNames.length];
+				var newColor = window.chartColors[colorName];
+				newDataset.backgroundColor.push(newColor);
+			}
 
-        config.data.datasets.push(newDataset);
-        window.myDoughnut.update();
-    });
+			config.data.datasets.push(newDataset);
+			window.myDoughnut.update();
+		});
 
-    document.getElementById('addData').addEventListener('click', function() {
-        if (config.data.datasets.length > 0) {
-            config.data.labels.push('data #' + config.data.labels.length);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				config.data.labels.push('data #' + config.data.labels.length);
 
-            var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];;
-            var newColor = window.chartColors[colorName];
+				var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
+				var newColor = window.chartColors[colorName];
 
-            config.data.datasets.forEach(function(dataset) {
-                dataset.data.push(randomScalingFactor());
-                dataset.backgroundColor.push(newColor);
-            });
+				config.data.datasets.forEach(function(dataset) {
+					dataset.data.push(randomScalingFactor());
+					dataset.backgroundColor.push(newColor);
+				});
 
-            window.myDoughnut.update();
-        }
-    });
+				window.myDoughnut.update();
+			}
+		});
 
-    document.getElementById('removeDataset').addEventListener('click', function() {
-        config.data.datasets.splice(0, 1);
-        window.myDoughnut.update();
-    });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myDoughnut.update();
+		});
 
-    document.getElementById('removeData').addEventListener('click', function() {
-        config.data.labels.splice(-1, 1); // remove the label first
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.splice(-1, 1); // remove the label first
 
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data.pop();
-            dataset.backgroundColor.pop();
-        });
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+				dataset.backgroundColor.pop();
+			});
 
-        window.myDoughnut.update();
-    });
-    </script>
+			window.myDoughnut.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/line/basic.html

@@ -2,162 +2,162 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <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>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart.js Line Chart'
-                },
-                tooltips: {
-                    mode: 'index',
-                    intersect: false,
-                },
-                hover: {
-                    mode: 'nearest',
-                    intersect: true
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        }
-                    }]
-                }
-            }
-        };
+	<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>
+	<script>
+		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart'
+				},
+				tooltips: {
+					mode: 'index',
+					intersect: false,
+				},
+				hover: {
+					mode: 'nearest',
+					intersect: true
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            config.data.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return randomScalingFactor();
-                });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
 
-            });
+			});
 
-            window.myLine.update();
-        });
+			window.myLine.update();
+		});
 
-        var colorNames = Object.keys(window.chartColors);
-        document.getElementById('addDataset').addEventListener('click', function() {
-            var colorName = colorNames[config.data.datasets.length % colorNames.length];
-            var newColor = window.chartColors[colorName];
-            var newDataset = {
-                label: 'Dataset ' + config.data.datasets.length,
-                backgroundColor: newColor,
-                borderColor: newColor,
-                data: [],
-                fill: false
-            };
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[config.data.datasets.length % colorNames.length];
+			var newColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + config.data.datasets.length,
+				backgroundColor: newColor,
+				borderColor: newColor,
+				data: [],
+				fill: false
+			};
 
-            for (var index = 0; index < config.data.labels.length; ++index) {
-                newDataset.data.push(randomScalingFactor());
-            }
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
 
-            config.data.datasets.push(newDataset);
-            window.myLine.update();
-        });
+			config.data.datasets.push(newDataset);
+			window.myLine.update();
+		});
 
-        document.getElementById('addData').addEventListener('click', function() {
-            if (config.data.datasets.length > 0) {
-                var month = MONTHS[config.data.labels.length % MONTHS.length];
-                config.data.labels.push(month);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				var month = MONTHS[config.data.labels.length % MONTHS.length];
+				config.data.labels.push(month);
 
-                config.data.datasets.forEach(function(dataset) {
-                    dataset.data.push(randomScalingFactor());
-                });
+				config.data.datasets.forEach(function(dataset) {
+					dataset.data.push(randomScalingFactor());
+				});
 
-                window.myLine.update();
-            }
-        });
+				window.myLine.update();
+			}
+		});
 
-        document.getElementById('removeDataset').addEventListener('click', function() {
-            config.data.datasets.splice(0, 1);
-            window.myLine.update();
-        });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myLine.update();
+		});
 
-        document.getElementById('removeData').addEventListener('click', function() {
-            config.data.labels.splice(-1, 1); // remove the label first
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.splice(-1, 1); // remove the label first
 
-            config.data.datasets.forEach(function(dataset, datasetIndex) {
-                dataset.data.pop();
-            });
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-            window.myLine.update();
-        });
-    </script>
+			window.myLine.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/line/interpolation-modes.html

@@ -2,102 +2,102 @@
 <html>
 
 <head>
-    <title>Line Chart - Cubic interpolation mode</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart - Cubic interpolation mode</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <br>
-    <br>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<br>
+	<br>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
 
-        var randomScalingFactor = function() {
-            return Math.round(Math.random() * 100);
-        };
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-        var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
+		var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
 		var config = {
-            type: 'line',
-            data: {
-                labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
-                datasets: [{
-                    label: "Cubic interpolation (monotone)",
-                    data: datapoints,
-                    borderColor: window.chartColors.red,
+			type: 'line',
+			data: {
+				labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+				datasets: [{
+					label: 'Cubic interpolation (monotone)',
+					data: datapoints,
+					borderColor: window.chartColors.red,
 					backgroundColor: 'rgba(0, 0, 0, 0)',
-                    fill: false,
+					fill: false,
 					cubicInterpolationMode: 'monotone'
-                }, {
-                    label: "Cubic interpolation (default)",
-                    data: datapoints,
-                    borderColor: window.chartColors.blue,
+				}, {
+					label: 'Cubic interpolation (default)',
+					data: datapoints,
+					borderColor: window.chartColors.blue,
 					backgroundColor: 'rgba(0, 0, 0, 0)',
-                    fill: false,
-                }, {
-                    label: "Linear interpolation",
-                    data: datapoints,
-                    borderColor: window.chartColors.green,
+					fill: false,
+				}, {
+					label: 'Linear interpolation',
+					data: datapoints,
+					borderColor: window.chartColors.green,
 					backgroundColor: 'rgba(0, 0, 0, 0)',
-                    fill: false,
+					fill: false,
 					lineTension: 0
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart.js Line Chart - Cubic interpolation mode'
-                },
-                tooltips: {
-                    mode: 'index'
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        },
-                        ticks: {
-                            suggestedMin: -10,
-                            suggestedMax: 200,
-                        }
-                    }]
-                }
-            }
-        };
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Cubic interpolation mode'
+				},
+				tooltips: {
+					mode: 'index'
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						},
+						ticks: {
+							suggestedMin: -10,
+							suggestedMax: 200,
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
+		document.getElementById('randomizeData').addEventListener('click', function() {
 			for (var i = 0, len = datapoints.length; i < len; ++i) {
 				datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
 			}
-            window.myLine.update();
-        });
+			window.myLine.update();
+		});
 
-    </script>
+	</script>
 </body>
 
 </html>

samples/charts/line/line-styles.html

@@ -2,110 +2,110 @@
 <html>
 
 <head>
-    <title>Line Styles</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Styles</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "Unfilled",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                }, {
-                    label: "Dashed",
-                    fill: false,
-                    backgroundColor: window.chartColors.green,
-                    borderColor: window.chartColors.green,
-                    borderDash: [5, 5],
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                }, {
-                    label: "Filled",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    fill: true,
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart.js Line Chart'
-                },
-                tooltips: {
-                    mode: 'index',
-                    intersect: false,
-                },
-                hover: {
-                    mode: 'nearest',
-                    intersect: true
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        }
-                    }]
-                }
-            }
-        };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'Unfilled',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, {
+					label: 'Dashed',
+					fill: false,
+					backgroundColor: window.chartColors.green,
+					borderColor: window.chartColors.green,
+					borderDash: [5, 5],
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, {
+					label: 'Filled',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					fill: true,
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart'
+				},
+				tooltips: {
+					mode: 'index',
+					intersect: false,
+				},
+				hover: {
+					mode: 'nearest',
+					intersect: true
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/charts/line/multi-axis.html

@@ -2,103 +2,103 @@
 <html>
 
 <head>
-    <title>Line Chart Multiple Axes</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart Multiple Axes</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-    var lineChartData = {
-        labels: ["January", "February", "March", "April", "May", "June", "July"],
-        datasets: [{
-            label: "My First dataset",
-            borderColor: window.chartColors.red,
-            backgroundColor: window.chartColors.red,
-            fill: false,
-            data: [
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor()
-            ],
-            yAxisID: "y-axis-1",
-        }, {
-            label: "My Second dataset",
-            borderColor: window.chartColors.blue,
-            backgroundColor: window.chartColors.blue,
-            fill: false,
-            data: [
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor(),
-                randomScalingFactor()
-            ],
-            yAxisID: "y-axis-2"
-        }]
-    };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var lineChartData = {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'My First dataset',
+				borderColor: window.chartColors.red,
+				backgroundColor: window.chartColors.red,
+				fill: false,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				],
+				yAxisID: 'y-axis-1',
+			}, {
+				label: 'My Second dataset',
+				borderColor: window.chartColors.blue,
+				backgroundColor: window.chartColors.blue,
+				fill: false,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				],
+				yAxisID: 'y-axis-2'
+			}]
+		};
 
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = Chart.Line(ctx, {
-            data: lineChartData,
-            options: {
-                responsive: true,
-                hoverMode: 'index',
-                stacked: false,
-                title:{
-                    display: true,
-                    text:'Chart.js Line 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
-                        display: true,
-                        position: "left",
-                        id: "y-axis-1",
-                    }, {
-                        type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
-                        display: true,
-                        position: "right",
-                        id: "y-axis-2",
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = Chart.Line(ctx, {
+				data: lineChartData,
+				options: {
+					responsive: true,
+					hoverMode: 'index',
+					stacked: false,
+					title: {
+						display: true,
+						text: 'Chart.js Line 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
+							display: true,
+							position: 'left',
+							id: 'y-axis-1',
+						}, {
+							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+							display: true,
+							position: 'right',
+							id: 'y-axis-2',
 
-                        // grid line settings
-                        gridLines: {
-                            drawOnChartArea: false, // only want the grid lines for one axis to show up
-                        },
-                    }],
-                }
-            }
-        });
-    };
+							// grid line settings
+							gridLines: {
+								drawOnChartArea: false, // only want the grid lines for one axis to show up
+							},
+						}],
+					}
+				}
+			});
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        lineChartData.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			lineChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-        window.myLine.update();
-    });
-    </script>
+			window.myLine.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/line/point-sizes.html

@@ -2,129 +2,128 @@
 <html>
 
 <head>
-    <title>Different Point Sizes</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-        canvas {
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-        }
-    </style>
+	<title>Different Point Sizes</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "dataset - big points",
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    fill: false,
-                    borderDash: [5, 5],
-                    pointRadius: 15,
-                    pointHoverRadius: 10,
-                }, {
-                    label: "dataset - individual point sizes",
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    fill: false,
-                    borderDash: [5, 5],
-                    pointRadius: [2, 4, 6, 18, 0, 12, 20],
-                }, {
-                    label: "dataset - large pointHoverRadius",
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    backgroundColor: window.chartColors.green,
-                    borderColor: window.chartColors.green,
-                    fill: false,
-                    pointHoverRadius: 30,
-                }, {
-                    label: "dataset - large pointHitRadius",
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
-                    backgroundColor: window.chartColors.yellow,
-                    borderColor: window.chartColors.yellow,
-                    fill: false,
-                    pointHitRadius: 20,
-                }]
-            },
-            options: {
-                responsive: true,
-                legend: {
-                    position: 'bottom',
-                },
-                hover: {
-                    mode: 'index'
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        }
-                    }]
-                },
-                title: {
-                    display: true,
-                    text: 'Chart.js Line Chart - Different point sizes'
-                }
-            }
-        };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'dataset - big points',
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					fill: false,
+					borderDash: [5, 5],
+					pointRadius: 15,
+					pointHoverRadius: 10,
+				}, {
+					label: 'dataset - individual point sizes',
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					fill: false,
+					borderDash: [5, 5],
+					pointRadius: [2, 4, 6, 18, 0, 12, 20],
+				}, {
+					label: 'dataset - large pointHoverRadius',
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					backgroundColor: window.chartColors.green,
+					borderColor: window.chartColors.green,
+					fill: false,
+					pointHoverRadius: 30,
+				}, {
+					label: 'dataset - large pointHitRadius',
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					backgroundColor: window.chartColors.yellow,
+					borderColor: window.chartColors.yellow,
+					fill: false,
+					pointHitRadius: 20,
+				}]
+			},
+			options: {
+				responsive: true,
+				legend: {
+					position: 'bottom',
+				},
+				hover: {
+					mode: 'index'
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						}
+					}]
+				},
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Different point sizes'
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/charts/line/point-styles.html

@@ -2,95 +2,95 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    .chart-container {
-        width: 500px;
-        margin-left: 40px;
-        margin-right: 40px;
-        margin-bottom: 40px;
-    }
-    .container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	.chart-container {
+		width: 500px;
+		margin-left: 40px;
+		margin-right: 40px;
+		margin-bottom: 40px;
+	}
+	.container {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+	</style>
 </head>
 
 <body>
-    <div class="container">
-    </div>
-    <script>
-        function createConfig(pointStyle) {
-            return {
-                type: 'line',
-                data: {
-                    labels: ["January", "February", "March", "April", "May", "June", "July"],
-                    datasets: [{
-                        label: "My First dataset",
-                        backgroundColor: window.chartColors.red,
-                        borderColor: window.chartColors.red,
-                        data: [10, 23, 5, 99, 67, 43, 0],
-                        fill: false,
-                        pointRadius: 10,
-                        pointHoverRadius: 15,
-                        showLine: false // no line shown
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title:{
-                        display:true,
-                        text:'Point Style: ' + pointStyle
-                    },
-                    legend: {
-                        display: false
-                    },
-                    elements: {
-                        point: {
-                            pointStyle: pointStyle
-                        }
-                    }
-                }
-            };
-        }
+	<div class="container">
+	</div>
+	<script>
+		function createConfig(pointStyle) {
+			return {
+				type: 'line',
+				data: {
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+					datasets: [{
+						label: 'My First dataset',
+						backgroundColor: window.chartColors.red,
+						borderColor: window.chartColors.red,
+						data: [10, 23, 5, 99, 67, 43, 0],
+						fill: false,
+						pointRadius: 10,
+						pointHoverRadius: 15,
+						showLine: false // no line shown
+					}]
+				},
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: 'Point Style: ' + pointStyle
+					},
+					legend: {
+						display: false
+					},
+					elements: {
+						point: {
+							pointStyle: pointStyle
+						}
+					}
+				}
+			};
+		}
 
-        window.onload = function() {
-            var container = document.querySelector('.container');
-            [
-                'circle',
-                'triangle',
-                'rect',
-                'rectRounded',
-                'rectRot',
-                'cross',
-                'crossRot',
-                'star',
-                'line',
-                'dash'
-            ].forEach(function(pointStyle) {
-                var div = document.createElement('div');
-                div.classList.add('chart-container');
+		window.onload = function() {
+			var container = document.querySelector('.container');
+			[
+				'circle',
+				'triangle',
+				'rect',
+				'rectRounded',
+				'rectRot',
+				'cross',
+				'crossRot',
+				'star',
+				'line',
+				'dash'
+			].forEach(function(pointStyle) {
+				var div = document.createElement('div');
+				div.classList.add('chart-container');
 
-                var canvas = document.createElement('canvas');
-                div.appendChild(canvas);
-                container.appendChild(div);
+				var canvas = document.createElement('canvas');
+				div.appendChild(canvas);
+				container.appendChild(div);
 
-                var ctx = canvas.getContext('2d');
-                var config = createConfig(pointStyle);
-                new Chart(ctx, config);
-            });
-        };
-    </script>
+				var ctx = canvas.getContext('2d');
+				var config = createConfig(pointStyle);
+				new Chart(ctx, config);
+			});
+		};
+	</script>
 </body>
 
 </html>

samples/charts/line/skip-points.html

@@ -2,94 +2,94 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    borderColor: window.chartColors.red,
-                    fill: false,
-                    // Skip a point in the middle
-                    data: [
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        NaN,
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor()
-                    ],
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					borderColor: window.chartColors.red,
+					fill: false,
+					// Skip a point in the middle
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						NaN,
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
 
-                }, {
-                    label: "My Second dataset",
-                    borderColor: window.chartColors.blue,
-                    fill: false,
-                    // Skip first and last points
-                    data: [
-                        NaN,
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        randomScalingFactor(),
-                        NaN
-                    ],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart.js Line Chart - Skip Points'
-                },
-                tooltips: {
-                    mode: 'index',
-                },
-                hover: {
-                    mode: 'index'
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        },
-                    }]
-                }
-            }
-        };
+				}, {
+					label: 'My Second dataset',
+					borderColor: window.chartColors.blue,
+					fill: false,
+					// Skip first and last points
+					data: [
+						NaN,
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						NaN
+					],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Skip Points'
+				},
+				tooltips: {
+					mode: 'index',
+				},
+				hover: {
+					mode: 'index'
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						},
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/charts/line/stepped.html

@@ -2,9 +2,9 @@
 <html>
 
 <head>
-    <title>Stepped Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
+	<title>Stepped Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
 	<style>
 	canvas {
 		-moz-user-select: none;
@@ -29,75 +29,75 @@
 <body>
 	<div class="container">
 	</div>
-    <script>
-	function createConfig(details, data) {
-		return {
-			type: 'line',
-			data: {
-				labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
-				datasets: [{
-					label: 'steppedLine: ' + ((typeof(details.steppedLine) === 'boolean') ? details.steppedLine : `'${details.steppedLine}'`),
-					steppedLine: details.steppedLine,
-					data: data,
-					borderColor: details.color,
-					fill: false,
-				}]
-			},
-			options: {
-				responsive: true,
-				title: {
-					display: true,
-					text: details.label,
+	<script>
+		function createConfig(details, data) {
+			return {
+				type: 'line',
+				data: {
+					labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
+					datasets: [{
+						label: 'steppedLine: ' + details.steppedLine,
+						steppedLine: details.steppedLine,
+						data: data,
+						borderColor: details.color,
+						fill: false,
+					}]
+				},
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: details.label,
+					}
 				}
-			}
+			};
+		}
+
+
+		window.onload = function() {
+			var container = document.querySelector('.container');
+
+			var data = [
+				randomScalingFactor(),
+				randomScalingFactor(),
+				randomScalingFactor(),
+				randomScalingFactor(),
+				randomScalingFactor(),
+				randomScalingFactor()
+			];
+
+			var steppedLineSettings = [{
+				steppedLine: false,
+				label: 'No Step Interpolation',
+				color: window.chartColors.red
+			}, {
+				steppedLine: true,
+				label: 'Step Before Interpolation',
+				color: window.chartColors.green
+			}, {
+				steppedLine: 'before',
+				label: 'Step Before Interpolation',
+				color: window.chartColors.green
+			}, {
+				steppedLine: 'after',
+				label: 'Step After Interpolation',
+				color: window.chartColors.purple
+			}];
+
+			steppedLineSettings.forEach(function(details) {
+				var div = document.createElement('div');
+				div.classList.add('chart-container');
+
+				var canvas = document.createElement('canvas');
+				div.appendChild(canvas);
+				container.appendChild(div);
+
+				var ctx = canvas.getContext('2d');
+				var config = createConfig(details, data);
+				new Chart(ctx, config);
+			});
 		};
-	}
-
-
-	window.onload = function() {
-		var container = document.querySelector('.container');
-
-		var data = [
-			randomScalingFactor(),
-			randomScalingFactor(),
-			randomScalingFactor(),
-			randomScalingFactor(),
-			randomScalingFactor(),
-			randomScalingFactor()
-		];
-
-		var steppedLineSettings = [{
-			steppedLine: false,
-			label: 'No Step Interpolation',
-			color: window.chartColors.red
-		}, {
-			steppedLine: true,
-			label: 'Step Before Interpolation',
-			color: window.chartColors.green
-		}, {
-			steppedLine: 'before',
-			label: 'Step Before Interpolation',
-			color: window.chartColors.green
-		}, {
-			steppedLine: 'after',
-			label: 'Step After Interpolation',
-			color: window.chartColors.purple
-		}];
-
-		steppedLineSettings.forEach(function(details) {
-			var div = document.createElement('div');
-			div.classList.add('chart-container');
-
-			var canvas = document.createElement('canvas');
-			div.appendChild(canvas);
-			container.appendChild(div);
-
-			var ctx = canvas.getContext('2d');
-			var config = createConfig(details, data);
-			new Chart(ctx, config);
-		});
-	};
-    </script>
+	</script>
 </body>
 
 </html>

samples/charts/pie.html

@@ -2,96 +2,96 @@
 <html>
 
 <head>
-    <title>Pie Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
+	<title>Pie Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:40%">
-        <canvas id="chart-area" />
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <button id="addDataset">Add Dataset</button>
-    <button id="removeDataset">Remove Dataset</button>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100);
-    };
+	<div id="canvas-holder" style="width:40%">
+		<canvas id="chart-area"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<button id="addDataset">Add Dataset</button>
+	<button id="removeDataset">Remove Dataset</button>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-    var config = {
-        type: 'pie',
-        data: {
-            datasets: [{
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                ],
-                backgroundColor: [
-                    window.chartColors.red,
-                    window.chartColors.orange,
-                    window.chartColors.yellow,
-                    window.chartColors.green,
-                    window.chartColors.blue,
-                ],
-                label: 'Dataset 1'
-            }],
-            labels: [
-                "Red",
-                "Orange",
-                "Yellow",
-                "Green",
-                "Blue"
-            ]
-        },
-        options: {
-            responsive: true
-        }
-    };
+		var config = {
+			type: 'pie',
+			data: {
+				datasets: [{
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+					],
+					backgroundColor: [
+						window.chartColors.red,
+						window.chartColors.orange,
+						window.chartColors.yellow,
+						window.chartColors.green,
+						window.chartColors.blue,
+					],
+					label: 'Dataset 1'
+				}],
+				labels: [
+					'Red',
+					'Orange',
+					'Yellow',
+					'Green',
+					'Blue'
+				]
+			},
+			options: {
+				responsive: true
+			}
+		};
 
-    window.onload = function() {
-        var ctx = document.getElementById("chart-area").getContext("2d");
-        window.myPie = new Chart(ctx, config);
-    };
+		window.onload = function() {
+			var ctx = document.getElementById('chart-area').getContext('2d');
+			window.myPie = new Chart(ctx, config);
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-        window.myPie.update();
-    });
+			window.myPie.update();
+		});
 
-    var colorNames = Object.keys(window.chartColors);
-    document.getElementById('addDataset').addEventListener('click', function() {
-        var newDataset = {
-            backgroundColor: [],
-            data: [],
-            label: 'New dataset ' + config.data.datasets.length,
-        };
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var newDataset = {
+				backgroundColor: [],
+				data: [],
+				label: 'New dataset ' + config.data.datasets.length,
+			};
 
-        for (var index = 0; index < config.data.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
 
-            var colorName = colorNames[index % colorNames.length];;
-            var newColor = window.chartColors[colorName];
-            newDataset.backgroundColor.push(newColor);
-        }
+				var colorName = colorNames[index % colorNames.length];
+				var newColor = window.chartColors[colorName];
+				newDataset.backgroundColor.push(newColor);
+			}
 
-        config.data.datasets.push(newDataset);
-        window.myPie.update();
-    });
+			config.data.datasets.push(newDataset);
+			window.myPie.update();
+		});
 
-    document.getElementById('removeDataset').addEventListener('click', function() {
-        config.data.datasets.splice(0, 1);
-        window.myPie.update();
-    });
-    </script>
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myPie.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/polar-area.html

@@ -2,116 +2,116 @@
 <html>
 
 <head>
-    <title>Polar Area Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Polar Area Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div id="canvas-holder" style="width:50%">
-        <canvas id="chart-area"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <button id="addData">Add Data</button>
-    <button id="removeData">Remove Data</button>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100);
-    };
+	<div id="canvas-holder" style="width:50%">
+		<canvas id="chart-area"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<button id="addData">Add Data</button>
+	<button id="removeData">Remove Data</button>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-    var chartColors = window.chartColors;
-    var color = Chart.helpers.color;
-    var config = {
-        data: {
-            datasets: [{
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                ],
-                backgroundColor: [
-                    color(chartColors.red).alpha(0.5).rgbString(),
-                    color(chartColors.orange).alpha(0.5).rgbString(),
-                    color(chartColors.yellow).alpha(0.5).rgbString(),
-                    color(chartColors.green).alpha(0.5).rgbString(),
-                    color(chartColors.blue).alpha(0.5).rgbString(),
-                ],
-                label: 'My dataset' // for legend
-            }],
-            labels: [
-                "Red",
-                "Orange",
-                "Yellow",
-                "Green",
-                "Blue"
-            ]
-        },
-        options: {
-            responsive: true,
-            legend: {
-                position: 'right',
-            },
-            title: {
-                display: true,
-                text: 'Chart.js Polar Area Chart'
-            },
-            scale: {
-              ticks: {
-                beginAtZero: true
-              },
-              reverse: false
-            },
-            animation: {
-                animateRotate: false,
-                animateScale: true
-            }
-        }
-    };
+		var chartColors = window.chartColors;
+		var color = Chart.helpers.color;
+		var config = {
+			data: {
+				datasets: [{
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+					],
+					backgroundColor: [
+						color(chartColors.red).alpha(0.5).rgbString(),
+						color(chartColors.orange).alpha(0.5).rgbString(),
+						color(chartColors.yellow).alpha(0.5).rgbString(),
+						color(chartColors.green).alpha(0.5).rgbString(),
+						color(chartColors.blue).alpha(0.5).rgbString(),
+					],
+					label: 'My dataset' // for legend
+				}],
+				labels: [
+					'Red',
+					'Orange',
+					'Yellow',
+					'Green',
+					'Blue'
+				]
+			},
+			options: {
+				responsive: true,
+				legend: {
+					position: 'right',
+				},
+				title: {
+					display: true,
+					text: 'Chart.js Polar Area Chart'
+				},
+				scale: {
+					ticks: {
+						beginAtZero: true
+					},
+					reverse: false
+				},
+				animation: {
+					animateRotate: false,
+					animateScale: true
+				}
+			}
+		};
 
-    window.onload = function() {
-        var ctx = document.getElementById("chart-area");
-        window.myPolarArea = Chart.PolarArea(ctx, config);
-    };
+		window.onload = function() {
+			var ctx = document.getElementById('chart-area');
+			window.myPolarArea = Chart.PolarArea(ctx, config);
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(piece, i) {
-            piece.data.forEach(function(value, j) {
-                config.data.datasets[i].data[j] = randomScalingFactor();
-            });
-        });
-        window.myPolarArea.update();
-    });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(piece, i) {
+				piece.data.forEach(function(value, j) {
+					config.data.datasets[i].data[j] = randomScalingFactor();
+				});
+			});
+			window.myPolarArea.update();
+		});
 
-    var colorNames = Object.keys(window.chartColors);
-    document.getElementById('addData').addEventListener('click', function() {
-        if (config.data.datasets.length > 0) {
-            config.data.labels.push('data #' + config.data.labels.length);
-            config.data.datasets.forEach(function(dataset) {
-                var colorName = colorNames[config.data.labels.length % colorNames.length];
-                dataset.backgroundColor.push(window.chartColors[colorName]);
-                dataset.data.push(randomScalingFactor());
-            });
-            window.myPolarArea.update();
-        }
-    });
-    document.getElementById('removeData').addEventListener('click', function() {
-        config.data.labels.pop(); // remove the label first
-        config.data.datasets.forEach(function(dataset) {
-            dataset.backgroundColor.pop();
-            dataset.data.pop();
-        });
-        window.myPolarArea.update();
-    });
-    </script>
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				config.data.labels.push('data #' + config.data.labels.length);
+				config.data.datasets.forEach(function(dataset) {
+					var colorName = colorNames[config.data.labels.length % colorNames.length];
+					dataset.backgroundColor.push(window.chartColors[colorName]);
+					dataset.data.push(randomScalingFactor());
+				});
+				window.myPolarArea.update();
+			}
+		});
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.pop(); // remove the label first
+			config.data.datasets.forEach(function(dataset) {
+				dataset.backgroundColor.pop();
+				dataset.data.pop();
+			});
+			window.myPolarArea.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/radar-skip-points.html

@@ -2,108 +2,108 @@
 <html>
 
 <head>
-    <title>Radar Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Radar Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width:40%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100);
-    };
+	<div style="width:40%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-    var color = Chart.helpers.color;
-    var config = {
-        type: 'radar',
-        data: {
-            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
-            datasets: [{
-                label: "Skip first dataset",
-                borderColor: window.chartColors.red,
-                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
-                pointBackgroundColor: window.chartColors.red,
-                data: [
-                    NaN, 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor()
-                ]
-            }, {
-                label: "Skip mid dataset",
-                borderColor: window.chartColors.blue,
-                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
-                pointBackgroundColor: window.chartColors.blue,
-                data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    NaN, 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor()
-                ]
-            },{
-                label: "Skip last dataset",
-                borderColor: window.chartColors.green,
-                backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
-                pointBackgroundColor: window.chartColors.green,
-                data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(),
-                    NaN
-                ]
-            }]
-        },
-        options: {
-            title:{
-                display:true,
-                text:"Chart.js Radar Chart - Skip Points"
-            },
-            elements: {
-                line: {
-                    tension: 0.0,
-                }
-            },
-            scale: {
-                beginAtZero: true,
-            }
-        }
-    };
+		var color = Chart.helpers.color;
+		var config = {
+			type: 'radar',
+			data: {
+				labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+				datasets: [{
+					label: 'Skip first dataset',
+					borderColor: window.chartColors.red,
+					backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+					pointBackgroundColor: window.chartColors.red,
+					data: [
+						NaN,
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'Skip mid dataset',
+					borderColor: window.chartColors.blue,
+					backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+					pointBackgroundColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						NaN,
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'Skip last dataset',
+					borderColor: window.chartColors.green,
+					backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
+					pointBackgroundColor: window.chartColors.green,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						NaN
+					]
+				}]
+			},
+			options: {
+				title: {
+					display: true,
+					text: 'Chart.js Radar Chart - Skip Points'
+				},
+				elements: {
+					line: {
+						tension: 0.0,
+					}
+				},
+				scale: {
+					beginAtZero: true,
+				}
+			}
+		};
 
-    window.onload = function() {
-        window.myRadar = new Chart(document.getElementById("canvas"), config);
-    };
+		window.onload = function() {
+			window.myRadar = new Chart(document.getElementById('canvas'), config);
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
 
-        });
+			});
 
-        window.myRadar.update();
-    });
-    </script>
+			window.myRadar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/radar.html

@@ -2,145 +2,145 @@
 <html>
 
 <head>
-    <title>Radar Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Radar Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width:40%">
-        <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>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.round(Math.random() * 100);
-    };
+	<div style="width:40%">
+		<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>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-    var color = Chart.helpers.color;
-    var config = {
-        type: 'radar',
-        data: {
-            labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
-            datasets: [{
-                label: "My First dataset",
-                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
-                borderColor: window.chartColors.red,
-                pointBackgroundColor: window.chartColors.red,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            }, {
-                label: "My Second dataset",
-                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
-                borderColor: window.chartColors.blue,
-                pointBackgroundColor: window.chartColors.blue,
-                data: [
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor(),
-                    randomScalingFactor()
-                ]
-            },]
-        },
-        options: {
-            legend: {
-                position: 'top',
-            },
-            title: {
-                display: true,
-                text: 'Chart.js Radar Chart'
-            },
-            scale: {
-              ticks: {
-                beginAtZero: true
-              }
-            }
-        }
-    };
+		var color = Chart.helpers.color;
+		var config = {
+			type: 'radar',
+			data: {
+				labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+					borderColor: window.chartColors.red,
+					pointBackgroundColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'My Second dataset',
+					backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+					borderColor: window.chartColors.blue,
+					pointBackgroundColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}]
+			},
+			options: {
+				legend: {
+					position: 'top',
+				},
+				title: {
+					display: true,
+					text: 'Chart.js Radar Chart'
+				},
+				scale: {
+					ticks: {
+						beginAtZero: true
+					}
+				}
+			}
+		};
 
-    window.onload = function() {
-        window.myRadar = new Chart(document.getElementById("canvas"), config);
-    };
+		window.onload = function() {
+			window.myRadar = new Chart(document.getElementById('canvas'), config);
+		};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-        window.myRadar.update();
-    });
+			window.myRadar.update();
+		});
 
-    var colorNames = Object.keys(window.chartColors);
-    document.getElementById('addDataset').addEventListener('click', function() {
-        var colorName = colorNames[config.data.datasets.length % colorNames.length];;
-        var newColor = window.chartColors[colorName];
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[config.data.datasets.length % colorNames.length];
+			var newColor = window.chartColors[colorName];
 
-        var newDataset = {
-            label: 'Dataset ' + config.data.datasets.length,
-            borderColor: newColor,
-            backgroundColor: color(newColor).alpha(0.2).rgbString(),
-            pointBorderColor: newColor,
-            data: [],
-        };
+			var newDataset = {
+				label: 'Dataset ' + config.data.datasets.length,
+				borderColor: newColor,
+				backgroundColor: color(newColor).alpha(0.2).rgbString(),
+				pointBorderColor: newColor,
+				data: [],
+			};
 
-        for (var index = 0; index < config.data.labels.length; ++index) {
-            newDataset.data.push(randomScalingFactor());
-        }
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
 
-        config.data.datasets.push(newDataset);
-        window.myRadar.update();
-    });
+			config.data.datasets.push(newDataset);
+			window.myRadar.update();
+		});
 
-    document.getElementById('addData').addEventListener('click', function() {
-        if (config.data.datasets.length > 0) {
-            config.data.labels.push('dataset #' + config.data.labels.length);
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				config.data.labels.push('dataset #' + config.data.labels.length);
 
-            config.data.datasets.forEach(function (dataset) {
-                dataset.data.push(randomScalingFactor());
-            });
+				config.data.datasets.forEach(function(dataset) {
+					dataset.data.push(randomScalingFactor());
+				});
 
-            window.myRadar.update();
-        }
-    });
+				window.myRadar.update();
+			}
+		});
 
-    document.getElementById('removeDataset').addEventListener('click', function() {
-        config.data.datasets.splice(0, 1);
-        window.myRadar.update();
-    });
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myRadar.update();
+		});
 
-    document.getElementById('removeData').addEventListener('click', function() {
-        config.data.labels.pop(); // remove the label first
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.pop(); // remove the label first
 
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data.pop();
-        });
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-        window.myRadar.update();
-    });
-    </script>
+			window.myRadar.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/scatter/basic.html

@@ -2,106 +2,106 @@
 <html>
 
 <head>
-    <title>Scatter Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Scatter Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-        var color = Chart.helpers.color;
-        var scatterChartData = {
-            datasets: [{
-                label: "My First dataset",
-                borderColor: window.chartColors.red,
-                backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }]
-            }, {
-                label: "My Second dataset",
-                borderColor: window.chartColors.blue,
-                backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
-                data: [{
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }, {
-                    x: randomScalingFactor(),
-                    y: randomScalingFactor(),
-                }]
-            }]
-        };
+	<div style="width:75%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+		var color = Chart.helpers.color;
+		var scatterChartData = {
+			datasets: [{
+				label: 'My First dataset',
+				borderColor: window.chartColors.red,
+				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+				data: [{
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}]
+			}, {
+				label: 'My Second dataset',
+				borderColor: window.chartColors.blue,
+				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+				data: [{
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}, {
+					x: randomScalingFactor(),
+					y: randomScalingFactor(),
+				}]
+			}]
+		};
 
-        window.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'
-                    },
-                }
-            });
-        };
+		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'
+					},
+				}
+			});
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            scatterChartData.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return {
-                        x: randomScalingFactor(),
-                        y: randomScalingFactor()
-                    };
-                });
-            });
-            window.myScatter.update();
-        });
-    </script>
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			scatterChartData.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return {
+						x: randomScalingFactor(),
+						y: randomScalingFactor()
+					};
+				});
+			});
+			window.myScatter.update();
+		});
+	</script>
 </body>
 
 </html>

samples/charts/scatter/multi-axis.html

@@ -23,9 +23,9 @@
 	var color = Chart.helpers.color;
 	var scatterChartData = {
 		datasets: [{
-			label: "My First dataset",
-			xAxisID: "x-axis-1",
-			yAxisID: "y-axis-1",
+			label: 'My First dataset',
+			xAxisID: 'x-axis-1',
+			yAxisID: 'y-axis-1',
 			borderColor: window.chartColors.red,
 			backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 			data: [{
@@ -51,9 +51,9 @@
 				y: randomScalingFactor(),
 			}]
 		}, {
-			label: "My Second dataset",
-			xAxisID: "x-axis-1",
-			yAxisID: "y-axis-2",
+			label: 'My Second dataset',
+			xAxisID: 'x-axis-1',
+			yAxisID: 'y-axis-2',
 			borderColor: window.chartColors.blue,
 			backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 			data: [{
@@ -82,7 +82,7 @@
 	};
 
 	window.onload = function() {
-		var ctx = document.getElementById("canvas").getContext("2d");
+		var ctx = document.getElementById('canvas').getContext('2d');
 		window.myScatter = Chart.Scatter(ctx, {
 			data: scatterChartData,
 			options: {
@@ -95,22 +95,22 @@
 				},
 				scales: {
 					xAxes: [{
-						position: "bottom",
+						position: 'bottom',
 						gridLines: {
-							zeroLineColor: "rgba(0,0,0,1)"
+							zeroLineColor: 'rgba(0,0,0,1)'
 						}
 					}],
 					yAxes: [{
-						type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+						type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 						display: true,
-						position: "left",
-						id: "y-axis-1",
+						position: 'left',
+						id: 'y-axis-1',
 					}, {
-						type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+						type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
 						display: true,
-						position: "right",
+						position: 'right',
 						reverse: true,
-						id: "y-axis-2",
+						id: 'y-axis-2',
 
 						// grid line settings
 						gridLines: {

samples/index.html

@@ -47,8 +47,8 @@
 			var category = createCategory(item);
 			var children = category.getElementsByClassName('items')[0];
 
-			(item.items || []).forEach(function(item) {
-				children.appendChild(createEntry(item));
+			(item.items || []).forEach(function(item2) {
+				children.appendChild(createEntry(item2));
 			});
 
 			categories.appendChild(category);

samples/legend/point-style.html

@@ -2,115 +2,115 @@
 <html>
 
 <head>
-    <title>Legend Point Style</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-        canvas {
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-        }
-        .chart-container {
-            width: 500px;
-            margin-left: 40px;
-            margin-right: 40px;
-        }
-        .container {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-    </style>
+	<title>Legend Point Style</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+		.chart-container {
+			width: 500px;
+			margin-left: 40px;
+			margin-right: 40px;
+		}
+		.container {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+	</style>
 </head>
 
 <body>
-    <div class="container">
-        <div class="chart-container">
-            <canvas id="chart-legend-normal"></canvas>
-        </div>
-        <div class="chart-container">
-            <canvas id="chart-legend-pointstyle"></canvas>
-        </div>
-    </div>
-    <script>
-        var color = Chart.helpers.color;
-        function createConfig(colorName) {
-            return {
-                type: 'line',
-                data: {
-                    labels: ["January", "February", "March", "April", "May", "June", "July"],
-                    datasets: [{
-                        label: "My First dataset",
-                        data: [
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor()
-                        ],
-                        backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
-                        borderColor: window.chartColors[colorName],
-                        borderWidth: 1,
-                        pointStyle: 'rectRot',
-                        pointRadius: 5,
-                        pointBorderColor: 'rgb(0, 0, 0)'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    legend: {
-                        labels: {
-                            usePointStyle: false
-                        }
-                    },
-                    scales: {
-                        xAxes: [{
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Month'
-                            }
-                        }],
-                        yAxes: [{
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Value'
-                            }
-                        }]
-                    },
-                    title: {
-                        display: true,
-                        text: 'Normal Legend'
-                    }
-                }
-            };
-        }
+	<div class="container">
+		<div class="chart-container">
+			<canvas id="chart-legend-normal"></canvas>
+		</div>
+		<div class="chart-container">
+			<canvas id="chart-legend-pointstyle"></canvas>
+		</div>
+	</div>
+	<script>
+		var color = Chart.helpers.color;
+		function createConfig(colorName) {
+			return {
+				type: 'line',
+				data: {
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+					datasets: [{
+						label: 'My First dataset',
+						data: [
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor()
+						],
+						backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+						borderColor: window.chartColors[colorName],
+						borderWidth: 1,
+						pointStyle: 'rectRot',
+						pointRadius: 5,
+						pointBorderColor: 'rgb(0, 0, 0)'
+					}]
+				},
+				options: {
+					responsive: true,
+					legend: {
+						labels: {
+							usePointStyle: false
+						}
+					},
+					scales: {
+						xAxes: [{
+							display: true,
+							scaleLabel: {
+								display: true,
+								labelString: 'Month'
+							}
+						}],
+						yAxes: [{
+							display: true,
+							scaleLabel: {
+								display: true,
+								labelString: 'Value'
+							}
+						}]
+					},
+					title: {
+						display: true,
+						text: 'Normal Legend'
+					}
+				}
+			};
+		}
 
-        function createPointStyleConfig(colorName) {
-            var config = createConfig(colorName);
-            config.options.legend.labels.usePointStyle = true;
-            config.options.title.text = 'Point Style Legend';
-            return config;
-        }
+		function createPointStyleConfig(colorName) {
+			var config = createConfig(colorName);
+			config.options.legend.labels.usePointStyle = true;
+			config.options.title.text = 'Point Style Legend';
+			return config;
+		}
 
-        window.onload = function() {
-            [{
-                id: 'chart-legend-normal',
-                config: createConfig('red')
-            }, {
-                id: 'chart-legend-pointstyle',
-                config: createPointStyleConfig('blue')
-            }].forEach(function(details) {
-                var ctx = document.getElementById(details.id).getContext('2d');
-                new Chart(ctx, details.config)
-            })
-        };
-    </script>
+		window.onload = function() {
+			[{
+				id: 'chart-legend-normal',
+				config: createConfig('red')
+			}, {
+				id: 'chart-legend-pointstyle',
+				config: createPointStyleConfig('blue')
+			}].forEach(function(details) {
+				var ctx = document.getElementById(details.id).getContext('2d');
+				new Chart(ctx, details.config);
+			});
+		};
+	</script>
 </body>
 
 </html>

samples/legend/positioning.html

@@ -2,120 +2,120 @@
 <html>
 
 <head>
-    <title>Legend Positions</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-        canvas {
-            -moz-user-select: none;
-            -webkit-user-select: none;
-            -ms-user-select: none;
-        }
-        .chart-container {
-            width: 500px;
-            margin-left: 40px;
-            margin-right: 40px;
-        }
-        .container {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-    </style>
+	<title>Legend Positions</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+		.chart-container {
+			width: 500px;
+			margin-left: 40px;
+			margin-right: 40px;
+		}
+		.container {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+	</style>
 </head>
 
 <body>
-    <div class="container">
-        <div class="chart-container">
-            <canvas id="chart-legend-top"></canvas>
-        </div>
-        <div class="chart-container">
-            <canvas id="chart-legend-right"></canvas>
-        </div>
-        <div class="chart-container">
-            <canvas id="chart-legend-bottom"></canvas>
-        </div>
-        <div class="chart-container">
-            <canvas id="chart-legend-left"></canvas>
-        </div>
-    </div>
-    <script>
-        var color = Chart.helpers.color;
-        function createConfig(legendPosition, colorName) {
-            return {
-                type: 'line',
-                data: {
-                    labels: ["January", "February", "March", "April", "May", "June", "July"],
-                    datasets: [{
-                        label: "My First dataset",
-                        data: [
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor(), 
-                            randomScalingFactor()
-                        ],
-                        backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
-                        borderColor: window.chartColors[colorName],
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    legend: {
-                        position: legendPosition,
-                    },
-                    scales: {
-                        xAxes: [{
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Month'
-                            }
-                        }],
-                        yAxes: [{
-                            display: true,
-                            scaleLabel: {
-                                display: true,
-                                labelString: 'Value'
-                            }
-                        }]
-                    },
-                    title: {
-                        display: true,
-                        text: 'Legend Position: ' + legendPosition
-                    }
-                }
-            };
-        }
+	<div class="container">
+		<div class="chart-container">
+			<canvas id="chart-legend-top"></canvas>
+		</div>
+		<div class="chart-container">
+			<canvas id="chart-legend-right"></canvas>
+		</div>
+		<div class="chart-container">
+			<canvas id="chart-legend-bottom"></canvas>
+		</div>
+		<div class="chart-container">
+			<canvas id="chart-legend-left"></canvas>
+		</div>
+	</div>
+	<script>
+		var color = Chart.helpers.color;
+		function createConfig(legendPosition, colorName) {
+			return {
+				type: 'line',
+				data: {
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+					datasets: [{
+						label: 'My First dataset',
+						data: [
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor(),
+							randomScalingFactor()
+						],
+						backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+						borderColor: window.chartColors[colorName],
+						borderWidth: 1
+					}]
+				},
+				options: {
+					responsive: true,
+					legend: {
+						position: legendPosition,
+					},
+					scales: {
+						xAxes: [{
+							display: true,
+							scaleLabel: {
+								display: true,
+								labelString: 'Month'
+							}
+						}],
+						yAxes: [{
+							display: true,
+							scaleLabel: {
+								display: true,
+								labelString: 'Value'
+							}
+						}]
+					},
+					title: {
+						display: true,
+						text: 'Legend Position: ' + legendPosition
+					}
+				}
+			};
+		}
 
-        window.onload = function() {
-            [{
-                id: 'chart-legend-top',
-                legendPosition: 'top',
-                color: 'red'
-            }, {
-                id: 'chart-legend-right',
-                legendPosition: 'right',
-                color: 'blue'
-            }, {
-                id: 'chart-legend-bottom',
-                legendPosition: 'bottom',
-                color: 'green'
-            }, {
-                id: 'chart-legend-left',
-                legendPosition: 'left',
-                color: 'yellow'
-            }].forEach(function(details) {
-                var ctx = document.getElementById(details.id).getContext('2d');
-                var config = createConfig(details.legendPosition, details.color);
-                new Chart(ctx, config)
-            })
-        };
-    </script>
+		window.onload = function() {
+			[{
+				id: 'chart-legend-top',
+				legendPosition: 'top',
+				color: 'red'
+			}, {
+				id: 'chart-legend-right',
+				legendPosition: 'right',
+				color: 'blue'
+			}, {
+				id: 'chart-legend-bottom',
+				legendPosition: 'bottom',
+				color: 'green'
+			}, {
+				id: 'chart-legend-left',
+				legendPosition: 'left',
+				color: 'yellow'
+			}].forEach(function(details) {
+				var ctx = document.getElementById(details.id).getContext('2d');
+				var config = createConfig(details.legendPosition, details.color);
+				new Chart(ctx, config);
+			});
+		};
+	</script>
 </body>
 
 </html>

samples/samples.js

@@ -136,6 +136,9 @@
 		}, {
 			title: 'Non numeric Y Axis',
 			path: 'scales/non-numeric-y.html'
+		}, {
+			title: 'Toggle Scale Type',
+			path: 'scales/toggle-scale-type.html'
 		}]
 	}, {
 		title: 'Legend',

samples/scales/filtering-labels.html

@@ -2,92 +2,90 @@
 <html>
 
 <head>
-    <title>Chart with xAxis Filtering</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Chart with xAxis Filtering</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
+		};
 
-        var randomScalingFactor = function() {
-            return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
-        };
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					fill: false,
+					borderColor: window.chartColors.red,
+					backgroundColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					borderColor: window.chartColors.blue,
+					backgroundColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - X-Axis Filter'
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						ticks: {
+							callback: function(dataLabel, index) {
+								// Hide the label of every 2nd dataset. return null to hide the grid line too
+								return index % 2 === 0 ? dataLabel : '';
+							}
+						}
+					}],
+					yAxes: [{
+						display: true,
+						beginAtZero: false
+					}]
+				}
+			}
+		};
 
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    fill: false,
-                    borderColor: window.chartColors.red,
-                    backgroundColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ]
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    borderColor: window.chartColors.blue,
-                    backgroundColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ]
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:"Chart.js Line Chart - X-Axis Filter"
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        ticks: {
-                            callback: function(dataLabel, index) {
-                                // Hide the label of every 2nd dataset. return null to hide the grid line too
-                                return index % 2 === 0 ? dataLabel : '';
-                            }
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        beginAtZero: false
-                    }]
-                }
-            }
-        };
-
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/gridlines-display.html

@@ -2,123 +2,123 @@
 <html>
 
 <head>
-    <title>Suggested Min/Max Settings</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    .chart-container {
-        width: 500px;
-        margin-left: 40px;
-        margin-right: 40px;
-        margin-bottom: 40px;
-    }
-    .container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    </style>
+	<title>Grid Lines Display Settings</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+		canvas{
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+		.chart-container {
+			width: 500px;
+			margin-left: 40px;
+			margin-right: 40px;
+			margin-bottom: 40px;
+		}
+		.container {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+	</style>
 </head>
 
 <body>
-    <div class="container"></div>
-    <script>
-        function createConfig(gridlines, title) {
-            return {
-                type: 'line',
-                data: {
-                    labels: ["January", "February", "March", "April", "May", "June", "July"],
-                    datasets: [{
-                        label: "My First dataset",
-                        backgroundColor: window.chartColors.red,
-                        borderColor: window.chartColors.red,
-                        data: [10, 30, 39, 20, 25, 34, 0],
-                        fill: false,
-                    }, {
-                        label: "My Second dataset",
-                        fill: false,
-                        backgroundColor: window.chartColors.blue,
-                        borderColor: window.chartColors.blue,
-                        data: [18, 33, 22, 19, 11, 39, 30],
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    title:{
-                        display: true,
-                        text: title
-                    },
-                    scales: {
-                        xAxes: [{
-                            gridLines: gridlines
-                        }],
-                        yAxes: [{
-                            gridLines: gridlines,
-                            ticks: {
-                                min: 0,
-                                max: 100,
-                                stepSize: 10
-                            }
-                        }]
-                    }
-                }
-            };
-        }
+	<div class="container"></div>
+	<script>
+		function createConfig(gridlines, title) {
+			return {
+				type: 'line',
+				data: {
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+					datasets: [{
+						label: 'My First dataset',
+						backgroundColor: window.chartColors.red,
+						borderColor: window.chartColors.red,
+						data: [10, 30, 39, 20, 25, 34, 0],
+						fill: false,
+					}, {
+						label: 'My Second dataset',
+						fill: false,
+						backgroundColor: window.chartColors.blue,
+						borderColor: window.chartColors.blue,
+						data: [18, 33, 22, 19, 11, 39, 30],
+					}]
+				},
+				options: {
+					responsive: true,
+					title: {
+						display: true,
+						text: title
+					},
+					scales: {
+						xAxes: [{
+							gridLines: gridlines
+						}],
+						yAxes: [{
+							gridLines: gridlines,
+							ticks: {
+								min: 0,
+								max: 100,
+								stepSize: 10
+							}
+						}]
+					}
+				}
+			};
+		}
 
-        window.onload = function() {
-            var container = document.querySelector('.container');
+		window.onload = function() {
+			var container = document.querySelector('.container');
 
-            [{
-                title: 'Display: true',
-                gridLines: {
-                    display: true
-                }
-            }, {
-                title: 'Display: false',
-                gridLines: {
-                    display: false
-                }
-            }, {
-                title: 'Display: false, no border',
-                gridLines: {
-                    display: false,
-                    drawBorder: false
-                }
-            }, {
-                title: 'DrawOnChartArea: false',
-                gridLines: {
-                    display: true,
-                    drawBorder: true,
-                    drawOnChartArea: false,
-                }
-            }, {
-                title: 'DrawTicks: false',
-                gridLines: {
-                    display: true,
-                    drawBorder: true,
-                    drawOnChartArea: true,
-                    drawTicks: false,
-                }
-            }].forEach(function(details) {
-                var div = document.createElement('div');
-                div.classList.add('chart-container');
+			[{
+				title: 'Display: true',
+				gridLines: {
+					display: true
+				}
+			}, {
+				title: 'Display: false',
+				gridLines: {
+					display: false
+				}
+			}, {
+				title: 'Display: false, no border',
+				gridLines: {
+					display: false,
+					drawBorder: false
+				}
+			}, {
+				title: 'DrawOnChartArea: false',
+				gridLines: {
+					display: true,
+					drawBorder: true,
+					drawOnChartArea: false,
+				}
+			}, {
+				title: 'DrawTicks: false',
+				gridLines: {
+					display: true,
+					drawBorder: true,
+					drawOnChartArea: true,
+					drawTicks: false,
+				}
+			}].forEach(function(details) {
+				var div = document.createElement('div');
+				div.classList.add('chart-container');
 
-                var canvas = document.createElement('canvas');
-                div.appendChild(canvas);
-                container.appendChild(div);
+				var canvas = document.createElement('canvas');
+				div.appendChild(canvas);
+				container.appendChild(div);
 
-                var ctx = canvas.getContext('2d');
-                var config = createConfig(details.gridLines, details.title);
-                new Chart(ctx, config);
-            });
-        };
-    </script>
+				var ctx = canvas.getContext('2d');
+				var config = createConfig(details.gridLines, details.title);
+				new Chart(ctx, config);
+			});
+		};
+	</script>
 </body>
 
 </html>

samples/scales/gridlines-style.html

@@ -2,68 +2,68 @@
 <html>
 
 <head>
-    <title>Suggested Min/Max Settings</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Grid Lines Style Settings</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [10, 30, 39, 20, 25, 34, -10],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [18, 33, 22, 19, 11, 39, 30],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display: true,
-                    text: 'Grid Line Settings'
-                },
-                scales: {
-                    yAxes: [{
-                        gridLines: {
-                            drawBorder: false,
-                            color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
-                        },
-                        ticks: {
-                            min: 0,
-                            max: 100,
-                            stepSize: 10
-                        }
-                    }]
-                }
-            }
-        };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [10, 30, 39, 20, 25, 34, -10],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [18, 33, 22, 19, 11, 39, 30],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Grid Line Settings'
+				},
+				scales: {
+					yAxes: [{
+						gridLines: {
+							drawBorder: false,
+							color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
+						},
+						ticks: {
+							min: 0,
+							max: 100,
+							stepSize: 10
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/linear/min-max-suggested.html

@@ -2,66 +2,66 @@
 <html>
 
 <head>
-    <title>Suggested Min/Max Settings</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Suggested Min/Max Settings</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [10, 30, 39, 20, 25, 34, -10],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [18, 33, 22, 19, 11, 39, 30],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Min and Max Settings'
-                },
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
-                            suggestedMin: 10,
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [10, 30, 39, 20, 25, 34, -10],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [18, 33, 22, 19, 11, 39, 30],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Min and Max Settings'
+				},
+				scales: {
+					yAxes: [{
+						ticks: {
+							// the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
+							suggestedMin: 10,
 
-                            // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
-                            suggestedMax: 50
-                        }
-                    }]
-                }
-            }
-        };
+							// the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
+							suggestedMax: 50
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/linear/min-max.html

@@ -2,63 +2,63 @@
 <html>
 
 <head>
-    <title>Min/Max Settings</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Min/Max Settings</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+		canvas{
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [10, 30, 50, 20, 25, 44, -10],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [100, 33, 22, 19, 11, 49, 30],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Min and Max Settings'
-                },
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            min: 10,
-                            max: 50
-                        }
-                    }]
-                }
-            }
-        };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [10, 30, 50, 20, 25, 44, -10],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [100, 33, 22, 19, 11, 49, 30],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Min and Max Settings'
+				},
+				scales: {
+					yAxes: [{
+						ticks: {
+							min: 10,
+							max: 50
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/linear/step-size.html

@@ -2,174 +2,174 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <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>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        
-        var randomScalingFactor = function() {
-            return Math.round(Math.random() * 100);
-        };
+	<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>
+	<script>
+		var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart.js Line Chart'
-                },
-                tooltips: {
-                    mode: 'index',
-                    intersect: false,
-                },
-                hover: {
-                    mode: 'nearest',
-                    intersect: true
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Value'
-                        },
-                        ticks: {
-                            min: 0,
-                            max: 100,
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-                            // forces step size to be 5 units
-                            stepSize: 5
-                        }
-                    }]
-                }
-            }
-        };
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart'
+				},
+				tooltips: {
+					mode: 'index',
+					intersect: false,
+				},
+				hover: {
+					mode: 'nearest',
+					intersect: true
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Value'
+						},
+						ticks: {
+							min: 0,
+							max: 100,
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
+							// forces step size to be 5 units
+							stepSize: 5
+						}
+					}]
+				}
+			}
+		};
 
-        document.getElementById('randomizeData').addEventListener('click', function() {
-            config.data.datasets.forEach(function(dataset) {
-                dataset.data = dataset.data.map(function() {
-                    return randomScalingFactor();
-                });
-            });
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
 
-            window.myLine.update();
-        });
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
 
-        var colorNames = Object.keys(window.chartColors);
-        document.getElementById('addDataset').addEventListener('click', function() {
-            var colorName = colorNames[config.data.datasets.length % colorNames.length];
-            var newColor = window.chartColors[colorName];
-            var newDataset = {
-                label: 'Dataset ' + config.data.datasets.length,
-                backgroundColor: newColor,
-                borderColor: newColor,
-                data: [],
-                fill: false
-            };
+			window.myLine.update();
+		});
 
-            for (var index = 0; index < config.data.labels.length; ++index) {
-                newDataset.data.push(randomScalingFactor());
-            }
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[config.data.datasets.length % colorNames.length];
+			var newColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + config.data.datasets.length,
+				backgroundColor: newColor,
+				borderColor: newColor,
+				data: [],
+				fill: false
+			};
 
-            config.data.datasets.push(newDataset);
-            window.myLine.update();
-        });
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
 
-        document.getElementById('addData').addEventListener('click', function() {
-            if (config.data.datasets.length > 0) {
-                var month = MONTHS[config.data.labels.length % MONTHS.length];
-                config.data.labels.push(month);
+			config.data.datasets.push(newDataset);
+			window.myLine.update();
+		});
 
-                config.data.datasets.forEach(function(dataset) {
-                    dataset.data.push(randomScalingFactor());
-                });
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				var month = MONTHS[config.data.labels.length % MONTHS.length];
+				config.data.labels.push(month);
 
-                window.myLine.update();
-            }
-        });
+				config.data.datasets.forEach(function(dataset) {
+					dataset.data.push(randomScalingFactor());
+				});
 
-        document.getElementById('removeDataset').addEventListener('click', function() {
-            config.data.datasets.splice(0, 1);
-            window.myLine.update();
-        });
+				window.myLine.update();
+			}
+		});
 
-        document.getElementById('removeData').addEventListener('click', function() {
-            config.data.labels.splice(-1, 1); // remove the label first
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myLine.update();
+		});
 
-            config.data.datasets.forEach(function(dataset, datasetIndex) {
-                dataset.data.pop();
-            });
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.splice(-1, 1); // remove the label first
 
-            window.myLine.update();
-        });
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data.pop();
+			});
 
-    </script>
+			window.myLine.update();
+		});
+
+	</script>
 </body>
 
 </html>

samples/scales/logarithmic/line.html

@@ -2,96 +2,96 @@
 <html>
 
 <head>
-    <title>Logarithmic Line Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Logarithmic Line Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <button id="randomizeData">Randomize Data</button>
-    <script>
-    var randomScalingFactor = function() {
-        return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
-    };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="randomizeData">Randomize Data</button>
+	<script>
+	var randomScalingFactor = function() {
+		return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
+	};
 
-    var config = {
-        type: 'line',
-        data: {
-            labels: ["January", "February", "March", "April", "May", "June", "July"],
-            datasets: [{
-                label: "My First dataset",
-                backgroundColor: window.chartColors.red,
-                borderColor: window.chartColors.red,
-                fill: false,
-                data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor()
-                ],
-            }, {
-                label: "My Second dataset",
-                backgroundColor: window.chartColors.blue,
-                borderColor: window.chartColors.blue,
-                fill: false,
-                data: [
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor(), 
-                    randomScalingFactor()
-                ],
-            }]
-        },
-        options: {
-            responsive: true,
-            title:{
-                display:true,
-                text:'Chart.js Line Chart - Logarithmic'
-            },
-            scales: {
-                xAxes: [{
-                    display: true,
-                }],
-                yAxes: [{
-                    display: true,
-                    type: 'logarithmic',
-                }]
-            }
-        }
-    };
+	var config = {
+		type: 'line',
+		data: {
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+			datasets: [{
+				label: 'My First dataset',
+				backgroundColor: window.chartColors.red,
+				borderColor: window.chartColors.red,
+				fill: false,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				],
+			}, {
+				label: 'My Second dataset',
+				backgroundColor: window.chartColors.blue,
+				borderColor: window.chartColors.blue,
+				fill: false,
+				data: [
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor()
+				],
+			}]
+		},
+		options: {
+			responsive: true,
+			title: {
+				display: true,
+				text: 'Chart.js Line Chart - Logarithmic'
+			},
+			scales: {
+				xAxes: [{
+					display: true,
+				}],
+				yAxes: [{
+					display: true,
+					type: 'logarithmic',
+				}]
+			}
+		}
+	};
 
-    window.onload = function() {
-        var ctx = document.getElementById("canvas").getContext("2d");
-        window.myLine = new Chart(ctx, config);
-    };
+	window.onload = function() {
+		var ctx = document.getElementById('canvas').getContext('2d');
+		window.myLine = new Chart(ctx, config);
+	};
 
-    document.getElementById('randomizeData').addEventListener('click', function() {
-        config.data.datasets.forEach(function(dataset) {
-            dataset.data = dataset.data.map(function() {
-                return randomScalingFactor();
-            });
+	document.getElementById('randomizeData').addEventListener('click', function() {
+		config.data.datasets.forEach(function(dataset) {
+			dataset.data = dataset.data.map(function() {
+				return randomScalingFactor();
+			});
 
-        });
+		});
 
-        window.myLine.update();
-    });
-    </script>
+		window.myLine.update();
+	});
+	</script>
 </body>
 
 </html>

samples/scales/logarithmic/scatter.html

@@ -2,29 +2,29 @@
 <html>
 
 <head>
-    <title>Scatter Chart</title>
-    <script src="../../../dist/Chart.bundle.js"></script>
-    <script src="../../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Scatter Chart</title>
+	<script src="../../../dist/Chart.bundle.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-    var color = Chart.helpers.color;
-    var scatterChartData = {
-        datasets: [{
-        	borderColor: window.chartColors.red,
-        	backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
-            label: "V(node2)",
+	<div style="width:75%">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+	var color = Chart.helpers.color;
+	var scatterChartData = {
+		datasets: [{
+			borderColor: window.chartColors.red,
+			backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+			label: 'V(node2)',
 			data: [{
 				x: 1,
 				y: -1.711e-2,
@@ -118,54 +118,54 @@
 			}, {
 				x: 1000,
 				y: -3.596e1,
-			},]
-        }]
-    };
+			}]
+		}]
+	};
 
-    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 - Logarithmic X-Axis'
-	            },
-	            scales: {
-	            	xAxes: [{
-	            		type: 'logarithmic',
-	            		position: 'bottom',
-	            		ticks: {
-	            			userCallback: function(tick) {
-	            				var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
-	            				if (remain === 1 || remain === 2 || remain === 5) {
-	            					return tick.toString() + "Hz";
-	            				}
-	            				return '';
-	            			},
-	            		},
-	            		scaleLabel: {
-	            			labelString: 'Frequency',
-	            			display: true,
-	            		}
-	            	}],
-	            	yAxes: [{
-	            		type: 'linear',
-	            		ticks: {
-	            			userCallback: function(tick) {
-	            				return tick.toString() + "dB";
-	            			}
-	            		},
-	            		scaleLabel: {
-	            			labelString: 'Voltage',
-	            			display: true
-	            		}
-	            	}]
-	            }
-            }
-        });
-    };
-    </script>
+	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 - Logarithmic X-Axis'
+				},
+				scales: {
+					xAxes: [{
+						type: 'logarithmic',
+						position: 'bottom',
+						ticks: {
+							userCallback: function(tick) {
+								var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
+								if (remain === 1 || remain === 2 || remain === 5) {
+									return tick.toString() + 'Hz';
+								}
+								return '';
+							},
+						},
+						scaleLabel: {
+							labelString: 'Frequency',
+							display: true,
+						}
+					}],
+					yAxes: [{
+						type: 'linear',
+						ticks: {
+							userCallback: function(tick) {
+								return tick.toString() + 'dB';
+							}
+						},
+						scaleLabel: {
+							labelString: 'Voltage',
+							display: true
+						}
+					}]
+				}
+			}
+		});
+	};
+	</script>
 </body>
 
 </html>

samples/scales/multiline-labels.html

@@ -2,85 +2,85 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:90%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var randomScalingFactor = function() {
-            return Math.round(Math.random() * 100);
-        };
+	<div style="width:90%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.round(Math.random() * 100);
+		};
 
-        var config = {
-            type: 'line',
-            data: {
-                labels: [["June","2015"], "July", "August", "September", "October", "November", "December", ["January","2016"],"February", "March", "April", "May"],
-                datasets: [{
-                    label: "My First dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.red,
-                    borderColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ]
-                }, {
-                    label: "My Second dataset",
-                    fill: false,
-                    backgroundColor: window.chartColors.blue,
-                    borderColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ],
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart with Multiline Labels'
-                },
-            }
-        };
+		var config = {
+			type: 'line',
+			data: {
+				labels: [['June', '2015'], 'July', 'August', 'September', 'October', 'November', 'December', ['January', '2016'], 'February', 'March', 'April', 'May'],
+				datasets: [{
+					label: 'My First dataset',
+					fill: false,
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					]
+				}, {
+					label: 'My Second dataset',
+					fill: false,
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart with Multiline Labels'
+				},
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/non-numeric-y.html

@@ -2,72 +2,71 @@
 <html>
 
 <head>
-    <title>Line Chart</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas{
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Line Chart</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas{
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-        var config = {
-            type: 'line',
-            data: {
-                xLabels: ["January", "February", "March", "April", "May", "June", "July"],
-                yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
-                datasets: [{
-                    label: "My First dataset",
-                    data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
-                    fill: false,
-                    borderColor: window.chartColors.red,
-                    backgroundColor: window.chartColors.red
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display:true,
-                    text:'Chart with Non Numeric Y Axis'
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        type: 'category',
-                        position: 'left',
-                        display: true,
-                        scaleLabel: {
-                            display: true,
-                            labelString: 'Request State'
-                        },
-                        ticks: {
-                            reverse: true
-                        }
-                    }]
-                }
-            }
-        };
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
+				datasets: [{
+					label: 'My First dataset',
+					data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
+					fill: false,
+					borderColor: window.chartColors.red,
+					backgroundColor: window.chartColors.red
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart with Non Numeric Y Axis'
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						type: 'category',
+						position: 'left',
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Request State'
+						},
+						ticks: {
+							reverse: true
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/scales/time/combo.html

@@ -7,11 +7,11 @@
 	<script src="../../../dist/Chart.js"></script>
 	<script src="../../utils.js"></script>
 	<style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
 	</style>
 </head>
 
@@ -38,12 +38,12 @@
 			type: 'bar',
 			data: {
 				labels: [
-					newDateString(0), 
-					newDateString(1), 
-					newDateString(2), 
-					newDateString(3), 
-					newDateString(4), 
-					newDateString(5), 
+					newDateString(0),
+					newDateString(1),
+					newDateString(2),
+					newDateString(3),
+					newDateString(4),
+					newDateString(5),
 					newDateString(6)
 				],
 				datasets: [{
@@ -52,12 +52,12 @@
 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.red,
 					data: [
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
 						randomScalingFactor()
 					],
 				}, {
@@ -66,12 +66,12 @@
 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.blue,
 					data: [
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
 						randomScalingFactor()
 					],
 				}, {
@@ -81,23 +81,23 @@
 					borderColor: window.chartColors.green,
 					fill: false,
 					data: [
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
-						randomScalingFactor(), 
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
 						randomScalingFactor()
 					],
-				}, ]
+				}]
 			},
 			options: {
-                title: {
-                    text:"Chart.js Combo Time Scale"
-                },
+				title: {
+					text: 'Chart.js Combo Time Scale'
+				},
 				scales: {
 					xAxes: [{
-						type: "time",
+						type: 'time',
 						display: true,
 						time: {
 							format: timeFormat,
@@ -109,7 +109,7 @@
 		};
 
 		window.onload = function() {
-			var ctx = document.getElementById("canvas").getContext("2d");
+			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myLine = new Chart(ctx, config);
 
 		};

samples/scales/time/financial.html

@@ -18,7 +18,7 @@
 <body>
 	<div style="width:1000px">
 		<canvas id="chart1"></canvas>
-	<div>
+	</div>
 	<br>
 	<br>
 	Chart Type:
@@ -33,10 +33,8 @@
 		}
 
 		function randomBar(date, lastClose) {
-			var open = randomNumber(lastClose * .95, lastClose * 1.05);
-			var close = randomNumber(open * .95, open * 1.05);
-			var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
-			var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
+			var open = randomNumber(lastClose * 0.95, lastClose * 1.05);
+			var close = randomNumber(open * 0.95, open * 1.05);
 			return {
 				t: date.valueOf(),
 				y: close
@@ -55,7 +53,7 @@
 			}
 		}
 
-		var ctx = document.getElementById("chart1").getContext("2d");
+		var ctx = document.getElementById('chart1').getContext('2d');
 		ctx.canvas.width = 1000;
 		ctx.canvas.height = 300;
 		var cfg = {
@@ -63,7 +61,7 @@
 			data: {
 				labels: labels,
 				datasets: [{
-					label: "CHRT - Chart.js Corporation",
+					label: 'CHRT - Chart.js Corporation',
 					data: data,
 					type: 'line',
 					pointRadius: 0,
@@ -94,7 +92,7 @@
 
 		document.getElementById('update').addEventListener('click', function() {
 			var type = document.getElementById('type').value;
- 			chart.config.data.datasets[0].type = type;
+			chart.config.data.datasets[0].type = type;
 			chart.update();
 		});
 

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

@@ -7,11 +7,11 @@
 	<script src="../../../dist/Chart.js"></script>
 	<script src="../../utils.js"></script>
 	<style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
 	</style>
 </head>
 
@@ -38,7 +38,7 @@
 			type: 'line',
 			data: {
 				datasets: [{
-					label: "Dataset with string point data",
+					label: 'Dataset with string point data',
 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.red,
 					fill: false,
@@ -56,7 +56,7 @@
 						y: randomScalingFactor()
 					}],
 				}, {
-					label: "Dataset with date object point data",
+					label: 'Dataset with date object point data',
 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.blue,
 					fill: false,
@@ -77,24 +77,24 @@
 			},
 			options: {
 				responsive: true,
-				title:{
-					display:true,
-					text:"Chart.js Time Point Data"
+				title: {
+					display: true,
+					text: 'Chart.js Time Point Data'
 				},
 				scales: {
 					xAxes: [{
-						type: "time",
+						type: 'time',
 						display: true,
 						scaleLabel: {
 							display: true,
 							labelString: 'Date'
 						},
-                        ticks: {
-                            major: {
-                                fontStyle: "bold",
-                                fontColor: "#FF0000"
-                            }
-                        }
+						ticks: {
+							major: {
+								fontStyle: 'bold',
+								fontColor: '#FF0000'
+							}
+						}
 					}],
 					yAxes: [{
 						display: true,
@@ -108,7 +108,7 @@
 		};
 
 		window.onload = function() {
-			var ctx = document.getElementById("canvas").getContext("2d");
+			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myLine = new Chart(ctx, config);
 		};
 
@@ -122,10 +122,15 @@
 			window.myLine.update();
 		});
 
+		// TODO : fix issue with addData
+		// See https://github.com/chartjs/Chart.js/issues/5197
+		// The Add Data button for this sample has no effect.
+		// An error is logged in the console.
 		document.getElementById('addData').addEventListener('click', function() {
 			if (config.data.datasets.length > 0) {
-				var numTicks = myLine.scales['x-axis-0'].ticksAsTimestamps.length;
-				var lastTime = numTicks ? moment(myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
+				var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;
+				var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();
+
 				var newTime = lastTime
 					.clone()
 					.add(1, 'day')
@@ -143,7 +148,7 @@
 		});
 
 		document.getElementById('removeData').addEventListener('click', function() {
-			config.data.datasets.forEach(function(dataset, datasetIndex) {
+			config.data.datasets.forEach(function(dataset) {
 				dataset.data.pop();
 			});
 

samples/scales/time/line.html

@@ -7,11 +7,11 @@
 	<script src="../../../dist/Chart.js"></script>
 	<script src="../../utils.js"></script>
 	<style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
 	</style>
 </head>
 
@@ -37,10 +37,6 @@
 			return moment().add(days, 'd').format(timeFormat);
 		}
 
-		function newTimestamp(days) {
-			return moment().add(days, 'd').unix();
-		}
-
 		var color = Chart.helpers.color;
 		var config = {
 			type: 'line',
@@ -55,7 +51,7 @@
 					newDate(6)
 				],
 				datasets: [{
-					label: "My First dataset",
+					label: 'My First dataset',
 					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.red,
 					fill: false,
@@ -69,7 +65,7 @@
 						randomScalingFactor()
 					],
 				}, {
-					label: "My Second dataset",
+					label: 'My Second dataset',
 					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.blue,
 					fill: false,
@@ -83,7 +79,7 @@
 						randomScalingFactor()
 					],
 				}, {
-					label: "Dataset with point data",
+					label: 'Dataset with point data',
 					backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
 					borderColor: window.chartColors.green,
 					fill: false,
@@ -103,12 +99,12 @@
 				}]
 			},
 			options: {
-                title:{
-                    text: "Chart.js Time Scale"
-                },
+				title: {
+					text: 'Chart.js Time Scale'
+				},
 				scales: {
 					xAxes: [{
-						type: "time",
+						type: 'time',
 						time: {
 							format: timeFormat,
 							// round: 'day'
@@ -118,7 +114,7 @@
 							display: true,
 							labelString: 'Date'
 						}
-					}, ],
+					}],
 					yAxes: [{
 						scaleLabel: {
 							display: true,
@@ -130,7 +126,7 @@
 		};
 
 		window.onload = function() {
-			var ctx = document.getElementById("canvas").getContext("2d");
+			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myLine = new Chart(ctx, config);
 
 		};
@@ -152,7 +148,7 @@
 		var colorNames = Object.keys(window.chartColors);
 		document.getElementById('addDataset').addEventListener('click', function() {
 			var colorName = colorNames[config.data.datasets.length % colorNames.length];
-			var newColor = window.chartColors[colorName]
+			var newColor = window.chartColors[colorName];
 			var newDataset = {
 				label: 'Dataset ' + config.data.datasets.length,
 				borderColor: newColor,
@@ -173,7 +169,7 @@
 				config.data.labels.push(newDate(config.data.labels.length));
 
 				for (var index = 0; index < config.data.datasets.length; ++index) {
-					if (typeof config.data.datasets[index].data[0] === "object") {
+					if (typeof config.data.datasets[index].data[0] === 'object') {
 						config.data.datasets[index].data.push({
 							x: newDate(config.data.datasets[index].data.length),
 							y: randomScalingFactor(),
@@ -195,7 +191,7 @@
 		document.getElementById('removeData').addEventListener('click', function() {
 			config.data.labels.splice(-1, 1); // remove the label first
 
-			config.data.datasets.forEach(function(dataset, datasetIndex) {
+			config.data.datasets.forEach(function(dataset) {
 				dataset.data.pop();
 			});
 

samples/scales/toggle-scale-type.html

@@ -0,0 +1,99 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Toggle Scale Type</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
+</head>
+
+<body>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<button id="toggleScale">Toggle Scale Type</button>
+	<script>
+		var randomScalingFactor = function() {
+			return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
+		};
+
+		var type = 'linear';
+
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					backgroundColor: window.chartColors.red,
+					borderColor: window.chartColors.red,
+					fill: false,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, {
+					label: 'My Second dataset',
+					backgroundColor: window.chartColors.blue,
+					borderColor: window.chartColors.blue,
+					fill: false,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - ' + type
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+					}],
+					yAxes: [{
+						display: true,
+						type: type
+					}]
+				}
+			}
+		};
+
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+
+		document.getElementById('toggleScale').addEventListener('click', function() {
+			type = type === 'linear' ? 'logarithmic' : 'linear';
+			window.myLine.options.title.text = 'Chart.js Line Chart - ' + type;
+			window.myLine.options.scales.yAxes[0] = {
+				display: true,
+				type: type
+			};
+
+			window.myLine.update();
+		});
+	</script>
+</body>
+
+</html>

samples/scriptable/bubble.html

@@ -24,7 +24,6 @@
 		var MIN_XY = -150;
 		var MAX_XY = 100;
 
-		var presets = window.chartColors;
 		var utils = Samples.utils;
 
 		utils.srand(110);
@@ -106,13 +105,15 @@
 			options: options
 		});
 
+		// eslint-disable-next-line no-unused-vars
 		function randomize() {
 			chart.data.datasets.forEach(function(dataset) {
-				dataset.data = generateData()
+				dataset.data = generateData();
 			});
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function addDataset() {
 			chart.data.datasets.push({
 				data: generateData()
@@ -120,6 +121,7 @@
 			chart.update();
 		}
 
+		// eslint-disable-next-line no-unused-vars
 		function removeDataset() {
 			chart.data.datasets.shift();
 			chart.update();

samples/tooltips/border.html

@@ -34,9 +34,9 @@
 			return {
 				type: 'line',
 				data: {
-					labels: ["January", "February", "March", "April", "May", "June", "July"],
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 					datasets: [{
-						label: "Dataset",
+						label: 'Dataset',
 						borderColor: window.chartColors.red,
 						backgroundColor: window.chartColors.red,
 						data: [10, 30, 46, 2, 8, 50, 0],
@@ -45,7 +45,7 @@
 				},
 				options: {
 					responsive: true,
-					title:{
+					title: {
 						display: true,
 						text: 'Sample tooltip with border'
 					},
@@ -78,7 +78,6 @@
 			var ctx = canvas.getContext('2d');
 			var config = createConfig();
 			new Chart(ctx, config);
-			console.log(config);
 		};
 	</script>
 </body>

samples/tooltips/callbacks.html

@@ -2,106 +2,106 @@
 <html>
 
 <head>
-    <title>Tooltip Hooks</title>
-    <script src="../../dist/Chart.bundle.js"></script>
-    <script src="../utils.js"></script>
-    <style>
-    canvas {
-        -moz-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-    }
-    </style>
+	<title>Tooltip Hooks</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
+	<style>
+	canvas {
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+	}
+	</style>
 </head>
 
 <body>
-    <div style="width:75%;">
-        <canvas id="canvas"></canvas>
-    </div>
-    <script>
-        var config = {
-            type: 'line',
-            data: {
-                labels: ["January", "February", "March", "April", "May", "June", "July"],
-                datasets: [{
-                    label: "My First dataset",
-                    borderColor: window.chartColors.red,
-                    backgroundColor: window.chartColors.red,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ],
-                    fill: false,
-                }, {
-                    label: "My Second dataset",
-                    borderColor: window.chartColors.blue,
-                    backgroundColor: window.chartColors.blue,
-                    data: [
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor(), 
-                        randomScalingFactor()
-                    ],
-                    fill: false,
-                }]
-            },
-            options: {
-                responsive: true,
-                title:{
-                    display: true,
-                    text: "Chart.js Line Chart - Custom Information in Tooltip"
-                },
-                tooltips: {
-                    mode: 'index',
-                    callbacks: {
-                        // Use the footer callback to display the sum of the items showing in the tooltip
-                        footer: function(tooltipItems, data) {
-                            var sum = 0;
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script>
+		var config = {
+			type: 'line',
+			data: {
+				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+				datasets: [{
+					label: 'My First dataset',
+					borderColor: window.chartColors.red,
+					backgroundColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					fill: false,
+				}, {
+					label: 'My Second dataset',
+					borderColor: window.chartColors.blue,
+					backgroundColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+					fill: false,
+				}]
+			},
+			options: {
+				responsive: true,
+				title: {
+					display: true,
+					text: 'Chart.js Line Chart - Custom Information in Tooltip'
+				},
+				tooltips: {
+					mode: 'index',
+					callbacks: {
+						// Use the footer callback to display the sum of the items showing in the tooltip
+						footer: function(tooltipItems, data) {
+							var sum = 0;
 
-                            tooltipItems.forEach(function(tooltipItem) {
-                                sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
-                            });
-                            return 'Sum: ' + sum;
-                        },
-                    },
-                    footerFontStyle: 'normal'
-                },
-                hover: {
-                    mode: 'index',
-                    intersect: true
-                },
-                scales: {
-                    xAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            show: true,
-                            labelString: 'Month'
-                        }
-                    }],
-                    yAxes: [{
-                        display: true,
-                        scaleLabel: {
-                            show: true,
-                            labelString: 'Value'
-                        }
-                    }]
-                }
-            }
-        };
+							tooltipItems.forEach(function(tooltipItem) {
+								sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+							});
+							return 'Sum: ' + sum;
+						},
+					},
+					footerFontStyle: 'normal'
+				},
+				hover: {
+					mode: 'index',
+					intersect: true
+				},
+				scales: {
+					xAxes: [{
+						display: true,
+						scaleLabel: {
+							show: true,
+							labelString: 'Month'
+						}
+					}],
+					yAxes: [{
+						display: true,
+						scaleLabel: {
+							show: true,
+							labelString: 'Value'
+						}
+					}]
+				}
+			}
+		};
 
-        window.onload = function() {
-            var ctx = document.getElementById("canvas").getContext("2d");
-            window.myLine = new Chart(ctx, config);
-        };
-    </script>
+		window.onload = function() {
+			var ctx = document.getElementById('canvas').getContext('2d');
+			window.myLine = new Chart(ctx, config);
+		};
+	</script>
 </body>
 
 </html>

samples/tooltips/custom-line.html

@@ -35,7 +35,7 @@
 
 <body>
 	<div id="canvas-holder1" style="width:75%;">
-		<canvas id="chart"/>
+		<canvas id="chart"></canvas>
 	</div>
 	<script>
 		Chart.defaults.global.pointHitDetectionRadius = 1;
@@ -47,7 +47,7 @@
 			if (!tooltipEl) {
 				tooltipEl = document.createElement('div');
 				tooltipEl.id = 'chartjs-tooltip';
-				tooltipEl.innerHTML = "<table></table>"
+				tooltipEl.innerHTML = '<table></table>';
 				this._chart.canvas.parentNode.appendChild(tooltipEl);
 			}
 
@@ -85,7 +85,7 @@
 					var colors = tooltip.labelColors[i];
 					var style = 'background:' + colors.backgroundColor;
 					style += '; border-color:' + colors.borderColor;
-					style += '; border-width: 2px'; 
+					style += '; border-width: 2px';
 					var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
 					innerHtml += '<tr><td>' + span + body + '</td></tr>';
 				});
@@ -102,54 +102,54 @@
 			tooltipEl.style.opacity = 1;
 			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
 			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
-			tooltipEl.style.fontFamily = tooltip._fontFamily;
-			tooltipEl.style.fontSize = tooltip.fontSize;
-			tooltipEl.style.fontStyle = tooltip._fontStyle;
+			tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
+			tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
+			tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
 			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
 		};
 
 		var lineChartData = {
-			labels: ["January", "February", "March", "April", "May", "June", "July"],
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 			datasets: [{
-				label: "My First dataset",
+				label: 'My First dataset',
 				borderColor: window.chartColors.red,
 				pointBackgroundColor: window.chartColors.red,
 				fill: false,
 				data: [
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
 					randomScalingFactor()
 				]
 			}, {
-				label: "My Second dataset",
+				label: 'My Second dataset',
 				borderColor: window.chartColors.blue,
 				pointBackgroundColor: window.chartColors.blue,
 				fill: false,
 				data: [
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
 					randomScalingFactor()
 				]
 			}]
 		};
 
 		window.onload = function() {
-			var chartEl = document.getElementById("chart");
+			var chartEl = document.getElementById('chart');
 			window.myLine = new Chart(chartEl, {
 				type: 'line',
 				data: lineChartData,
 				options: {
-					title:{
-						display:true,
-						text:'Chart.js Line Chart - Custom Tooltips'
+					title: {
+						display: true,
+						text: 'Chart.js Line Chart - Custom Tooltips'
 					},
 					tooltips: {
 						enabled: false,

samples/tooltips/custom-pie.html

@@ -2,15 +2,15 @@
 <html>
 
 <head>
-		<title>Pie Chart with Custom Tooltips</title>
-		<script src="../../dist/Chart.bundle.js"></script>
-		<script src="../utils.js"></script>
+	<title>Pie Chart with Custom Tooltips</title>
+	<script src="../../dist/Chart.bundle.js"></script>
+	<script src="../utils.js"></script>
 
-		<style>
+	<style>
 		#canvas-holder {
-				width: 100%;
-				margin-top: 50px;
-				text-align: center;
+			width: 100%;
+			margin-top: 50px;
+			text-align: center;
 		}
 		#chartjs-tooltip {
 			opacity: 1;
@@ -31,7 +31,7 @@
 			height: 10px;
 			margin-right: 10px;
 		}
-		</style>
+	</style>
 </head>
 
 <body>
@@ -43,103 +43,103 @@
 	</div>
 
 	<script>
-	Chart.defaults.global.tooltips.custom = function(tooltip) {
-		// Tooltip Element
-		var tooltipEl = document.getElementById('chartjs-tooltip');
+		Chart.defaults.global.tooltips.custom = function(tooltip) {
+			// Tooltip Element
+			var tooltipEl = document.getElementById('chartjs-tooltip');
 
-		// Hide if no tooltip
-		if (tooltip.opacity === 0) {
-			tooltipEl.style.opacity = 0;
-			return;
-		}
-
-		// Set caret Position
-		tooltipEl.classList.remove('above', 'below', 'no-transform');
-		if (tooltip.yAlign) {
-			tooltipEl.classList.add(tooltip.yAlign);
-		} else {
-			tooltipEl.classList.add('no-transform');
-		}
-
-		function getBody(bodyItem) {
-			return bodyItem.lines;
-		}
-
-		// Set Text
-		if (tooltip.body) {
-			var titleLines = tooltip.title || [];
-			var bodyLines = tooltip.body.map(getBody);
-
-			var innerHtml = '<thead>';
-
-			titleLines.forEach(function(title) {
-				innerHtml += '<tr><th>' + title + '</th></tr>';
-			});
-			innerHtml += '</thead><tbody>';
-
-			bodyLines.forEach(function(body, i) {
-				var colors = tooltip.labelColors[i];
-				var style = 'background:' + colors.backgroundColor;
-				style += '; border-color:' + colors.borderColor;
-				style += '; border-width: 2px'; 
-				var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
-				innerHtml += '<tr><td>' + span + body + '</td></tr>';
-			});
-			innerHtml += '</tbody>';
-
-			var tableRoot = tooltipEl.querySelector('table');
-			tableRoot.innerHTML = innerHtml;
-		}
-
-		var positionY = this._chart.canvas.offsetTop;
-		var positionX = this._chart.canvas.offsetLeft;
-
-		// Display, position, and set styles for font
-		tooltipEl.style.opacity = 1;
-		tooltipEl.style.left = positionX + tooltip.caretX + 'px';
-		tooltipEl.style.top = positionY + tooltip.caretY + 'px';
-		tooltipEl.style.fontFamily = tooltip._fontFamily;
-		tooltipEl.style.fontSize = tooltip.fontSize;
-		tooltipEl.style.fontStyle = tooltip._fontStyle;
-		tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
-	};
-
-	var config = {
-		type: 'pie',
-		data: {
-			datasets: [{
-				data: [300, 50, 100, 40, 10],
-				backgroundColor: [
-					window.chartColors.red,
-					window.chartColors.orange,
-					window.chartColors.yellow,
-					window.chartColors.green,
-					window.chartColors.blue,
-				],
-			}],
-			labels: [
-				"Red",
-				"Orange",
-				"Yellow",
-				"Green",
-				"Blue"
-			]
-		},
-		options: {
-			responsive: true,
-			legend: {
-				display: false
-			},
-			tooltips: {
-				enabled: false,
+			// Hide if no tooltip
+			if (tooltip.opacity === 0) {
+				tooltipEl.style.opacity = 0;
+				return;
 			}
-		}
-	};
 
-	window.onload = function() {
-			var ctx = document.getElementById("chart-area").getContext("2d");
+			// Set caret Position
+			tooltipEl.classList.remove('above', 'below', 'no-transform');
+			if (tooltip.yAlign) {
+				tooltipEl.classList.add(tooltip.yAlign);
+			} else {
+				tooltipEl.classList.add('no-transform');
+			}
+
+			function getBody(bodyItem) {
+				return bodyItem.lines;
+			}
+
+			// Set Text
+			if (tooltip.body) {
+				var titleLines = tooltip.title || [];
+				var bodyLines = tooltip.body.map(getBody);
+
+				var innerHtml = '<thead>';
+
+				titleLines.forEach(function(title) {
+					innerHtml += '<tr><th>' + title + '</th></tr>';
+				});
+				innerHtml += '</thead><tbody>';
+
+				bodyLines.forEach(function(body, i) {
+					var colors = tooltip.labelColors[i];
+					var style = 'background:' + colors.backgroundColor;
+					style += '; border-color:' + colors.borderColor;
+					style += '; border-width: 2px';
+					var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+					innerHtml += '<tr><td>' + span + body + '</td></tr>';
+				});
+				innerHtml += '</tbody>';
+
+				var tableRoot = tooltipEl.querySelector('table');
+				tableRoot.innerHTML = innerHtml;
+			}
+
+			var positionY = this._chart.canvas.offsetTop;
+			var positionX = this._chart.canvas.offsetLeft;
+
+			// Display, position, and set styles for font
+			tooltipEl.style.opacity = 1;
+			tooltipEl.style.left = positionX + tooltip.caretX + 'px';
+			tooltipEl.style.top = positionY + tooltip.caretY + 'px';
+			tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
+			tooltipEl.style.fontSize = tooltip.bodyFontSize;
+			tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
+			tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+		};
+
+		var config = {
+			type: 'pie',
+			data: {
+				datasets: [{
+					data: [300, 50, 100, 40, 10],
+					backgroundColor: [
+						window.chartColors.red,
+						window.chartColors.orange,
+						window.chartColors.yellow,
+						window.chartColors.green,
+						window.chartColors.blue,
+					],
+				}],
+				labels: [
+					'Red',
+					'Orange',
+					'Yellow',
+					'Green',
+					'Blue'
+				]
+			},
+			options: {
+				responsive: true,
+				legend: {
+					display: false
+				},
+				tooltips: {
+					enabled: false,
+				}
+			}
+		};
+
+		window.onload = function() {
+			var ctx = document.getElementById('chart-area').getContext('2d');
 			window.myPie = new Chart(ctx, config);
-	};
+		};
 	</script>
 </body>
 

samples/tooltips/custom-points.html

@@ -41,13 +41,13 @@
 		<div class="chartjs-tooltip" id="tooltip-1"></div>
 	</div>
 	<script>
-		var customTooltips = function (tooltip) {
-			$(this._chart.canvas).css("cursor", "pointer");
+		var customTooltips = function(tooltip) {
+			$(this._chart.canvas).css('cursor', 'pointer');
 
 			var positionY = this._chart.canvas.offsetTop;
 			var positionX = this._chart.canvas.offsetLeft;
 
-			$(".chartjs-tooltip").css({
+			$('.chartjs-tooltip').css({
 				opacity: 0,
 			});
 
@@ -56,62 +56,62 @@
 			}
 
 			if (tooltip.dataPoints.length > 0) {
-				tooltip.dataPoints.forEach(function (dataPoint) {
-					var content = [dataPoint.xLabel, dataPoint.yLabel].join(": ");
-					var $tooltip = $("#tooltip-" + dataPoint.datasetIndex);
+				tooltip.dataPoints.forEach(function(dataPoint) {
+					var content = [dataPoint.xLabel, dataPoint.yLabel].join(': ');
+					var $tooltip = $('#tooltip-' + dataPoint.datasetIndex);
 
 					$tooltip.html(content);
 					$tooltip.css({
 						opacity: 1,
-						top: positionY + dataPoint.y + "px",
-						left: positionX + dataPoint.x + "px",
+						top: positionY + dataPoint.y + 'px',
+						left: positionX + dataPoint.x + 'px',
 					});
 				});
 			}
 		};
 		var color = Chart.helpers.color;
 		var lineChartData = {
-			labels: ["January", "February", "March", "April", "May", "June", "July"],
+			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 			datasets: [{
-				label: "My First dataset",
+				label: 'My First dataset',
 				backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
 				borderColor: window.chartColors.red,
 				pointBackgroundColor: window.chartColors.red,
 				data: [
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
 					randomScalingFactor()
 				]
 			}, {
-				label: "My Second dataset",
+				label: 'My Second dataset',
 				backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
 				borderColor: window.chartColors.blue,
 				pointBackgroundColor: window.chartColors.blue,
 				data: [
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
-					randomScalingFactor(), 
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
+					randomScalingFactor(),
 					randomScalingFactor()
 				]
 			}]
 		};
 
 		window.onload = function() {
-			var chartEl = document.getElementById("chart1");
-			var chart = new Chart(chartEl, {
-				type: "line",
+			var chartEl = document.getElementById('chart1');
+			new Chart(chartEl, {
+				type: 'line',
 				data: lineChartData,
 				options: {
-					title:{
+					title: {
 						display: true,
-						text: "Chart.js - Custom Tooltips using Data Points"
+						text: 'Chart.js - Custom Tooltips using Data Points'
 					},
 					tooltips: {
 						enabled: false,

samples/tooltips/interactions.html

@@ -34,15 +34,15 @@
 			return {
 				type: 'line',
 				data: {
-					labels: ["January", "February", "March", "April", "May", "June", "July"],
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 					datasets: [{
-						label: "My First dataset",
+						label: 'My First dataset',
 						borderColor: window.chartColors.red,
 						backgroundColor: window.chartColors.red,
 						data: [10, 30, 46, 2, 8, 50, 0],
 						fill: false,
 					}, {
-						label: "My Second dataset",
+						label: 'My Second dataset',
 						borderColor: window.chartColors.blue,
 						backgroundColor: window.chartColors.blue,
 						data: [7, 49, 46, 13, 25, 30, 22],
@@ -51,7 +51,7 @@
 				},
 				options: {
 					responsive: true,
-					title:{
+					title: {
 						display: true,
 						text: 'Mode: ' + mode + ', intersect = ' + intersect
 					},
@@ -117,7 +117,7 @@
 				var ctx = canvas.getContext('2d');
 				var config = createConfig(details.mode, details.intersect);
 				new Chart(ctx, config);
-			})
+			});
 		};
 	</script>
 </body>

samples/tooltips/positioning.html

@@ -34,15 +34,15 @@
 			return {
 				type: 'line',
 				data: {
-					labels: ["January", "February", "March", "April", "May", "June", "July"],
+					labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 					datasets: [{
-						label: "My First dataset",
+						label: 'My First dataset',
 						borderColor: window.chartColors.red,
 						backgroundColor: window.chartColors.red,
 						data: [10, 30, 46, 2, 8, 50, 0],
 						fill: false,
 					}, {
-						label: "My Second dataset",
+						label: 'My Second dataset',
 						borderColor: window.chartColors.blue,
 						backgroundColor: window.chartColors.blue,
 						data: [7, 49, 46, 13, 25, 30, 22],
@@ -51,7 +51,7 @@
 				},
 				options: {
 					responsive: true,
-					title:{
+					title: {
 						display: true,
 						text: 'Tooltip Position: ' + position
 					},
@@ -78,7 +78,7 @@
 				var ctx = canvas.getContext('2d');
 				var config = createConfig(position);
 				new Chart(ctx, config);
-			})
+			});
 		};
 	</script>
 </body>

src/chart.js

@@ -12,13 +12,14 @@ Chart.defaults = require('./core/core.defaults');
 Chart.Element = require('./core/core.element');
 Chart.elements = require('./elements/index');
 Chart.Interaction = require('./core/core.interaction');
+Chart.layouts = require('./core/core.layouts');
 Chart.platform = require('./platforms/platform');
+Chart.plugins = require('./core/core.plugins');
+Chart.Ticks = require('./core/core.ticks');
 
-require('./core/core.plugin')(Chart);
 require('./core/core.animation')(Chart);
 require('./core/core.controller')(Chart);
 require('./core/core.datasetController')(Chart);
-require('./core/core.layoutService')(Chart);
 require('./core/core.scaleService')(Chart);
 require('./core/core.scale')(Chart);
 require('./core/core.tooltip')(Chart);
@@ -49,15 +50,12 @@ require('./charts/Chart.Radar')(Chart);
 require('./charts/Chart.Scatter')(Chart);
 
 // Loading built-it plugins
-var plugins = [];
-
-plugins.push(
-	require('./plugins/plugin.filler')(Chart),
-	require('./plugins/plugin.legend')(Chart),
-	require('./plugins/plugin.title')(Chart)
-);
-
-Chart.plugins.register(plugins);
+var plugins = require('./plugins');
+for (var k in plugins) {
+	if (plugins.hasOwnProperty(k)) {
+		Chart.plugins.register(plugins[k]);
+	}
+}
 
 Chart.platform.initialize();
 
@@ -68,6 +66,43 @@ if (typeof window !== 'undefined') {
 
 // DEPRECATIONS
 
+/**
+ * Provided for backward compatibility, not available anymore
+ * @namespace Chart.Legend
+ * @deprecated since version 2.1.5
+ * @todo remove at version 3
+ * @private
+ */
+Chart.Legend = plugins.legend._element;
+
+/**
+ * Provided for backward compatibility, not available anymore
+ * @namespace Chart.Title
+ * @deprecated since version 2.1.5
+ * @todo remove at version 3
+ * @private
+ */
+Chart.Title = plugins.title._element;
+
+/**
+ * Provided for backward compatibility, use Chart.plugins instead
+ * @namespace Chart.pluginService
+ * @deprecated since version 2.1.5
+ * @todo remove at version 3
+ * @private
+ */
+Chart.pluginService = Chart.plugins;
+
+/**
+ * Provided for backward compatibility, inheriting from Chart.PlugingBase has no
+ * effect, instead simply create/register plugins via plain JavaScript objects.
+ * @interface Chart.PluginBase
+ * @deprecated since version 2.5.0
+ * @todo remove at version 3
+ * @private
+ */
+Chart.PluginBase = Chart.Element.extend({});
+
 /**
  * Provided for backward compatibility, use Chart.helpers.canvas instead.
  * @namespace Chart.canvasHelpers
@@ -76,3 +111,12 @@ if (typeof window !== 'undefined') {
  * @private
  */
 Chart.canvasHelpers = Chart.helpers.canvas;
+
+/**
+ * Provided for backward compatibility, use Chart.layouts instead.
+ * @namespace Chart.layoutService
+ * @deprecated since version 2.8.0
+ * @todo remove at version 3
+ * @private
+ */
+Chart.layoutService = Chart.layouts;

src/controllers/controller.bar.js

@@ -95,6 +95,93 @@ defaults._set('horizontalBar', {
 	}
 });
 
+/**
+ * Computes the "optimal" sample size to maintain bars equally sized while preventing overlap.
+ * @private
+ */
+function computeMinSampleSize(scale, pixels) {
+	var min = scale.isHorizontal() ? scale.width : scale.height;
+	var ticks = scale.getTicks();
+	var prev, curr, i, ilen;
+
+	for (i = 1, ilen = pixels.length; i < ilen; ++i) {
+		min = Math.min(min, pixels[i] - pixels[i - 1]);
+	}
+
+	for (i = 0, ilen = ticks.length; i < ilen; ++i) {
+		curr = scale.getPixelForTick(i);
+		min = i > 0 ? Math.min(min, curr - prev) : min;
+		prev = curr;
+	}
+
+	return min;
+}
+
+/**
+ * Computes an "ideal" category based on the absolute bar thickness or, if undefined or null,
+ * uses the smallest interval (see computeMinSampleSize) that prevents bar overlapping. This
+ * mode currently always generates bars equally sized (until we introduce scriptable options?).
+ * @private
+ */
+function computeFitCategoryTraits(index, ruler, options) {
+	var thickness = options.barThickness;
+	var count = ruler.stackCount;
+	var curr = ruler.pixels[index];
+	var size, ratio;
+
+	if (helpers.isNullOrUndef(thickness)) {
+		size = ruler.min * options.categoryPercentage;
+		ratio = options.barPercentage;
+	} else {
+		// When bar thickness is enforced, category and bar percentages are ignored.
+		// Note(SB): we could add support for relative bar thickness (e.g. barThickness: '50%')
+		// and deprecate barPercentage since this value is ignored when thickness is absolute.
+		size = thickness * count;
+		ratio = 1;
+	}
+
+	return {
+		chunk: size / count,
+		ratio: ratio,
+		start: curr - (size / 2)
+	};
+}
+
+/**
+ * Computes an "optimal" category that globally arranges bars side by side (no gap when
+ * percentage options are 1), based on the previous and following categories. This mode
+ * generates bars with different widths when data are not evenly spaced.
+ * @private
+ */
+function computeFlexCategoryTraits(index, ruler, options) {
+	var pixels = ruler.pixels;
+	var curr = pixels[index];
+	var prev = index > 0 ? pixels[index - 1] : null;
+	var next = index < pixels.length - 1 ? pixels[index + 1] : null;
+	var percent = options.categoryPercentage;
+	var start, size;
+
+	if (prev === null) {
+		// first data: its size is double based on the next point or,
+		// if it's also the last data, we use the scale end extremity.
+		prev = curr - (next === null ? ruler.end - curr : next - curr);
+	}
+
+	if (next === null) {
+		// last data: its size is also double based on the previous point.
+		next = curr + curr - prev;
+	}
+
+	start = curr - ((curr - prev) / 2) * percent;
+	size = ((next - prev) / 2) * percent;
+
+	return {
+		chunk: size / ruler.stackCount,
+		ratio: options.barPercentage,
+		start: start
+	};
+}
+
 module.exports = function(Chart) {
 
 	Chart.controllers.bar = Chart.DatasetController.extend({
@@ -201,10 +288,12 @@ module.exports = function(Chart) {
 		},
 
 		/**
-		 * Returns the effective number of stacks based on groups and bar visibility.
+		 * Returns the stacks based on groups and bar visibility.
+		 * @param {Number} [last] - The dataset index
+		 * @returns {Array} The stack list
 		 * @private
 		 */
-		getStackCount: function(last) {
+		_getStacks: function(last) {
 			var me = this;
 			var chart = me.chart;
 			var scale = me.getIndexScale();
@@ -223,15 +312,33 @@ module.exports = function(Chart) {
 				}
 			}
 
-			return stacks.length;
+			return stacks;
+		},
+
+		/**
+		 * Returns the effective number of stacks based on groups and bar visibility.
+		 * @private
+		 */
+		getStackCount: function() {
+			return this._getStacks().length;
 		},
 
 		/**
 		 * Returns the stack index for the given dataset based on groups and bar visibility.
+		 * @param {Number} [datasetIndex] - The dataset index
+		 * @param {String} [name] - The stack name to find
+		 * @returns {Number} The stack index
 		 * @private
 		 */
-		getStackIndex: function(datasetIndex) {
-			return this.getStackCount(datasetIndex) - 1;
+		getStackIndex: function(datasetIndex, name) {
+			var stacks = this._getStacks(datasetIndex);
+			var index = (name !== undefined)
+				? stacks.indexOf(name)
+				: -1; // indexOf returns -1 if element is not present
+
+			return (index === -1)
+				? stacks.length - 1
+				: index;
 		},
 
 		/**
@@ -242,17 +349,22 @@ module.exports = function(Chart) {
 			var scale = me.getIndexScale();
 			var stackCount = me.getStackCount();
 			var datasetIndex = me.index;
-			var pixels = [];
 			var isHorizontal = scale.isHorizontal();
 			var start = isHorizontal ? scale.left : scale.top;
 			var end = start + (isHorizontal ? scale.width : scale.height);
-			var i, ilen;
+			var pixels = [];
+			var i, ilen, min;
 
 			for (i = 0, ilen = me.getMeta().data.length; i < ilen; ++i) {
 				pixels.push(scale.getPixelForValue(null, i, datasetIndex));
 			}
 
+			min = helpers.isNullOrUndef(scale.options.barThickness)
+				? computeMinSampleSize(scale, pixels)
+				: -1;
+
 			return {
+				min: min,
 				pixels: pixels,
 				start: start,
 				end: end,
@@ -312,50 +424,21 @@ module.exports = function(Chart) {
 		calculateBarIndexPixels: function(datasetIndex, index, ruler) {
 			var me = this;
 			var options = ruler.scale.options;
-			var stackIndex = me.getStackIndex(datasetIndex);
-			var pixels = ruler.pixels;
-			var base = pixels[index];
-			var length = pixels.length;
-			var start = ruler.start;
-			var end = ruler.end;
-			var leftSampleSize, rightSampleSize, leftCategorySize, rightCategorySize, fullBarSize, size;
+			var range = options.barThickness === 'flex'
+				? computeFlexCategoryTraits(index, ruler, options)
+				: computeFitCategoryTraits(index, ruler, options);
 
-			if (length === 1) {
-				leftSampleSize = base > start ? base - start : end - base;
-				rightSampleSize = base < end ? end - base : base - start;
-			} else {
-				if (index > 0) {
-					leftSampleSize = (base - pixels[index - 1]) / 2;
-					if (index === length - 1) {
-						rightSampleSize = leftSampleSize;
-					}
-				}
-				if (index < length - 1) {
-					rightSampleSize = (pixels[index + 1] - base) / 2;
-					if (index === 0) {
-						leftSampleSize = rightSampleSize;
-					}
-				}
-			}
-
-			leftCategorySize = leftSampleSize * options.categoryPercentage;
-			rightCategorySize = rightSampleSize * options.categoryPercentage;
-			fullBarSize = (leftCategorySize + rightCategorySize) / ruler.stackCount;
-			size = fullBarSize * options.barPercentage;
-
-			size = Math.min(
-				helpers.valueOrDefault(options.barThickness, size),
-				helpers.valueOrDefault(options.maxBarThickness, Infinity));
-
-			base -= leftCategorySize;
-			base += fullBarSize * stackIndex;
-			base += (fullBarSize - size) / 2;
+			var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
+			var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
+			var size = Math.min(
+				helpers.valueOrDefault(options.maxBarThickness, Infinity),
+				range.chunk * range.ratio);
 
 			return {
-				size: size,
-				base: base,
-				head: base + size,
-				center: base + size / 2
+				base: center - size / 2,
+				head: center + size / 2,
+				center: center,
+				size: size
 			};
 		},
 

src/controllers/controller.doughnut.js

@@ -273,7 +273,7 @@ module.exports = function(Chart) {
 		calculateCircumference: function(value) {
 			var total = this.getMeta().total;
 			if (total > 0 && !isNaN(value)) {
-				return (Math.PI * 2.0) * (value / total);
+				return (Math.PI * 2.0) * (Math.abs(value) / total);
 			}
 			return 0;
 		},