Bump version to v2.0.0

Allow percentages as the max-width/max-height of the container

.travis.yml

@@ -4,9 +4,13 @@ node_js:
   - "4.3"
 
 before_install:
-  - "export CHROME_BIN=chromium-browser"
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
+  - "sudo apt-get update"
+  - "sudo apt-get install -y libappindicator1 fonts-liberation"
+  - "wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb"
+  - "sudo dpkg -i google-chrome*.deb"
+  - "export CHROME_BIN=/usr/bin/google-chrome"
 
 before_script:
   - npm install
@@ -19,4 +23,7 @@ script:
 notifications:
   slack: chartjs:pcfCZR6ugg5TEcaLtmIfQYuA
 
-sudo: false
+sudo: required
+
+addons:
+  firefox: latest

bower.json

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

composer.json

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

docs/00-Getting-Started.md

@@ -3,9 +3,12 @@ title: Getting started
 anchor: getting-started
 ---
 
-###Download Chart.js
+### Download Chart.js
 
-To download a zip, go to the [Chart.js on Github](https://github.com/nnnick/Chart.js)
+To download a zip, go to [Chart.js on Github](https://github.com/nnnick/Chart.js) and choose the version that is right for your application.
+* [Standard build](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.js) (~31kB gzipped)
+* [Bundled with Moment.js](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.bundle.js) (~45kB gzipped)
+* [CDN Versions](https://cdnjs.com/libraries/Chart.js)
 
 To install via npm / bower:
 
@@ -16,16 +19,14 @@ npm install chart.js --save
 bower install Chart.js --save
 ```
 
-CDN: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js
-
-###Install Chart.js
+### Installation
 
 To import Chart.js using an old-school script tag:
 
 ```html
 <script src="Chart.js"></script>
 <script>
-	var myChart = new Chart({...})
+    var myChart = new Chart({...})
 </script>
 ```
 
@@ -34,11 +35,11 @@ To import Chart.js using an awesome module loader:
 ```javascript
 
 // Using CommonJS
-var Chart = require('chart.js')
+var Chart = require('src/chart.js')
 var myChart = new Chart({...})
 
 // ES6
-import Chart from 'chart.js'
+import Chart from 'src/chart.js'
 let myChart = new Chart({...})
 
 // Using requirejs
@@ -48,7 +49,7 @@ require(['path/to/Chartjs'], function(Chart){
 
 ```
 
-###Creating a Chart
+### Creating a Chart
 
 To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.
 
@@ -72,30 +73,30 @@ The following example instantiates a bar chart showing the number of votes for d
 <script>
 var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx, {
-		type: 'bar',
-		data: {
-			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-			datasets: [{
-					label: '# of Votes',
-					data: [12, 19, 3, 5, 2, 3]
-			}]
-		},
-		options:{
-			scales:{
-				yAxes:[{
-						ticks:{
-							beginAtZero:true
-						}
-					}]
-			}
-		}
+    type: 'bar',
+    data: {
+        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+        datasets: [{
+            label: '# of Votes',
+            data: [12, 19, 3, 5, 2, 3]
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
 });
 </script>
 ```
 
 It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
 
-###Global chart configuration
+### Global chart configuration
 
 This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
 
@@ -119,7 +120,7 @@ defaultFontColor | Color | '#666' | Default font color for all text
 defaultFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Default font family for all text
 defaultFontSize | Number | 12 | Default font size (in px) for text. Does not apply to radialLinear scale point labels
 defaultFontStyle | String | 'normal' | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title
-legendCallback | Function | ` function (chart) { // the chart object to generate a legend from.  }` | Function to generate a legend. Default implementation returns an HTML string.
+legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string.
 
 The global options for the chart title is defined in `Chart.defaults.global.title`
 
@@ -150,7 +151,7 @@ labels |-|-|-
 *labels*fontColor | Color | "#666" |
 *labels*fontFamily | String | "Helvetica Neue" |
 *labels*padding | Number | 10 | Padding between rows of colored boxes
-*labels*generateLabels: | Function | `function(data) {  } | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
+*labels*generateLabels: | Function | `function(data) {  }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case.
 
 The global options for tooltips are defined in `Chart.defaults.global.tooltips`.
 
@@ -203,8 +204,8 @@ Name | Type | Default | Description
 duration | Number | 1000 | The number of milliseconds an animation takes.
 easing | String | "easeOutQuart" | Easing function to use.
 onProgress | Function | none | Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation.
-onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress
-`
+onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress`
+
 The global options for elements are defined in `Chart.defaults.global.elements`.
 
 Name | Type | Default | Description
@@ -236,6 +237,7 @@ rectangle | - | - | -
 *rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default bar fill color
 *rectangle*.borderWidth | Number | 0 | Default bar stroke width
 *rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default bar stroke color
+*rectangle*.borderSkipped | String | 'bottom' | Default skipped (excluded) border for rectangle. Can be one of `bottom`, `left`, `top`, `right`
 
 If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:
 

docs/01-Scales.md

@@ -60,7 +60,7 @@ afterUpdate | Function | undefined | Callback that runs at the end of the update
 *ticks*.display | Boolean | true | If true, show the ticks.
 *ticks*.suggestedMin | Number | - | User defined minimum number for the scale, overrides minimum value *except for if* it is higher than the minimum value.
 *ticks*.suggestedMax | Number | - | User defined maximum number for the scale, overrides maximum value *except for if* it is lower than the maximum value.
-*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value
+*ticks*.min | Number | - | User defined minimum number for the scale, overrides minimum value. 
 *ticks*.max | Number | - | User defined minimum number for the scale, overrides maximum value
 *ticks*.autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
 *ticks*.callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart.
@@ -93,6 +93,8 @@ The category scale extends the core scale class with the following tick template
 }
 ```
 
+The `ticks.min` and `ticks.max` attributes may be used with the category scale. Unlike other scales, the value of these attributes must simply be something that can be found in the `labels` array of the data object.
+
 ### Linear Scale
 The linear scale can be used to display numerical data. It can be placed on either the x or y axis. The scatter chart type automatically configures a line chart to use one of these scales for the x axis.
 
@@ -134,9 +136,9 @@ It also provides additional configuration options:
 
 Name | Type | Default | Description
 --- |:---:| --- | ---
-*ticks*.fixedStepSize | Number | - | User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of fixedStepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
+*ticks*.stepSize | Number | - | User defined fixed step size for the scale. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
 
-#### Logarithmic Scale
+### Logarithmic Scale
 The logarithmic scale is used to display logarithmic data of course. It can be placed on either the x or y axis.
 
 The log scale extends the core scale class with the following tick template:
@@ -168,11 +170,16 @@ The time scale extends the core scale class with the following tick template:
 	position: "bottom",
 	time: {
 		// string/callback - By default, date objects are expected. You may use a pattern string from http://momentjs.com/docs/#/parsing/string-format/ to parse a time string format, or use a callback function that is passed the label, and must return a moment() instance.
-		format: false,
+		parser: false,
 		// string - By default, unit will automatically be detected.  Override with 'week', 'month', 'year', etc. (see supported time measurements)
 		unit: false,
+
+		// Number - The number of steps of the above unit between ticks
+		unitStepSize: 1
+
 		// string - By default, no rounding is applied.  To round, set to a supported time unit eg. 'week', 'month', 'year', etc.
 		round: false,
+		
 		// Moment js for each of the units. Replaces `displayFormat`
 		// To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
 		displayFormats: {

docs/02-Line-Chart.md

@@ -2,7 +2,7 @@
 title: Line Chart
 anchor: line-chart
 ---
-###Introduction
+### Introduction
 A line chart is a way of plotting data points on a line.
 
 Often, it is used to show trend data, and the comparison of two data sets.
@@ -11,7 +11,7 @@ Often, it is used to show trend data, and the comparison of two data sets.
 	<canvas width="250" height="125"></canvas>
 </div>
 
-###Example usage
+### Example usage
 ```javascript
 var myLineChart = new Chart(ctx, {
 	type: 'line',
@@ -27,7 +27,7 @@ var myLineChart = Chart.Line(ctx, {
 	options: options
 });
 ```
-###Data structure
+### Data structure
 
 ```javascript
 var data = {
@@ -86,8 +86,8 @@ var data = {
 			// The actual data
 			data: [65, 59, 80, 81, 56, 55, 40],
 
-			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
-			yAxisID: "y-axis-1",
+			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used. First id is y-axis-0
+			yAxisID: "y-axis-0",
 		},
 		{
 			label: "My Second dataset",

docs/03-Bar-Chart.md

@@ -14,7 +14,7 @@ It is sometimes used to show trend data, and the comparison of multiple data set
 
 ### Example usage
 ```javascript
-var myBarChart = new Chart(ctx,{
+var myBarChart = new Chart(ctx, {
 	type: 'bar',
 	data: data,
 	options: options
@@ -50,7 +50,7 @@ var data = {
 			data: [65, 59, 80, 81, 56, 55, 40],
 
 			// String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
-			yAxisID: "y-axis-1",
+			yAxisID: "y-axis-0",
 		},
 		{
 			label: "My Second dataset",
@@ -108,13 +108,13 @@ You can override these for your `Chart` instance by passing a second argument in
 For example, we could have a bar chart without a stroke on each bar by doing the following:
 
 ```javascript
-new Chart(ctx,{
-	type:"bar",
+new Chart(ctx, {
+	type: "bar",
 	data: data,
 	options: {
 		scales: {
 				xAxes: [{
-						stacked: true,
+						stacked: true
 				}],
 				yAxes: [{
 						stacked: true
@@ -137,19 +137,19 @@ The following shows the relationship between the bar percentage option and the c
 ```text
 // categoryPercentage: 1.0
 // barPercentage: 1.0
-Bar:          | 1.0 | 1.0 |
-Category: 	|    1.0    |   
-Sample:	   |===========|
+Bar:        | 1.0 | 1.0 |
+Category:   |    1.0    |   
+Sample:     |===========|
 
 // categoryPercentage: 1.0
 // barPercentage: 0.5
-Bar:             |.5|  |.5|
-Category: 	|      1.0     |   
-Sample:	   |==============|
+Bar:          |.5|  |.5|
+Category:  |      1.0     |   
+Sample:    |==============|
 
 // categoryPercentage: 0.5
 // barPercentage: 1.0
-Bar:              |1.||1.|
-Category:     	|  .5  |   
-Sample:	   |==============|
+Bar:            |1.||1.|
+Category:       |  .5  |   
+Sample:     |==============|
 ```

docs/04-Radar-Chart.md

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

docs/05-Polar-Area-Chart.md

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

docs/06-Pie-Doughnut-Chart.md

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

docs/07-Advanced.md

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

package.json

@@ -2,7 +2,7 @@
   "name": "chart.js",
   "homepage": "http://www.chartjs.org",
   "description": "Simple HTML5 charts using the canvas element.",
-  "version": "2.0.0-beta2",
+  "version": "2.0.0",
   "main": "src/chart.js",
   "repository": {
     "type": "git",
@@ -38,7 +38,8 @@
     "karma-jasmine-html-reporter": "^0.1.8",
     "merge-stream": "^1.0.0",
     "semver": "^3.0.1",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.7.0"
   },
   "spm": {
     "main": "Chart.js"
@@ -47,4 +48,4 @@
     "chartjs-color": "^1.0.2",
     "moment": "^2.10.6"
   }
-}
+}

samples/AnimationCallbacks/progress-bar.html

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

samples/bar-multi-axis.html

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

samples/bar-stacked.html

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

samples/bar.html

@@ -5,29 +5,27 @@
     <title>Bar Chart</title>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="../dist/Chart.bundle.js"></script>
-    <style type="text/css">
-        canvas {
-            border: 1px solid red;
-        }
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
     </style>
 </head>
 
 <body>
-    <div id="container" style="width: 50%; height: 25%;">
-        <canvas id="canvas" height="450" width="600"></canvas>
+    <div id="container" style="width: 75%;">
+        <canvas id="canvas"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
-    <button id="show">Show</button>
-    <div>
-        <h3>Legend</h3>
-        <div id="legendContainer">
-        </div>
-    </div>
     <script>
+        var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
         var randomScalingFactor = function() {
             return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
         };
@@ -57,12 +55,6 @@
 
         };
 
-        function updateLegend() {
-            $legendContainer = $('#legendContainer');
-            $legendContainer.empty();
-            $legendContainer.append(window.myBar.generateLegend());
-        }
-
         window.onload = function() {
             var ctx = document.getElementById("canvas").getContext("2d");
             window.myBar = new Chart(ctx, {
@@ -74,7 +66,8 @@
                     elements: {
                         rectangle: {
                             borderWidth: 2,
-                            borderColor: 'rgb(0, 255, 0)'
+                            borderColor: 'rgb(0, 255, 0)',
+                            borderSkipped: 'bottom'
                         }
                     },
                     responsive: true,
@@ -83,12 +76,11 @@
                     },
                     title: {
                         display: true,
-                        text: 'Our 3 Favorite Datasets'
+                        text: 'Chart.js Bar Chart'
                     }
                 }
             });
 
-            updateLegend();
         };
 
         $('#randomizeData').click(function() {
@@ -101,7 +93,6 @@
 
             });
             window.myBar.update();
-            updateLegend();
         });
 
         $('#addDataset').click(function() {
@@ -117,12 +108,12 @@
 
             barChartData.datasets.push(newDataset);
             window.myBar.update();
-            updateLegend();
         });
 
         $('#addData').click(function() {
             if (barChartData.datasets.length > 0) {
-                barChartData.labels.push('data #' + barChartData.labels.length);
+                var month = MONTHS[barChartData.labels.length % MONTHS.length];
+                barChartData.labels.push(month);
 
                 for (var index = 0; index < barChartData.datasets.length; ++index) {
                     //window.myBar.addData(randomScalingFactor(), index);
@@ -130,14 +121,12 @@
                 }
 
                 window.myBar.update();
-                updateLegend();
             }
         });
 
         $('#removeDataset').click(function() {
             barChartData.datasets.splice(0, 1);
             window.myBar.update();
-            updateLegend();
         });
 
         $('#removeData').click(function() {
@@ -148,11 +137,6 @@
             });
 
             window.myBar.update();
-            updateLegend();
-        });
-
-        $('#show').click(function() {
-            document.getElementById('container').style.display = '';
         });
     </script>
 </body>

samples/bubble.html

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

samples/combo-bar-line.html

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

samples/doughnut.html

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

samples/line-customTooltips.html

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

samples/line-legend.html

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

samples/line-logarithmic.html

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

samples/line-multi-axis.html

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

samples/line-skip-points.html

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

samples/line-stacked-area.html

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

samples/line-x-axis-filter.html

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

samples/line.html

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

samples/polar-area.html

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

samples/radar-skip-points.html

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

samples/radar.html

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

samples/scatter-logX.html

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

samples/scatter-multi-axis.html

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

samples/scatter.html

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

samples/timeScale/combo-time-scale.html

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

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

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

samples/timeScale/line-time-scale.html

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

samples/tooltip-hooks.html

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

src/controllers/controller.bar.js

@@ -113,9 +113,10 @@ module.exports = function(Chart) {
 					datasetLabel: this.getDataset().label,
 
 					// Appearance
-					base: this.calculateBarBase(this.index, index),
+					base: reset ? yScalePoint : this.calculateBarBase(this.index, index),
 					width: this.calculateBarWidth(numBars),
 					backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
+					borderSkipped: rectangle.custom && rectangle.custom.borderSkipped ? rectangle.custom.borderSkipped : this.chart.options.elements.rectangle.borderSkipped,
 					borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
 					borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth)
 				}

src/controllers/controller.doughnut.js

@@ -35,16 +35,20 @@ module.exports = function(Chart) {
 		legend: {
 			labels: {
 				generateLabels: function(data) {
-					return data.labels.map(function(label, i) {
-						return {
-							text: label,
-							fillStyle: data.datasets[0].backgroundColor[i],
-							hidden: isNaN(data.datasets[0].data[i]),
+					if (data.labels.length && data.datasets.length) {
+						return data.labels.map(function(label, i) {
+							return {
+								text: label,
+								fillStyle: data.datasets[0].backgroundColor[i],
+								hidden: isNaN(data.datasets[0].data[i]),
 
-							// Extra data used for toggling the correct item
-							index: i
-						};
-					});
+								// Extra data used for toggling the correct item
+								index: i
+							};
+						});
+					} else {
+						return [];
+					}
 				}
 			},
 			onClick: function(e, legendItem) {
@@ -163,16 +167,11 @@ module.exports = function(Chart) {
 		updateElement: function(arc, index, reset) {
 			var centerX = (this.chart.chartArea.left + this.chart.chartArea.right) / 2;
 			var centerY = (this.chart.chartArea.top + this.chart.chartArea.bottom) / 2;
-
-			var resetModel = {
-				x: centerX,
-				y: centerY,
-				startAngle: Math.PI * -0.5, // use - PI / 2 instead of 3PI / 2 to make animations better. It means that we never deal with overflow during the transition function
-				endAngle: Math.PI * -0.5,
-				circumference: (this.chart.options.animation.animateRotate) ? 0 : this.calculateCircumference(this.getDataset().data[index]),
-				outerRadius: (this.chart.options.animation.animateScale) ? 0 : this.outerRadius,
-				innerRadius: (this.chart.options.animation.animateScale) ? 0 : this.innerRadius
-			};
+			var startAngle = Math.PI * -0.5; // non reset case handled later
+			var endAngle = Math.PI * -0.5; // non reset case handled later
+			var circumference = reset && this.chart.options.animation.animateRotate ? 0 : this.calculateCircumference(this.getDataset().data[index]);
+			var innerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.innerRadius;
+			var outerRadius = reset && this.chart.options.animation.animateScale ? 0 : this.outerRadius;
 
 			helpers.extend(arc, {
 				// Utility
@@ -181,12 +180,14 @@ module.exports = function(Chart) {
 				_index: index,
 
 				// Desired view properties
-				_model: reset ? resetModel : {
+				_model: {
 					x: centerX,
 					y: centerY,
-					circumference: this.calculateCircumference(this.getDataset().data[index]),
-					outerRadius: this.outerRadius,
-					innerRadius: this.innerRadius,
+					startAngle: startAngle,
+					endAngle: endAngle,
+					circumference: circumference,
+					outerRadius: outerRadius,
+					innerRadius: innerRadius,
 
 					backgroundColor: arc.custom && arc.custom.backgroundColor ? arc.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.arc.backgroundColor),
 					hoverBackgroundColor: arc.custom && arc.custom.hoverBackgroundColor ? arc.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().hoverBackgroundColor, index, this.chart.options.elements.arc.hoverBackgroundColor),
@@ -197,6 +198,7 @@ module.exports = function(Chart) {
 				}
 			});
 
+			// Set correct angles if not resetting
 			if (!reset) {
 
 				if (index === 0) {
@@ -206,12 +208,6 @@ module.exports = function(Chart) {
 				}
 
 				arc._model.endAngle = arc._model.startAngle + arc._model.circumference;
-
-
-				//Check to see if it's the last arc, if not get the next and update its start angle
-				if (index < this.getDataset().data.length - 1) {
-					this.getDataset().metaData[index + 1]._model.startAngle = arc._model.endAngle;
-				}
 			}
 
 			arc.pivot();

src/controllers/controller.polarArea.js

@@ -36,16 +36,20 @@ module.exports = function(Chart) {
 		legend: {
 			labels: {
 				generateLabels: function(data) {
-					return data.labels.map(function(label, i) {
-						return {
-							text: label,
-							fillStyle: data.datasets[0].backgroundColor[i],
-							hidden: isNaN(data.datasets[0].data[i]),
+					if (data.labels.length && data.datasets.length) {
+						return data.labels.map(function(label, i) {
+							return {
+								text: label,
+								fillStyle: data.datasets[0].backgroundColor[i],
+								hidden: isNaN(data.datasets[0].data[i]),
 
-							// Extra data used for toggling the correct item
-							index: i
-						};
-					});
+								// Extra data used for toggling the correct item
+								index: i
+							};
+						});
+					} else {
+						return [];
+					}
 				}
 			},
 			onClick: function(e, legendItem) {

src/core/core.animation.js

@@ -52,11 +52,11 @@ module.exports = function(Chart) {
 		},
 		// Cancel the animation for a given chart instance
 		cancelAnimation: function(chartInstance) {
-			var index = helpers.findNextWhere(this.animations, function(animationWrapper) {
+			var index = helpers.findIndex(this.animations, function(animationWrapper) {
 				return animationWrapper.chartInstance === chartInstance;
 			});
 
-			if (index) {
+			if (index !== -1) {
 				this.animations.splice(index, 1);
 				chartInstance.animating = false;
 			}
@@ -75,7 +75,8 @@ module.exports = function(Chart) {
 				this.dropFrames = this.dropFrames % 1;
 			}
 
-			for (var i = 0; i < this.animations.length; i++) {
+			var i = 0;
+			while (i < this.animations.length) {
 				if (this.animations[i].animationObject.currentStep === null) {
 					this.animations[i].animationObject.currentStep = 0;
 				}
@@ -98,9 +99,10 @@ module.exports = function(Chart) {
 
 					// executed the last frame. Remove the animation.
 					this.animations[i].chartInstance.animating = false;
+
 					this.animations.splice(i, 1);
-					// Keep the index in place to offset the splice
-					i--;
+				} else {
+					++i;
 				}
 			}
 

src/core/core.controller.js

@@ -58,7 +58,6 @@ module.exports = function(Chart) {
 			this.updateLayout();
 			this.resetElements();
 			this.initToolTip();
-			this.draw();
 			this.update();
 
 			// TODO
@@ -127,7 +126,8 @@ module.exports = function(Chart) {
 			if (this.options.scales) {
 				if (this.options.scales.xAxes && this.options.scales.xAxes.length) {
 					helpers.each(this.options.scales.xAxes, function(xAxisOptions, index) {
-						var ScaleClass = Chart.scaleService.getScaleConstructor(xAxisOptions.type);
+						var xType = helpers.getValueOrDefault(xAxisOptions.type, 'category');
+						var ScaleClass = Chart.scaleService.getScaleConstructor(xType);
 						if (ScaleClass) {
 							var scale = new ScaleClass({
 								ctx: this.chart.ctx,
@@ -144,7 +144,8 @@ module.exports = function(Chart) {
 				if (this.options.scales.yAxes && this.options.scales.yAxes.length) {
 					// Build the y axes
 					helpers.each(this.options.scales.yAxes, function(yAxisOptions, index) {
-						var ScaleClass = Chart.scaleService.getScaleConstructor(yAxisOptions.type);
+						var yType = helpers.getValueOrDefault(yAxisOptions.type, 'linear');
+						var ScaleClass = Chart.scaleService.getScaleConstructor(yType);
 						if (ScaleClass) {
 							var scale = new ScaleClass({
 								ctx: this.chart.ctx,
@@ -309,6 +310,12 @@ module.exports = function(Chart) {
 				this.scale.draw();
 			}
 
+			// Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function
+			this.chart.ctx.save();
+			this.chart.ctx.beginPath();
+			this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
+			this.chart.ctx.clip();
+
 			// Draw each dataset via its respective controller (reversed to support proper line stacking)
 			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
 				if (helpers.isDatasetVisible(dataset)) {
@@ -316,6 +323,9 @@ module.exports = function(Chart) {
 				}
 			}, null, true);
 
+			// Restore from the clipping operation
+			this.chart.ctx.restore();
+
 			// Finally draw the tooltip
 			this.tooltip.transition(easingDecimal).draw();
 		},
@@ -346,11 +356,13 @@ module.exports = function(Chart) {
 			var elementsArray = [];
 
 			var found = (function() {
-				for (var i = 0; i < this.data.datasets.length; i++) {
-					if (helpers.isDatasetVisible(this.data.datasets[i])) {
-						for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
-							if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
-								return this.data.datasets[i].metaData[j];
+				if (this.data.datasets) {
+					for (var i = 0; i < this.data.datasets.length; i++) {
+						if (helpers.isDatasetVisible(this.data.datasets[i])) {
+							for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
+								if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
+									return this.data.datasets[i].metaData[j];
+								}
 							}
 						}
 					}

src/core/core.helpers.js

@@ -136,11 +136,13 @@ module.exports = function(Chart) {
 					// These properties are arrays of items
 					if (base.hasOwnProperty(key)) {
 						helpers.each(value, function(valueObj, index) {
+							var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
+							var axisDefaults = Chart.scaleService.getScaleDefaults(axisType);
 							if (index >= base[key].length || !base[key][index].type) {
-								base[key].push(helpers.configMerge(valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj));
-							} else if (valueObj.type !== base[key][index].type) {
+								base[key].push(helpers.configMerge(axisDefaults, valueObj));
+							} else if (valueObj.type && valueObj.type !== base[key][index].type) {
 								// Type changed. Bring in the new defaults before we bring in valueObj so that valueObj can override the correct scale defaults
-								base[key][index] = helpers.configMerge(base[key][index], valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj);
+								base[key][index] = helpers.configMerge(base[key][index], axisDefaults, valueObj);
 							} else {
 								// Type is the same
 								base[key][index] = helpers.configMerge(base[key][index], valueObj);
@@ -149,7 +151,8 @@ module.exports = function(Chart) {
 					} else {
 						base[key] = [];
 						helpers.each(value, function(valueObj) {
-							base[key].push(helpers.configMerge(valueObj.type ? Chart.scaleService.getScaleDefaults(valueObj.type) : {}, valueObj));
+							var axisType = helpers.getValueOrDefault(valueObj.type, key === 'xAxes' ? 'category' : 'linear');
+							base[key].push(helpers.configMerge(Chart.scaleService.getScaleDefaults(axisType), valueObj));
 						});
 					}
 				} else if (base.hasOwnProperty(key) && typeof base[key] === "object" && base[key] !== null && typeof value === "object") {
@@ -201,6 +204,23 @@ module.exports = function(Chart) {
 
 		return filtered;
 	};
+	helpers.findIndex = function(arrayToSearch, callback, thisArg) {
+		var index = -1;
+		if (Array.prototype.findIndex) {
+			index = arrayToSearch.findIndex(callback, thisArg);
+		} else {
+			for (var i = 0; i < arrayToSearch.length; ++i) {
+				thisArg = thisArg !== undefined ? thisArg : arrayToSearch;
+
+				if (callback.call(thisArg, arrayToSearch[i], i, arrayToSearch)) {
+					index = i;
+					break;
+				}
+			}
+		}
+
+		return index;
+	};
 	helpers.findNextWhere = function(arrayToSearch, filterCallback, startIndex) {
 		// Default to start of the array
 		if (startIndex === undefined || startIndex === null) {
@@ -645,11 +665,17 @@ module.exports = function(Chart) {
 		// Scale mouse coordinates into canvas coordinates
 		// by following the pattern laid out by 'jerryj' in the comments of
 		// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
+		var paddingLeft = parseFloat(helpers.getStyle(canvas, 'padding-left'));
+		var paddingTop = parseFloat(helpers.getStyle(canvas, 'padding-top'));
+		var paddingRight = parseFloat(helpers.getStyle(canvas, 'padding-right'));
+		var paddingBottom = parseFloat(helpers.getStyle(canvas, 'padding-bottom'));
+		var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
+		var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;
 
 		// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
 		// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
-		mouseX = Math.round((mouseX - boundingRect.left) / (boundingRect.right - boundingRect.left) * canvas.width / chart.currentDevicePixelRatio);
-		mouseY = Math.round((mouseY - boundingRect.top) / (boundingRect.bottom - boundingRect.top) * canvas.height / chart.currentDevicePixelRatio);
+		mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvas.width / chart.currentDevicePixelRatio);
+		mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvas.height / chart.currentDevicePixelRatio);
 
 		return {
 			x: mouseX,
@@ -692,30 +718,47 @@ module.exports = function(Chart) {
 			helpers.removeEvent(chartInstance.chart.canvas, eventName, handler);
 		});
 	};
-	helpers.getConstraintWidth = function(domNode) { // returns Number or undefined if no constraint
-		var constrainedWidth;
-		var constrainedWNode = document.defaultView.getComputedStyle(domNode)['max-width'];
-		var constrainedWContainer = document.defaultView.getComputedStyle(domNode.parentNode)['max-width'];
-		var hasCWNode = constrainedWNode !== null && constrainedWNode !== "none";
-		var hasCWContainer = constrainedWContainer !== null && constrainedWContainer !== "none";
 
-		if (hasCWNode || hasCWContainer) {
-			constrainedWidth = Math.min((hasCWNode ? parseInt(constrainedWNode, 10) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseInt(constrainedWContainer, 10) : Number.POSITIVE_INFINITY));
+	// Private helper function to convert max-width/max-height values that may be percentages into a number
+	function parseMaxStyle(styleValue, node, parentProperty) {
+		var valueInPixels;
+		if (typeof(styleValue) === 'string') {
+			valueInPixels = parseInt(styleValue, 10);
+
+			if (styleValue.indexOf('%') != -1) {
+				// percentage * size in dimension
+				valueInPixels = valueInPixels / 100 * node.parentNode[parentProperty];
+			}
+		} else {
+			valueInPixels = styleValue;
 		}
-		return constrainedWidth;
+
+		return valueInPixels;
+	}
+
+	// Private helper to get a constraint dimension
+	// @param domNode : the node to check the constraint on
+	// @param maxStyle : the style that defines the maximum for the direction we are using (max-width / max-height)
+	// @param percentageProperty : property of parent to use when calculating width as a percentage
+	function getConstraintDimension(domNode, maxStyle, percentageProperty) {
+		var constrainedDimension;
+		var constrainedNode = document.defaultView.getComputedStyle(domNode)[maxStyle];
+		var constrainedContainer = document.defaultView.getComputedStyle(domNode.parentNode)[maxStyle];
+		var hasCNode = constrainedNode !== null && constrainedNode !== "none";
+		var hasCContainer = constrainedContainer !== null && constrainedContainer !== "none";
+
+		if (hasCNode || hasCContainer) {
+			constrainedDimension = Math.min((hasCNode ? parseMaxStyle(constrainedNode, domNode, percentageProperty) : Number.POSITIVE_INFINITY), (hasCContainer ? parseMaxStyle(constrainedContainer, domNode.parentNode, percentageProperty) : Number.POSITIVE_INFINITY));
+		}
+		return constrainedDimension;
+	}
+	// returns Number or undefined if no constraint
+	helpers.getConstraintWidth = function(domNode) {
+		return getConstraintDimension(domNode, 'max-width', 'clientWidth');
 	};
 	// returns Number or undefined if no constraint
 	helpers.getConstraintHeight = function(domNode) {
-		var constrainedHeight;
-		var constrainedHNode = document.defaultView.getComputedStyle(domNode)['max-height'];
-		var constrainedHContainer = document.defaultView.getComputedStyle(domNode.parentNode)['max-height'];
-		var hasCHNode = constrainedHNode !== null && constrainedHNode !== "none";
-		var hasCHContainer = constrainedHContainer !== null && constrainedHContainer !== "none";
-
-		if (constrainedHNode || constrainedHContainer) {
-			constrainedHeight = Math.min((hasCHNode ? parseInt(constrainedHNode, 10) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseInt(constrainedHContainer, 10) : Number.POSITIVE_INFINITY));
-		}
-		return constrainedHeight;
+		return getConstraintDimension(domNode, 'max-height', 'clientHeight');
 	};
 	helpers.getMaximumWidth = function(domNode) {
 		var container = domNode.parentNode;
@@ -757,14 +800,14 @@ module.exports = function(Chart) {
 			ctx.canvas.width = width * pixelRatio;
 			ctx.scale(pixelRatio, pixelRatio);
 
-			ctx.canvas.style.width = width + 'px';
-			ctx.canvas.style.height = height + 'px';
-
 			// Store the device pixel ratio so that we can go backwards in `destroy`.
 			// The devicePixelRatio changes with zoom, so there are no guarantees that it is the same
 			// when destroy is called
 			chart.originalDevicePixelRatio = chart.originalDevicePixelRatio || pixelRatio;
 		}
+
+		ctx.canvas.style.width = width + 'px';
+		ctx.canvas.style.height = height + 'px';
 	};
 	//-- Canvas methods
 	helpers.clear = function(chart) {
@@ -799,9 +842,9 @@ module.exports = function(Chart) {
 		var gcLen = cache.garbageCollect.length / 2;
 		if (gcLen > arrayOfStrings.length) {
 			for (var i = 0; i < gcLen; i++) {
-				var key = cache.garbageCollect.shift();
-				delete cache.data[key];
+				delete cache.data[cache.garbageCollect[i]];
 			}
+			cache.garbageCollect.splice(0, gcLen);
 		}
 
 		return longest;

src/core/core.layoutService.js

@@ -32,8 +32,8 @@ module.exports = function(Chart) {
 				return;
 			}
 
-			var xPadding = width > 30 ? 5 : 2;
-			var yPadding = height > 30 ? 5 : 2;
+			var xPadding = 0;
+			var yPadding = 0;
 
 			var leftBoxes = helpers.where(chartInstance.boxes, function(box) {
 				return box.options.position === "left";
@@ -320,4 +320,4 @@ module.exports = function(Chart) {
 			});
 		}
 	};
-};
+};

src/core/core.legend.js

@@ -22,10 +22,6 @@ module.exports = function(Chart) {
 
 		labels: {
 			boxWidth: 40,
-			fontSize: Chart.defaults.global.defaultFontSize,
-			fontStyle: Chart.defaults.global.defaultFontStyle,
-			fontColor: Chart.defaults.global.defaultFontColor,
-			fontFamily: Chart.defaults.global.defaultFontFamily,
 			padding: 10,
 			// Generates labels shown in the legend
 			// Valid properties to return:
@@ -39,7 +35,7 @@ module.exports = function(Chart) {
 			// lineJoin :
 			// lineWidth :
 			generateLabels: function(data) {
-				return data.datasets.map(function(dataset, i) {
+				return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
 					return {
 						text: dataset.label,
 						fillStyle: dataset.backgroundColor,
@@ -54,7 +50,7 @@ module.exports = function(Chart) {
 						// Below is extra data used for toggling the datasets
 						datasetIndex: i
 					};
-				}, this);
+				}, this) : [];
 			}
 		}
 	};
@@ -156,7 +152,10 @@ module.exports = function(Chart) {
 		fit: function() {
 
 			var ctx = this.ctx;
-			var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
+			var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+			var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 			// Reset hit boxes
 			this.legendHitBoxes = [];
@@ -182,16 +181,16 @@ module.exports = function(Chart) {
 
 					// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
 					this.lineWidths = [0];
-					var totalHeight = this.legendItems.length ? this.options.labels.fontSize + (this.options.labels.padding) : 0;
+					var totalHeight = this.legendItems.length ? fontSize + (this.options.labels.padding) : 0;
 
 					ctx.textAlign = "left";
 					ctx.textBaseline = 'top';
 					ctx.font = labelFont;
 
 					helpers.each(this.legendItems, function(legendItem, i) {
-						var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(legendItem.text).width;
+						var width = this.options.labels.boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 						if (this.lineWidths[this.lineWidths.length - 1] + width + this.options.labels.padding >= this.width) {
-							totalHeight += this.options.labels.fontSize + (this.options.labels.padding);
+							totalHeight += fontSize + (this.options.labels.padding);
 							this.lineWidths[this.lineWidths.length] = this.left;
 						}
 
@@ -200,7 +199,7 @@ module.exports = function(Chart) {
 							left: 0,
 							top: 0,
 							width: width,
-							height: this.options.labels.fontSize
+							height: fontSize
 						};
 
 						this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding;
@@ -234,7 +233,11 @@ module.exports = function(Chart) {
 					line: 0
 				};
 
-				var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
+				var fontColor = helpers.getValueOrDefault(this.options.labels.fontColor, Chart.defaults.global.defaultFontColor);
+				var fontSize = helpers.getValueOrDefault(this.options.labels.fontSize, Chart.defaults.global.defaultFontSize);
+				var fontStyle = helpers.getValueOrDefault(this.options.labels.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var fontFamily = helpers.getValueOrDefault(this.options.labels.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var labelFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 				// Horizontal
 				if (this.isHorizontal()) {
@@ -242,16 +245,16 @@ module.exports = function(Chart) {
 					ctx.textAlign = "left";
 					ctx.textBaseline = 'top';
 					ctx.lineWidth = 0.5;
-					ctx.strokeStyle = this.options.labels.fontColor; // for strikethrough effect
-					ctx.fillStyle = this.options.labels.fontColor; // render in correct colour
+					ctx.strokeStyle = fontColor; // for strikethrough effect
+					ctx.fillStyle = fontColor; // render in correct colour
 					ctx.font = labelFont;
 
 					helpers.each(this.legendItems, function(legendItem, i) {
 						var textWidth = ctx.measureText(legendItem.text).width;
-						var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + textWidth;
+						var width = this.options.labels.boxWidth + (fontSize / 2) + textWidth;
 
 						if (cursor.x + width >= this.width) {
-							cursor.y += this.options.labels.fontSize + (this.options.labels.padding);
+							cursor.y += fontSize + (this.options.labels.padding);
 							cursor.line++;
 							cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2);
 						}
@@ -276,8 +279,8 @@ module.exports = function(Chart) {
 						}
 
 						// Draw the box
-						ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
-						ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
+						ctx.strokeRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
+						ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, fontSize);
 
 						ctx.restore();
 
@@ -285,14 +288,14 @@ module.exports = function(Chart) {
 						this.legendHitBoxes[i].top = cursor.y;
 
 						// Fill the actual label
-						ctx.fillText(legendItem.text, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y);
+						ctx.fillText(legendItem.text, this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y);
 
 						if (legendItem.hidden) {
 							// Strikethrough the text if hidden
 							ctx.beginPath();
 							ctx.lineWidth = 2;
-							ctx.moveTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y + (this.options.labels.fontSize / 2));
-							ctx.lineTo(this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x + textWidth, cursor.y + (this.options.labels.fontSize / 2));
+							ctx.moveTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x, cursor.y + (fontSize / 2));
+							ctx.lineTo(this.options.labels.boxWidth + (fontSize / 2) + cursor.x + textWidth, cursor.y + (fontSize / 2));
 							ctx.stroke();
 						}
 

src/core/core.scale.js

@@ -21,11 +21,6 @@ module.exports = function(Chart) {
 
 		// scale label
 		scaleLabel: {
-			fontColor: Chart.defaults.global.defaultFontColor,
-			fontFamily: Chart.defaults.global.defaultFontFamily,
-			fontSize: Chart.defaults.global.defaultFontSize,
-			fontStyle: Chart.defaults.global.defaultFontStyle,
-
 			// actual label
 			labelString: '',
 
@@ -36,10 +31,6 @@ module.exports = function(Chart) {
 		// label settings
 		ticks: {
 			beginAtZero: false,
-			fontSize: Chart.defaults.global.defaultFontSize,
-			fontStyle: Chart.defaults.global.defaultFontStyle,
-			fontColor: Chart.defaults.global.defaultFontColor,
-			fontFamily: Chart.defaults.global.defaultFontFamily,
 			maxRotation: 90,
 			mirror: false,
 			padding: 10,
@@ -187,8 +178,11 @@ module.exports = function(Chart) {
 		calculateTickRotation: function() {
 			//Get the width of each grid by calculating the difference
 			//between x offsets between 0 and 1.
-			var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-			this.ctx.font = labelFont;
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+			this.ctx.font = tickLabelFont;
 
 			var firstWidth = this.ctx.measureText(this.ticks[0]).width;
 			var lastWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
@@ -206,7 +200,7 @@ module.exports = function(Chart) {
 					if (!this.longestTextCache) {
 						this.longestTextCache = {};
 					}
-					var originalLabelWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache);
+					var originalLabelWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
 					var labelWidth = originalLabelWidth;
 					var cosRotation;
 					var sinRotation;
@@ -223,11 +217,11 @@ module.exports = function(Chart) {
 						firstRotated = cosRotation * firstWidth;
 
 						// We're right aligning the text now.
-						if (firstRotated + this.options.ticks.fontSize / 2 > this.yLabelWidth) {
-							this.paddingLeft = firstRotated + this.options.ticks.fontSize / 2;
+						if (firstRotated + tickFontSize / 2 > this.yLabelWidth) {
+							this.paddingLeft = firstRotated + tickFontSize / 2;
 						}
 
-						this.paddingRight = this.options.ticks.fontSize / 2;
+						this.paddingRight = tickFontSize / 2;
 
 						if (sinRotation * originalLabelWidth > this.maxHeight) {
 							// go back one step
@@ -262,6 +256,16 @@ module.exports = function(Chart) {
 				height: 0
 			};
 
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+			var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+			var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
+
 			// Width
 			if (this.isHorizontal()) {
 				// subtract the margins to line up with the chartArea if we are a full width scale
@@ -280,34 +284,29 @@ module.exports = function(Chart) {
 			// Are we showing a title for the scale?
 			if (this.options.scaleLabel.display) {
 				if (this.isHorizontal()) {
-					this.minSize.height += (this.options.scaleLabel.fontSize * 1.5);
+					this.minSize.height += (scaleLabelFontSize * 1.5);
 				} else {
-					this.minSize.width += (this.options.scaleLabel.fontSize * 1.5);
+					this.minSize.width += (scaleLabelFontSize * 1.5);
 				}
 			}
 
 			if (this.options.ticks.display && this.options.display) {
 				// Don't bother fitting the ticks if we are not showing them
-				var labelFont = helpers.fontString(this.options.ticks.fontSize,
-					this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-
 				if (!this.longestTextCache) {
 					this.longestTextCache = {};
 				}
 
-				var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks, this.longestTextCache);
+				var largestTextWidth = helpers.longestText(this.ctx, tickLabelFont, this.ticks, this.longestTextCache);
 
 				if (this.isHorizontal()) {
 					// A horizontal axis is more constrained by the height.
 					this.longestLabelWidth = largestTextWidth;
 
 					// TODO - improve this calculation
-					var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * this.options.ticks.fontSize;
+					var labelHeight = (Math.sin(helpers.toRadians(this.labelRotation)) * this.longestLabelWidth) + 1.5 * tickFontSize;
 
 					this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
-
-					labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
-					this.ctx.font = labelFont;
+					this.ctx.font = tickLabelFont;
 
 					var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
 					var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
@@ -317,7 +316,7 @@ module.exports = function(Chart) {
 					var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
 					var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
 					this.paddingLeft = this.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
-					this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (this.options.ticks.fontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
+					this.paddingRight = this.labelRotation !== 0 ? (sinRotation * (tickFontSize / 2)) + 3 : lastLabelWidth / 2 + 3; // when rotated
 				} else {
 					// A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
 					var maxLabelWidth = this.maxWidth - this.minSize.width;
@@ -335,8 +334,8 @@ module.exports = function(Chart) {
 						this.minSize.width = this.maxWidth;
 					}
 
-					this.paddingTop = this.options.ticks.fontSize / 2;
-					this.paddingBottom = this.options.ticks.fontSize / 2;
+					this.paddingTop = tickFontSize / 2;
+					this.paddingBottom = tickFontSize / 2;
 				}
 			}
 
@@ -447,14 +446,25 @@ module.exports = function(Chart) {
 					maxTicks = this.options.ticks.maxTicksLimit;
 				}
 
-				// Make sure we draw text in the correct color and font
-				this.ctx.fillStyle = this.options.ticks.fontColor;
-				var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+				var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+				var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+
+				var scaleLabelFontColor = helpers.getValueOrDefault(this.options.scaleLabel.fontColor, Chart.defaults.global.defaultFontColor);
+				var scaleLabelFontSize = helpers.getValueOrDefault(this.options.scaleLabel.fontSize, Chart.defaults.global.defaultFontSize);
+				var scaleLabelFontStyle = helpers.getValueOrDefault(this.options.scaleLabel.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var scaleLabelFontFamily = helpers.getValueOrDefault(this.options.scaleLabel.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var scaleLabelFont = helpers.fontString(scaleLabelFontSize, scaleLabelFontStyle, scaleLabelFontFamily);
 
 				var cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
 				var sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
 				var longestRotatedLabel = this.longestLabelWidth * cosRotation;
-				var rotatedLabelHeight = this.options.ticks.fontSize * sinRotation;
+				var rotatedLabelHeight = tickFontSize * sinRotation;
+
+				// Make sure we draw text in the correct color and font
+				this.ctx.fillStyle = tickFontColor;
 
 				if (this.isHorizontal()) {
 					setContextLineSettings = true;
@@ -466,10 +476,6 @@ module.exports = function(Chart) {
 						skipRatio = 1 + Math.floor((((longestRotatedLabel / 2) + this.options.ticks.autoSkipPadding) * this.ticks.length) / (this.width - (this.paddingLeft + this.paddingRight)));
 					}
 
-					if (!useAutoskipper) {
-						skipRatio = false;
-					}
-
 					// if they defined a max number of ticks,
 					// increase skipRatio until that number is met
 					if (maxTicks && this.ticks.length > maxTicks) {
@@ -481,6 +487,10 @@ module.exports = function(Chart) {
 						}
 					}
 
+					if (!useAutoskipper) {
+						skipRatio = false;
+					}
+
 					helpers.each(this.ticks, function(label, index) {
 						// Blank ticks
 						var isLastTick = this.ticks.length === index + 1;
@@ -529,7 +539,7 @@ module.exports = function(Chart) {
 							this.ctx.save();
 							this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.options.position === "top" ? this.bottom - 10 : this.top + 10);
 							this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
-							this.ctx.font = labelFont;
+							this.ctx.font = tickLabelFont;
 							this.ctx.textAlign = (isRotated) ? "right" : "center";
 							this.ctx.textBaseline = (isRotated) ? "middle" : this.options.position === "top" ? "bottom" : "top";
 							this.ctx.fillText(label, 0, 0);
@@ -541,11 +551,11 @@ module.exports = function(Chart) {
 						// Draw the scale label
 						this.ctx.textAlign = "center";
 						this.ctx.textBaseline = 'middle';
-						this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
-						this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
+						this.ctx.fillStyle = scaleLabelFontColor; // render in correct colour
+						this.ctx.font = scaleLabelFont;
 
 						scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
-						scaleLabelY = this.options.position === 'bottom' ? this.bottom - (this.options.scaleLabel.fontSize / 2) : this.top + (this.options.scaleLabel.fontSize / 2);
+						scaleLabelY = this.options.position === 'bottom' ? this.bottom - (scaleLabelFontSize / 2) : this.top + (scaleLabelFontSize / 2);
 
 						this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
 					}
@@ -622,7 +632,7 @@ module.exports = function(Chart) {
 
 							this.ctx.translate(xLabelValue, yLabelValue);
 							this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
-							this.ctx.font = labelFont;
+							this.ctx.font = tickLabelFont;
 							this.ctx.textBaseline = "middle";
 							this.ctx.fillText(label, 0, 0);
 							this.ctx.restore();
@@ -631,7 +641,7 @@ module.exports = function(Chart) {
 
 					if (this.options.scaleLabel.display) {
 						// Draw the scale label
-						scaleLabelX = this.options.position === 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2);
+						scaleLabelX = this.options.position === 'left' ? this.left + (scaleLabelFontSize / 2) : this.right - (scaleLabelFontSize / 2);
 						scaleLabelY = this.top + ((this.bottom - this.top) / 2);
 						var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
 
@@ -639,8 +649,8 @@ module.exports = function(Chart) {
 						this.ctx.translate(scaleLabelX, scaleLabelY);
 						this.ctx.rotate(rotation);
 						this.ctx.textAlign = "center";
-						this.ctx.fillStyle = this.options.scaleLabel.fontColor; // render in correct colour
-						this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
+						this.ctx.fillStyle =scaleLabelFontColor; // render in correct colour
+						this.ctx.font = scaleLabelFont;
 						this.ctx.textBaseline = 'middle';
 						this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);
 						this.ctx.restore();

src/core/core.title.js

@@ -9,9 +9,6 @@ module.exports = function(Chart) {
 		position: 'top',
 		fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
 
-		fontColor: Chart.defaults.global.defaultFontColor,
-		fontFamily: Chart.defaults.global.defaultFontFamily,
-		fontSize: Chart.defaults.global.defaultFontSize,
 		fontStyle: 'bold',
 		padding: 10,
 
@@ -107,7 +104,10 @@ module.exports = function(Chart) {
 		fit: function() {
 
 			var ctx = this.ctx;
-			var titleFont = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
+			var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+			var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
 
 			// Width
 			if (this.isHorizontal()) {
@@ -128,11 +128,11 @@ module.exports = function(Chart) {
 
 				// Title
 				if (this.options.display) {
-					this.minSize.height += this.options.fontSize + (this.options.padding * 2);
+					this.minSize.height += fontSize + (this.options.padding * 2);
 				}
 			} else {
 				if (this.options.display) {
-					this.minSize.width += this.options.fontSize + (this.options.padding * 2);
+					this.minSize.width += fontSize + (this.options.padding * 2);
 				}
 			}
 
@@ -153,41 +153,39 @@ module.exports = function(Chart) {
 				var ctx = this.ctx;
 				var titleX, titleY;
 
+				var fontColor = helpers.getValueOrDefault(this.options.fontColor, Chart.defaults.global.defaultFontColor);
+				var fontSize = helpers.getValueOrDefault(this.options.fontSize, Chart.defaults.global.defaultFontSize);
+				var fontStyle = helpers.getValueOrDefault(this.options.fontStyle, Chart.defaults.global.defaultFontStyle);
+				var fontFamily = helpers.getValueOrDefault(this.options.fontFamily, Chart.defaults.global.defaultFontFamily);
+				var titleFont = helpers.fontString(fontSize, fontStyle, fontFamily);
+
+				ctx.fillStyle = fontColor; // render in correct colour
+				ctx.font = titleFont;
+
 				// Horizontal
 				if (this.isHorizontal()) {
 					// Title
-					if (this.options.display) {
+					ctx.textAlign = "center";
+					ctx.textBaseline = 'middle';
 
-						ctx.textAlign = "center";
-						ctx.textBaseline = 'middle';
-						ctx.fillStyle = this.options.fontColor; // render in correct colour
-						ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
+					titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
+					titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
 
-						titleX = this.left + ((this.right - this.left) / 2); // midpoint of the width
-						titleY = this.top + ((this.bottom - this.top) / 2); // midpoint of the height
-
-						ctx.fillText(this.options.text, titleX, titleY);
-					}
+					ctx.fillText(this.options.text, titleX, titleY);
 				} else {
 
 					// Title
-					if (this.options.display) {
-						titleX = this.options.position === 'left' ? this.left + (this.options.fontSize / 2) : this.right - (this.options.fontSize / 2);
-						titleY = this.top + ((this.bottom - this.top) / 2);
-						var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
-
-						ctx.save();
-						ctx.translate(titleX, titleY);
-						ctx.rotate(rotation);
-						ctx.textAlign = "center";
-						ctx.fillStyle = this.options.fontColor; // render in correct colour
-						ctx.font = helpers.fontString(this.options.fontSize, this.options.fontStyle, this.options.fontFamily);
-						ctx.textBaseline = 'middle';
-						ctx.fillText(this.options.text, 0, 0);
-						ctx.restore();
-
-					}
+					titleX = this.options.position === 'left' ? this.left + (fontSize / 2) : this.right - (fontSize / 2);
+					titleY = this.top + ((this.bottom - this.top) / 2);
+					var rotation = this.options.position === 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
 
+					ctx.save();
+					ctx.translate(titleX, titleY);
+					ctx.rotate(rotation);
+					ctx.textAlign = "center";
+					ctx.textBaseline = 'middle';
+					ctx.fillText(this.options.text, 0, 0);
+					ctx.restore();
 				}
 			}
 		}

src/core/core.tooltip.js

@@ -9,21 +9,14 @@ module.exports = function(Chart) {
 		custom: null,
 		mode: 'single',
 		backgroundColor: "rgba(0,0,0,0.8)",
-		titleFontFamily: Chart.defaults.global.defaultFontFamily,
-		titleFontSize: Chart.defaults.global.defaultFontSize,
 		titleFontStyle: "bold",
 		titleSpacing: 2,
 		titleMarginBottom: 6,
 		titleColor: "#fff",
 		titleAlign: "left",
-		bodyFontFamily: Chart.defaults.global.defaultFontFamily,
-		bodyFontSize: Chart.defaults.global.defaultFontSize,
-		bodyFontStyle: Chart.defaults.global.defaultFontStyle,
 		bodySpacing: 2,
 		bodyColor: "#fff",
 		bodyAlign: "left",
-		footerFontFamily: Chart.defaults.global.defaultFontFamily,
-		footerFontSize: Chart.defaults.global.defaultFontSize,
 		footerFontStyle: "bold",
 		footerSpacing: 2,
 		footerMarginTop: 6,
@@ -31,6 +24,8 @@ module.exports = function(Chart) {
 		footerAlign: "left",
 		yPadding: 6,
 		xPadding: 6,
+		yAlign : 'center',
+		xAlign : 'center',
 		caretSize: 5,
 		cornerRadius: 6,
 		multiKeyBackground: '#fff',
@@ -95,29 +90,31 @@ module.exports = function(Chart) {
 					// Positioning
 					xPadding: options.tooltips.xPadding,
 					yPadding: options.tooltips.yPadding,
+					xAlign : options.tooltips.yAlign,
+					yAlign : options.tooltips.xAlign,
 
 					// Body
 					bodyColor: options.tooltips.bodyColor,
-					_bodyFontFamily: options.tooltips.bodyFontFamily,
-					_bodyFontStyle: options.tooltips.bodyFontStyle,
+					_bodyFontFamily: helpers.getValueOrDefault(options.tooltips.bodyFontFamily, Chart.defaults.global.defaultFontFamily),
+					_bodyFontStyle: helpers.getValueOrDefault(options.tooltips.bodyFontStyle, Chart.defaults.global.defaultFontStyle),
 					_bodyAlign: options.tooltips.bodyAlign,
-					bodyFontSize: options.tooltips.bodyFontSize,
+					bodyFontSize: helpers.getValueOrDefault(options.tooltips.bodyFontSize, Chart.defaults.global.defaultFontSize),
 					bodySpacing: options.tooltips.bodySpacing,
 
 					// Title
 					titleColor: options.tooltips.titleColor,
-					_titleFontFamily: options.tooltips.titleFontFamily,
-					_titleFontStyle: options.tooltips.titleFontStyle,
-					titleFontSize: options.tooltips.titleFontSize,
+					_titleFontFamily: helpers.getValueOrDefault(options.tooltips.titleFontFamily, Chart.defaults.global.defaultFontFamily),
+					_titleFontStyle: helpers.getValueOrDefault(options.tooltips.titleFontStyle, Chart.defaults.global.defaultFontStyle),
+					titleFontSize: helpers.getValueOrDefault(options.tooltips.titleFontSize, Chart.defaults.global.defaultFontSize),
 					_titleAlign: options.tooltips.titleAlign,
 					titleSpacing: options.tooltips.titleSpacing,
 					titleMarginBottom: options.tooltips.titleMarginBottom,
 
 					// Footer
 					footerColor: options.tooltips.footerColor,
-					_footerFontFamily: options.tooltips.footerFontFamily,
-					_footerFontStyle: options.tooltips.footerFontStyle,
-					footerFontSize: options.tooltips.footerFontSize,
+					_footerFontFamily: helpers.getValueOrDefault(options.tooltips.footerFontFamily, Chart.defaults.global.defaultFontFamily),
+					_footerFontStyle: helpers.getValueOrDefault(options.tooltips.footerFontStyle, Chart.defaults.global.defaultFontStyle),
+					footerFontSize: helpers.getValueOrDefault(options.tooltips.footerFontSize, Chart.defaults.global.defaultFontSize),
 					_footerAlign: options.tooltips.footerAlign,
 					footerSpacing: options.tooltips.footerSpacing,
 					footerMarginTop: options.tooltips.footerMarginTop,
@@ -340,8 +337,6 @@ module.exports = function(Chart) {
 			return size;
 		},
 		determineAlignment: function determineAlignment(size) {
-			this._model.xAlign = this._model.yAlign = "center";
-
 			if (this._model.y < size.height) {
 				this._model.yAlign = 'top';
 			} else if (this._model.y > (this._chart.height - size.height)) {
@@ -483,7 +478,8 @@ module.exports = function(Chart) {
 				}
 			}
 
-			ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString();
+			var bgColor = helpers.color(vm.backgroundColor);
+			ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
 			ctx.beginPath();
 			ctx.moveTo(x1, y1);
 			ctx.lineTo(x2, y2);
@@ -495,7 +491,9 @@ module.exports = function(Chart) {
 			if (vm.title.length) {
 				ctx.textAlign = vm._titleAlign;
 				ctx.textBaseline = "top";
-				ctx.fillStyle = helpers.color(vm.titleColor).alpha(opacity).rgbString();
+				
+				var titleColor = helpers.color(vm.titleColor);
+				ctx.fillStyle = titleColor.alpha(opacity * titleColor.alpha()).rgbString();
 				ctx.font = helpers.fontString(vm.titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
 
 				helpers.each(vm.title, function(title, i) {
@@ -511,7 +509,9 @@ module.exports = function(Chart) {
 		drawBody: function drawBody(pt, vm, ctx, opacity) {
 			ctx.textAlign = vm._bodyAlign;
 			ctx.textBaseline = "top";
-			ctx.fillStyle = helpers.color(vm.bodyColor).alpha(opacity).rgbString();
+
+			var bodyColor = helpers.color(vm.bodyColor);
+			ctx.fillStyle = bodyColor.alpha(opacity * bodyColor.alpha()).rgbString();
 			ctx.font = helpers.fontString(vm.bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
 			// Before Body
@@ -558,7 +558,9 @@ module.exports = function(Chart) {
 
 				ctx.textAlign = vm._footerAlign;
 				ctx.textBaseline = "top";
-				ctx.fillStyle = helpers.color(vm.footerColor).alpha(opacity).rgbString();
+				
+				var footerColor = helpers.color(vm.footerColor);
+				ctx.fillStyle = footerColor.alpha(opacity * footerColor.alpha()).rgbString();
 				ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
 
 				helpers.each(vm.footer, function(footer) {
@@ -587,7 +589,8 @@ module.exports = function(Chart) {
 
 			if (this._options.tooltips.enabled) {
 				// Draw Background
-				ctx.fillStyle = helpers.color(vm.backgroundColor).alpha(opacity).rgbString();
+				var bgColor = helpers.color(vm.backgroundColor);
+				ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
 				helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
 				ctx.fill();
 

src/elements/element.rectangle.js

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

src/scales/scale.category.js

@@ -10,7 +10,24 @@ module.exports = function(Chart) {
 
 	var DatasetScale = Chart.Scale.extend({
 		buildTicks: function(index) {
-			this.ticks = this.chart.data.labels;
+			this.startIndex = 0;
+			this.endIndex = this.chart.data.labels.length;
+			var findIndex;
+
+			if (this.options.ticks.min !== undefined) {
+				// user specified min value
+				findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.min);
+				this.startIndex = findIndex !== -1 ? findIndex : this.startIndex;
+			}
+
+			if (this.options.ticks.max !== undefined) {
+				// user specified max value
+				findIndex = helpers.indexOf(this.chart.data.labels, this.options.ticks.max);
+				this.endIndex = findIndex !== -1 ? findIndex : this.endIndex;
+			}
+
+			// If we are viewing some subset of labels, slice the original array
+			this.ticks = (this.startIndex === 0 && this.endIndex === this.chart.data.labels.length) ? this.chart.data.labels : this.chart.data.labels.slice(this.startIndex, this.endIndex + 1);
 		},
 
 		getLabelForIndex: function(index, datasetIndex) {
@@ -19,10 +36,13 @@ module.exports = function(Chart) {
 
 		// Used to get data value locations.  Value can either be an index or a numerical value
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
+			// 1 is added because we need the length but we have the indexes
+			var offsetAmt = Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
+
 			if (this.isHorizontal()) {
 				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-				var valueWidth = innerWidth / Math.max((this.chart.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-				var widthOffset = (valueWidth * index) + this.paddingLeft;
+				var valueWidth = innerWidth / offsetAmt;
+				var widthOffset = (valueWidth * (index - this.startIndex)) + this.paddingLeft;
 
 				if (this.options.gridLines.offsetGridLines && includeOffset) {
 					widthOffset += (valueWidth / 2);
@@ -31,8 +51,8 @@ module.exports = function(Chart) {
 				return this.left + Math.round(widthOffset);
 			} else {
 				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-				var valueHeight = innerHeight / Math.max((this.chart.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
-				var heightOffset = (valueHeight * index) + this.paddingTop;
+				var valueHeight = innerHeight / offsetAmt;
+				var heightOffset = (valueHeight * (index - this.startIndex)) + this.paddingTop;
 
 				if (this.options.gridLines.offsetGridLines && includeOffset) {
 					heightOffset += (valueHeight / 2);
@@ -40,6 +60,9 @@ module.exports = function(Chart) {
 
 				return this.top + Math.round(heightOffset);
 			}
+		},
+		getPixelForTick: function(index, includeOffset) {
+			return this.getPixelForValue(this.ticks[index], index + this.startIndex, null, includeOffset);
 		}
 	});
 

src/scales/scale.linear.js

@@ -162,12 +162,11 @@ module.exports = function(Chart) {
 			var maxTicks;
 
 			if (this.isHorizontal()) {
-				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-					Math.ceil(this.width / 50));
+				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.width / 50));
 			} else {
 				// The factor of 2 used to scale the font size has been experimentally determined.
-				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-					Math.ceil(this.height / (2 * this.options.ticks.fontSize)));
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+				maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.height / (2 * tickFontSize)));
 			}
 
 			// Make sure we always have at least 2 ticks
@@ -178,9 +177,9 @@ module.exports = function(Chart) {
 			// for details.
 
 			var spacing;
-			var fixedStepSizeSet = this.options.ticks.fixedStepSize && this.options.ticks.fixedStepSize > 0;
+			var fixedStepSizeSet = (this.options.ticks.fixedStepSize && this.options.ticks.fixedStepSize > 0) || (this.options.ticks.stepSize && this.options.ticks.stepSize > 0);
 			if (fixedStepSizeSet) {
-				spacing = this.options.ticks.fixedStepSize;
+				spacing = helpers.getValueOrDefault(this.options.ticks.fixedStepSize, this.options.ticks.stepSize);
 			} else {
 				var niceRange = helpers.niceNum(this.max - this.min, false);
 				spacing = helpers.niceNum(niceRange / (maxTicks - 1), true);
@@ -222,13 +221,16 @@ module.exports = function(Chart) {
 				this.start = this.min;
 				this.end = this.max;
 			}
-
-			this.ticksAsNumbers = this.ticks.slice(); // do after we potentially reverse the ticks
-			this.zeroLineIndex = this.ticks.indexOf(0);
 		},
 		getLabelForIndex: function(index, datasetIndex) {
 			return +this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
 		},
+		convertTicksToLabels: function() {
+			this.ticksAsNumbers = this.ticks.slice();
+			this.zeroLineIndex = this.ticks.indexOf(0);
+
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
+		},
 		// Utils
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
 			// This must be called after fit has been run so that

src/scales/scale.logarithmic.js

@@ -103,7 +103,7 @@ module.exports = function(Chart) {
 		buildTicks: function() {
 			// Reset the ticks array. Later on, we will draw a grid line at these positions
 			// The array simply contains the numerical value of the spots where ticks will be
-			this.tickValues = [];
+			this.ticks = [];
 
 			// Figure out what the max number of ticks we can support it is based on the size of
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
@@ -113,7 +113,7 @@ module.exports = function(Chart) {
 			var tickVal = this.options.ticks.min !== undefined ? this.options.ticks.min : Math.pow(10, Math.floor(helpers.log10(this.min)));
 
 			while (tickVal < this.max) {
-				this.tickValues.push(tickVal);
+				this.ticks.push(tickVal);
 
 				var exp = Math.floor(helpers.log10(tickVal));
 				var significand = Math.floor(tickVal / Math.pow(10, exp)) + 1;
@@ -127,20 +127,20 @@ module.exports = function(Chart) {
 			}
 
 			var lastTick = this.options.ticks.max !== undefined ? this.options.ticks.max : tickVal;
-			this.tickValues.push(lastTick);
+			this.ticks.push(lastTick);
 
 			if (this.options.position === "left" || this.options.position === "right") {
 				// We are in a vertical orientation. The top value is the highest. So reverse the array
-				this.tickValues.reverse();
+				this.ticks.reverse();
 			}
 
 			// At this point, we need to update our max and min given the tick values since we have expanded the
 			// range of the scale
-			this.max = helpers.max(this.tickValues);
-			this.min = helpers.min(this.tickValues);
+			this.max = helpers.max(this.ticks);
+			this.min = helpers.min(this.ticks);
 
 			if (this.options.ticks.reverse) {
-				this.tickValues.reverse();
+				this.ticks.reverse();
 
 				this.start = this.max;
 				this.end = this.min;
@@ -148,8 +148,11 @@ module.exports = function(Chart) {
 				this.start = this.min;
 				this.end = this.max;
 			}
+		},
+		convertTicksToLabels: function() {
+			this.tickValues = this.ticks.slice();
 
-			this.ticks = this.tickValues.slice();
+			Chart.Scale.prototype.convertTicksToLabels.call(this);
 		},
 		// Get the correct tooltip label
 		getLabelForIndex: function(index, datasetIndex) {

src/scales/scale.radialLinear.js

@@ -34,18 +34,9 @@ module.exports = function(Chart) {
 		},
 
 		pointLabels: {
-			//String - Point label font declaration
-			fontFamily: Chart.defaults.global.defaultFontFamily,
-
-			//String - Point label font weight
-			fontStyle: Chart.defaults.global.defaultFontStyle,
-
 			//Number - Point label font size in pixels
 			fontSize: 10,
 
-			//String - Point label font colour
-			fontColor: Chart.defaults.global.defaultFontColor,
-
 			//Function - Used to convert point labels
 			callback: function(label) {
 				return label;
@@ -65,7 +56,8 @@ module.exports = function(Chart) {
 			this.yCenter = Math.round(this.height / 2);
 
 			var minSize = helpers.min([this.height, this.width]);
-			this.drawingArea = (this.options.display) ? (minSize / 2) - (this.options.ticks.fontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			this.drawingArea = (this.options.display) ? (minSize / 2) - (tickFontSize / 2 + this.options.ticks.backdropPaddingY) : (minSize / 2);
 		},
 		determineDataLimits: function() {
 			this.min = null;
@@ -136,8 +128,8 @@ module.exports = function(Chart) {
 			// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
 			// We also limit the maximum number of ticks to 11 which gives a nice 10 squares on
 			// the graph
-			var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11,
-				Math.ceil(this.drawingArea / (1.5 * this.options.ticks.fontSize)));
+			var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+			var maxTicks = Math.min(this.options.ticks.maxTicksLimit ? this.options.ticks.maxTicksLimit : 11, Math.ceil(this.drawingArea / (1.5 * tickFontSize)));
 			maxTicks = Math.max(2, maxTicks); // Make sure we always have at least 2 ticks
 
 			// To get a "nice" value for the tick spacing, we will use the appropriately named
@@ -213,10 +205,14 @@ module.exports = function(Chart) {
 			 * https://dl.dropboxusercontent.com/u/34601363/yeahscience.gif
 			 */
 
+			var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+			var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+			var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+			var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
 
 			// Get maximum radius of the polygon. Either half the height (minus the text width) or half the width.
 			// Use this to calculate the offset + change. - Make sure L/R protrusion is at least 0 to stop issues with centre points
-			var largestPossibleRadius = helpers.min([(this.height / 2 - this.options.pointLabels.fontSize - 5), this.width / 2]),
+			var largestPossibleRadius = helpers.min([(this.height / 2 - pointLabelFontSize - 5), this.width / 2]),
 				pointPosition,
 				i,
 				textWidth,
@@ -232,7 +228,8 @@ module.exports = function(Chart) {
 				radiusReductionRight,
 				radiusReductionLeft,
 				maxWidthRadius;
-			this.ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
+			this.ctx.font = pointLabeFont;
+
 			for (i = 0; i < this.getValueCount(); i++) {
 				// 5px to space the text slightly out - similar to what we do in the draw function.
 				pointPosition = this.getPointPosition(i, largestPossibleRadius);
@@ -357,22 +354,27 @@ module.exports = function(Chart) {
 						}
 
 						if (this.options.ticks.display) {
-							ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
+							var tickFontColor = helpers.getValueOrDefault(this.options.ticks.fontColor, Chart.defaults.global.defaultFontColor);
+							var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
+							var tickFontStyle = helpers.getValueOrDefault(this.options.ticks.fontStyle, Chart.defaults.global.defaultFontStyle);
+							var tickFontFamily = helpers.getValueOrDefault(this.options.ticks.fontFamily, Chart.defaults.global.defaultFontFamily);
+							var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);
+							ctx.font = tickLabelFont;
 
 							if (this.options.ticks.showLabelBackdrop) {
 								var labelWidth = ctx.measureText(label).width;
 								ctx.fillStyle = this.options.ticks.backdropColor;
 								ctx.fillRect(
 									this.xCenter - labelWidth / 2 - this.options.ticks.backdropPaddingX,
-									yHeight - this.options.ticks.fontSize / 2 - this.options.ticks.backdropPaddingY,
+									yHeight - tickFontSize / 2 - this.options.ticks.backdropPaddingY,
 									labelWidth + this.options.ticks.backdropPaddingX * 2,
-									this.options.ticks.fontSize + this.options.ticks.backdropPaddingY * 2
+									tickFontSize + this.options.ticks.backdropPaddingY * 2
 								);
 							}
 
 							ctx.textAlign = 'center';
 							ctx.textBaseline = "middle";
-							ctx.fillStyle = this.options.ticks.fontColor;
+							ctx.fillStyle = tickFontColor;
 							ctx.fillText(label, this.xCenter, yHeight);
 						}
 					}
@@ -393,8 +395,15 @@ module.exports = function(Chart) {
 						}
 						// Extra 3px out for some label spacing
 						var pointLabelPosition = this.getPointPosition(i, this.getDistanceFromCenterForValue(this.options.reverse ? this.min : this.max) + 5);
-						ctx.font = helpers.fontString(this.options.pointLabels.fontSize, this.options.pointLabels.fontStyle, this.options.pointLabels.fontFamily);
-						ctx.fillStyle = this.options.pointLabels.fontColor;
+						
+						var pointLabelFontColor = helpers.getValueOrDefault(this.options.pointLabels.fontColor, Chart.defaults.global.defaultFontColor);
+						var pointLabelFontSize = helpers.getValueOrDefault(this.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
+						var pointLabeFontStyle = helpers.getValueOrDefault(this.options.pointLabels.fontStyle, Chart.defaults.global.defaultFontStyle);
+						var pointLabeFontFamily = helpers.getValueOrDefault(this.options.pointLabels.fontFamily, Chart.defaults.global.defaultFontFamily);
+						var pointLabeFont = helpers.fontString(pointLabelFontSize, pointLabeFontStyle, pointLabeFontFamily);
+
+						ctx.font = pointLabeFont;
+						ctx.fillStyle = pointLabelFontColor;
 
 						var labelsCount = this.pointLabels.length,
 							halfLabelsCount = this.pointLabels.length / 2,

src/scales/scale.time.js

@@ -7,12 +7,6 @@ moment = typeof(moment) === 'function' ? moment : window.moment;
 module.exports = function(Chart) {
 
 	var helpers = Chart.helpers;
-
-	if (!moment) {
-		console.warn('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at http://momentjs.com/');
-		return;
-	}
-
 	var time = {
 		units: [{
 			name: 'millisecond',
@@ -48,7 +42,8 @@ module.exports = function(Chart) {
 		position: "bottom",
 
 		time: {
-			format: false, // false == date objects or use pattern string from http://momentjs.com/docs/#/parsing/string-format/
+			parser: false, // false == a pattern string from http://momentjs.com/docs/#/parsing/string-format/ or a custom callback that converts its argument to a moment
+			format: false, // DEPRECATED false == date objects, moment object, callback or a pattern string from http://momentjs.com/docs/#/parsing/string-format/
 			unit: false, // false == automatic or override with week, month, year, etc.
 			round: false, // none, or override with week, month, year, etc.
 			displayFormat: false, // DEPRECATED
@@ -72,6 +67,13 @@ module.exports = function(Chart) {
 	};
 
 	var TimeScale = Chart.Scale.extend({
+		initialize: function() {
+			if (!moment) {
+				throw new Error('Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com');
+			}
+
+			Chart.Scale.prototype.initialize.call(this);
+		},
 		getLabelMoment: function(datasetIndex, index) {
 			return this.labelMoments[datasetIndex][index];
 		},
@@ -137,21 +139,30 @@ module.exports = function(Chart) {
 
 			this.ticks = [];
 			this.unitScale = 1; // How much we scale the unit by, ie 2 means 2x unit per step
+			this.scaleSizeInUnits = 0; // How large the scale is in the base unit (seconds, minutes, etc)
 
 			// Set unit override if applicable
 			if (this.options.time.unit) {
 				this.tickUnit = this.options.time.unit || 'day';
 				this.displayFormat = this.options.time.displayFormats[this.tickUnit];
-				this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true));
+				this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
+				this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, 1);
 			} else {
 				// Determine the smallest needed unit of the time
+				var tickFontSize = helpers.getValueOrDefault(this.options.ticks.fontSize, Chart.defaults.global.defaultFontSize);
 				var innerWidth = this.isHorizontal() ? this.width - (this.paddingLeft + this.paddingRight) : this.height - (this.paddingTop + this.paddingBottom);
-				var labelCapacity = innerWidth / (this.options.ticks.fontSize + 10);
-				var buffer = this.options.time.round ? 0 : 1;
+				
+				// Crude approximation of what the label length might be
+				var tempFirstLabel = this.tickFormatFunction(this.firstTick, 0, []);
+				var tickLabelWidth = tempFirstLabel.length * tickFontSize;
+				var cosRotation = Math.cos(helpers.toRadians(this.options.ticks.maxRotation));
+				var sinRotation = Math.sin(helpers.toRadians(this.options.ticks.maxRotation));
+				tickLabelWidth = (tickLabelWidth * cosRotation) + (tickFontSize * sinRotation);
+				var labelCapacity = innerWidth / (tickLabelWidth + 10);
 
 				// Start as small as possible
 				this.tickUnit = 'millisecond';
-				this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit, true) + buffer);
+				this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
 				this.displayFormat = this.options.time.displayFormats[this.tickUnit];
 
 				var unitDefinitionIndex = 0;
@@ -162,19 +173,19 @@ module.exports = function(Chart) {
 					// Can we scale this unit. If `false` we can scale infinitely
 					this.unitScale = 1;
 
-					if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.tickRange / labelCapacity) < helpers.max(unitDefinition.steps)) {
+					if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.scaleSizeInUnits / labelCapacity) < helpers.max(unitDefinition.steps)) {
 						// Use one of the prefedined steps
 						for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
-							if (unitDefinition.steps[idx] > Math.ceil(this.tickRange / labelCapacity)) {
-								this.unitScale = unitDefinition.steps[idx];
+							if (unitDefinition.steps[idx] > Math.ceil(this.scaleSizeInUnits / labelCapacity)) {
+								this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, unitDefinition.steps[idx]);
 								break;
 							}
 						}
 
 						break;
-					} else if ((unitDefinition.maxStep === false) || (Math.ceil(this.tickRange / labelCapacity) < unitDefinition.maxStep)) {
+					} else if ((unitDefinition.maxStep === false) || (Math.ceil(this.scaleSizeInUnits / labelCapacity) < unitDefinition.maxStep)) {
 						// We have a max step. Scale this unit
-						this.unitScale = Math.ceil(this.tickRange / labelCapacity);
+						this.unitScale = helpers.getValueOrDefault(this.options.time.unitStepSize, Math.ceil(this.scaleSizeInUnits / labelCapacity));
 						break;
 					} else {
 						// Move to the next unit up
@@ -182,7 +193,7 @@ module.exports = function(Chart) {
 						unitDefinition = time.units[unitDefinitionIndex];
 
 						this.tickUnit = unitDefinition.name;
-						this.tickRange = Math.ceil(this.lastTick.diff(this.firstTick, this.tickUnit) + buffer);
+						this.scaleSizeInUnits = this.lastTick.diff(this.firstTick, this.tickUnit, true);
 						this.displayFormat = this.options.time.displayFormats[unitDefinition.name];
 					}
 				}
@@ -220,7 +231,7 @@ module.exports = function(Chart) {
 			this.ticks.push(this.firstTick.clone());
 
 			// For every unit in between the first and last moment, create a moment and add it to the ticks tick
-			for (var i = 1; i < this.tickRange; ++i) {
+			for (var i = 1; i < this.scaleSizeInUnits; ++i) {
 				var newTick = roundedStart.clone().add(i, this.tickUnit);
 
 				// Are we greater than the max time
@@ -234,12 +245,17 @@ module.exports = function(Chart) {
 			}
 
 			// Always show the right tick
-			if (this.options.time.max) {
-				this.ticks.push(this.lastTick.clone());
-			} else if (this.ticks[this.ticks.length - 1].diff(this.lastTick, this.tickUnit, true) !== 0) {
-				this.tickRange = Math.ceil(this.tickRange / this.unitScale) * this.unitScale;
-				this.ticks.push(this.firstTick.clone().add(this.tickRange, this.tickUnit));
-				this.lastTick = this.ticks[this.ticks.length - 1].clone();
+			if (this.ticks[this.ticks.length - 1].diff(this.lastTick, this.tickUnit) !== 0 || this.scaleSizeInUnits === 0) {
+			// this is a weird case. If the <max> option is the same as the end option, we can't just diff the times because the tick was created from the roundedStart
+			// but the last tick was not rounded.
+				if (this.options.time.max) {
+					this.ticks.push(this.lastTick.clone());
+					this.scaleSizeInUnits = this.lastTick.diff(this.ticks[0], this.tickUnit, true);
+				} else {
+					this.scaleSizeInUnits = Math.ceil(this.scaleSizeInUnits / this.unitScale) * this.unitScale;
+					this.ticks.push(this.firstTick.clone().add(this.scaleSizeInUnits, this.tickUnit));
+					this.lastTick = this.ticks[this.ticks.length - 1].clone();
+				}
 			}
 		},
 		// Get tooltip label
@@ -257,38 +273,49 @@ module.exports = function(Chart) {
 
 			return label;
 		},
-		convertTicksToLabels: function() {
-			this.ticks = this.ticks.map(function(tick, index, ticks) {
-				var formattedTick = tick.format(this.displayFormat);
+		// Function to format an individual tick mark
+		tickFormatFunction: function tickFormatFunction(tick, index, ticks) {
+			var formattedTick = tick.format(this.displayFormat);
 
-				if (this.options.ticks.userCallback) {
-					return this.options.ticks.userCallback(formattedTick, index, ticks);
-				} else {
-					return formattedTick;
-				}
-			}, this);
+			if (this.options.ticks.userCallback) {
+				return this.options.ticks.userCallback(formattedTick, index, ticks);
+			} else {
+				return formattedTick;
+			}
+		},
+		convertTicksToLabels: function() {
+			this.ticks = this.ticks.map(this.tickFormatFunction, this);
 		},
 		getPixelForValue: function(value, index, datasetIndex, includeOffset) {
 			var labelMoment = this.getLabelMoment(datasetIndex, index);
-			var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
 
-			var decimal = offset / this.tickRange;
+			if (labelMoment) {
+				var offset = labelMoment.diff(this.firstTick, this.tickUnit, true);
 
-			if (this.isHorizontal()) {
-				var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
-				var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
-				var valueOffset = (innerWidth * decimal) + this.paddingLeft;
+				var decimal = offset / this.scaleSizeInUnits;
 
-				return this.left + Math.round(valueOffset);
-			} else {
-				var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
-				var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
-				var heightOffset = (innerHeight * decimal) + this.paddingTop;
+				if (this.isHorizontal()) {
+					var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
+					var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
+					var valueOffset = (innerWidth * decimal) + this.paddingLeft;
 
-				return this.top + Math.round(heightOffset);
+					return this.left + Math.round(valueOffset);
+				} else {
+					var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
+					var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
+					var heightOffset = (innerHeight * decimal) + this.paddingTop;
+
+					return this.top + Math.round(heightOffset);
+				}
 			}
 		},
 		parseTime: function(label) {
+			if (typeof this.options.time.parser === 'string') {
+				return moment(label, this.options.time.parser);
+			}
+			if (typeof this.options.time.parser === 'function') {
+				return this.options.time.parser(label);
+			}
 			// Date objects
 			if (typeof label.getMonth === 'function' || typeof label === 'number') {
 				return moment(label);
@@ -299,6 +326,7 @@ module.exports = function(Chart) {
 			}
 			// Custom parsing (return an instance of moment)
 			if (typeof this.options.time.format !== 'string' && this.options.time.format.call) {
+				console.warn("options.time.format is deprecated and replaced by options.time.parser. See http://nnnick.github.io/Chart.js/docs-v2/#scales-time-scale");
 				return this.options.time.format(label);
 			}
 			// Moment format parsing

test/controller.bar.tests.js

@@ -204,6 +204,7 @@ describe('Bar controller tests', function() {
 				elements: {
 					rectangle: {
 						backgroundColor: 'rgb(255, 0, 0)',
+						borderSkipped: 'top',
 						borderColor: 'rgb(0, 0, 255)',
 						borderWidth: 2,
 					}
@@ -247,6 +248,7 @@ describe('Bar controller tests', function() {
 			base: 194,
 			width: 13.680000000000001,
 			backgroundColor: 'rgb(255, 0, 0)',
+			borderSkipped: 'top',
 			borderColor: 'rgb(0, 0, 255)',
 			borderWidth: 2,
 		});
@@ -264,6 +266,7 @@ describe('Bar controller tests', function() {
 			base: 194,
 			width: 13.680000000000001,
 			backgroundColor: 'rgb(255, 0, 0)',
+			borderSkipped: 'top',
 			borderColor: 'rgb(0, 0, 255)',
 			borderWidth: 2,
 		});

test/controller.doughnut.tests.js

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

test/core.helpers.tests.js

@@ -225,19 +225,11 @@ describe('Core helper tests', function() {
 					},
 					position: "right",
 					scaleLabel: {
-						fontColor: '#666',
-						fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-						fontSize: 12,
-						fontStyle: 'normal',
 						labelString: '',
 						display: false,
 					},
 					ticks: {
 						beginAtZero: false,
-						fontColor: "#666",
-						fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-						fontSize: 12,
-						fontStyle: "normal",
 						maxRotation: 90,
 						mirror: false,
 						padding: 10,
@@ -263,19 +255,11 @@ describe('Core helper tests', function() {
 					},
 					position: "left",
 					scaleLabel: {
-						fontColor: '#666',
-						fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-						fontSize: 12,
-						fontStyle: 'normal',
 						labelString: '',
 						display: false,
 					},
 					ticks: {
 						beginAtZero: false,
-						fontColor: "#666",
-						fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-						fontSize: 12,
-						fontStyle: "normal",
 						maxRotation: 90,
 						mirror: false,
 						padding: 10,
@@ -500,4 +484,184 @@ describe('Core helper tests', function() {
 			args: []
 		}])
 	});
+
+	it ('should get the maximum width and height for a node', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(200);
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(300);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "150px";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "150px";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node that has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-width style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxWidth = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node that has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create the div we want to get the max size for and set a max-height style
+		var innerDiv = document.createElement('div');
+		innerDiv.style.maxHeight = "50%";
+		div.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum width of a node when the parent has a percentage max-width style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-width style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxWidth = "50%";
+		div.appendChild(parentDiv);
+
+		// Create the div we want to get the max size for
+		var innerDiv = document.createElement('div');
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumWidth(innerDiv)).toBe(100);
+
+		document.body.removeChild(div);
+	});
+
+	it ('should get the maximum height of a node when the parent has a percentage max-height style', function() {
+		// Create div with fixed size as a test bed
+		var div = document.createElement('div');
+		div.style.width = "200px";
+		div.style.height = "300px";
+
+		document.body.appendChild(div);
+
+		// Create an inner wrapper around our div we want to size and give that a max-height style
+		var parentDiv = document.createElement('div');
+		parentDiv.style.maxHeight = "50%";
+		div.appendChild(parentDiv);
+
+		var innerDiv = document.createElement('div');
+		innerDiv.style.height = "300px"; // make it large
+		parentDiv.appendChild(innerDiv);
+
+		expect(helpers.getMaximumHeight(innerDiv)).toBe(150);
+
+		document.body.removeChild(div);
+	});
+
 });

test/core.layoutService.tests.js

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

test/core.legend.tests.js

@@ -18,10 +18,6 @@ describe('Legend block tests', function() {
 
 			labels: {
 				boxWidth: 40,
-				fontSize: Chart.defaults.global.defaultFontSize,
-				fontStyle: Chart.defaults.global.defaultFontStyle,
-				fontColor: Chart.defaults.global.defaultFontColor,
-				fontFamily: Chart.defaults.global.defaultFontFamily,
 				padding: 10,
 				generateLabels: jasmine.any(Function)
 			}

test/core.title.tests.js

@@ -11,9 +11,6 @@ describe('Title block tests', function() {
 			display: false,
 			position: 'top',
 			fullWidth: true,
-			fontColor: Chart.defaults.global.defaultFontColor,
-			fontFamily: Chart.defaults.global.defaultFontFamily,
-			fontSize: Chart.defaults.global.defaultFontSize,
 			fontStyle: 'bold',
 			padding: 10,
 			text: ''
@@ -146,6 +143,9 @@ describe('Title block tests', function() {
 		title.draw();
 
 		expect(context.getCalls()).toEqual([{
+			name: 'setFillStyle',
+			args: ['#666']
+		}, {
 			name: 'save',
 			args: []
 		}, {
@@ -154,9 +154,6 @@ describe('Title block tests', function() {
 		}, {
 			name: 'rotate',
 			args: [-0.5 * Math.PI]
-		}, {
-			name: 'setFillStyle',
-			args: ['#666']
 		}, {
 			name: 'fillText',
 			args: ['My title', 0, 0]
@@ -179,6 +176,9 @@ describe('Title block tests', function() {
 		title.draw();
 
 		expect(context.getCalls()).toEqual([{
+			name: 'setFillStyle',
+			args: ['#666']
+		}, {
 			name: 'save',
 			args: []
 		}, {
@@ -187,9 +187,6 @@ describe('Title block tests', function() {
 		}, {
 			name: 'rotate',
 			args: [0.5 * Math.PI]
-		}, {
-			name: 'setFillStyle',
-			args: ['#666']
 		}, {
 			name: 'fillText',
 			args: ['My title', 0, 0]

test/element.rectangle.tests.js

@@ -242,5 +242,62 @@ describe('Rectangle element tests', function() {
 		}]);
 	});
 
+	function testBorderSkipped (borderSkipped, expectedDrawCalls) {
+		var mockContext = window.createMockContext();
+		var rectangle = new Chart.elements.Rectangle({
+			_chart: { ctx: mockContext }
+		});
+
+		// Attach a view object as if we were the controller
+		rectangle._view = {
+			borderSkipped: borderSkipped, // set tested 'borderSkipped' parameter
+			ctx: mockContext,
+			base: 0,
+			width: 4,
+			x: 10,
+			y: 15,
+		};
+		
+		rectangle.draw();
+
+		var drawCalls = rectangle._view.ctx.getCalls().splice(4, 4);  
+		expect(drawCalls).toEqual(expectedDrawCalls);
+	}
+	
+	it ('should draw correctly respecting "borderSkipped" == "bottom"', function() {
+		testBorderSkipped ('bottom', [
+			{ name: 'moveTo', args: [8, 0] },
+			{ name: 'lineTo', args: [8, 15] },
+			{ name: 'lineTo', args: [12, 15] },
+			{ name: 'lineTo', args: [12, 0] },
+		]);
+	});
+
+	it ('should draw correctly respecting "borderSkipped" == "left"', function() {
+		testBorderSkipped ('left', [
+			{ name: 'moveTo', args: [8, 15] },
+			{ name: 'lineTo', args: [12, 15] },
+			{ name: 'lineTo', args: [12, 0] },
+			{ name: 'lineTo', args: [8, 0] },
+		]);
+	});
+
+	it ('should draw correctly respecting "borderSkipped" == "top"', function() {
+		testBorderSkipped ('top', [
+			{ name: 'moveTo', args: [12, 15] },
+			{ name: 'lineTo', args: [12, 0] },
+			{ name: 'lineTo', args: [8, 0] },
+			{ name: 'lineTo', args: [8, 15] },
+		]);
+	});
+
+	it ('should draw correctly respecting "borderSkipped" == "right"', function() {
+		testBorderSkipped ('right', [
+			{ name: 'moveTo', args: [12, 0] },
+			{ name: 'lineTo', args: [8, 0] },
+			{ name: 'lineTo', args: [8, 15] },
+			{ name: 'lineTo', args: [12, 15] },
+		]);
+	});
 
 });

test/scale.category.tests.js

@@ -24,19 +24,11 @@ describe('Category scale tests', function() {
 			},
 			position: "bottom",
 			scaleLabel: {
-				fontColor: '#666',
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: 'normal',
 				labelString: '',
 				display: false,
 			},
 			ticks: {
 				beginAtZero: false,
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: "normal",
 				maxRotation: 90,
 				mirror: false,
 				padding: 10,
@@ -164,6 +156,68 @@ describe('Category scale tests', function() {
 		expect(scale.getPixelForValue(0, 4, 0, true)).toBe(557);
 	});
 
+	it ('Should get the correct pixel for a value when horizontal and zoomed', function() {
+		var scaleID = 'myScale';
+
+		var mockData = {
+			datasets: [{
+				yAxisID: scaleID,
+				data: [10, 5, 0, 25, 78]
+			}],
+			labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
+		};
+
+		var mockContext = window.createMockContext();
+		var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		config.gridLines.offsetGridLines = true;
+		config.ticks.min = "tick2";
+		config.ticks.max = "tick4";
+
+		var Constructor = Chart.scaleService.getScaleConstructor('category');
+		var scale = new Constructor({
+			ctx: mockContext,
+			options: config,
+			chart: {
+				data: mockData
+			},
+			id: scaleID
+		});
+
+		var minSize = scale.update(600, 100);
+
+		expect(scale.width).toBe(600);
+		expect(scale.height).toBe(28);
+		expect(scale.paddingTop).toBe(0);
+		expect(scale.paddingBottom).toBe(0);
+		expect(scale.paddingLeft).toBe(28);
+		expect(scale.paddingRight).toBe(28);
+		expect(scale.labelRotation).toBe(0);
+
+		expect(minSize).toEqual({
+			width: 600,
+			height: 28,
+		});
+
+		scale.left = 5;
+		scale.top = 5;
+		scale.right = 605;
+		scale.bottom = 33;
+
+		expect(scale.getPixelForValue(0, 1, 0, false)).toBe(33);
+		expect(scale.getPixelForValue(0, 1, 0, true)).toBe(124);
+
+		expect(scale.getPixelForValue(0, 3, 0, false)).toBe(396);
+		expect(scale.getPixelForValue(0, 3, 0, true)).toBe(486);
+
+		config.gridLines.offsetGridLines = false;
+
+		expect(scale.getPixelForValue(0, 1, 0, false)).toBe(33);
+		expect(scale.getPixelForValue(0, 1, 0, true)).toBe(33);
+
+		expect(scale.getPixelForValue(0, 3, 0, false)).toBe(577);
+		expect(scale.getPixelForValue(0, 3, 0, true)).toBe(577);
+	});
+
 	it ('should get the correct pixel for a value when vertical', function() {
 		var scaleID = 'myScale';
 
@@ -223,4 +277,67 @@ describe('Category scale tests', function() {
 		expect(scale.getPixelForValue(0, 4, 0, false)).toBe(199);
 		expect(scale.getPixelForValue(0, 4, 0, true)).toBe(199);
 	});
+
+	it ('should get the correct pixel for a value when vertical and zoomed', function() {
+		var scaleID = 'myScale';
+
+		var mockData = {
+			datasets: [{
+				yAxisID: scaleID,
+				data: [10, 5, 0, 25, 78]
+			}],
+			labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick_last']
+		};
+
+		var mockContext = window.createMockContext();
+		var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category'));
+		config.gridLines.offsetGridLines = true;
+		config.ticks.min = "tick2";
+		config.ticks.max = "tick4";
+		config.position = "left";
+
+		var Constructor = Chart.scaleService.getScaleConstructor('category');
+		var scale = new Constructor({
+			ctx: mockContext,
+			options: config,
+			chart: {
+				data: mockData
+			},
+			id: scaleID
+		});
+
+		var minSize = scale.update(100, 200);
+
+		expect(scale.width).toBe(70);
+		expect(scale.height).toBe(200);
+		expect(scale.paddingTop).toBe(6);
+		expect(scale.paddingBottom).toBe(6);
+		expect(scale.paddingLeft).toBe(0);
+		expect(scale.paddingRight).toBe(0);
+		expect(scale.labelRotation).toBe(0);
+
+		expect(minSize).toEqual({
+			width: 70,
+			height: 200,
+		});
+
+		scale.left = 5;
+		scale.top = 5;
+		scale.right = 75;
+		scale.bottom = 205;
+
+		expect(scale.getPixelForValue(0, 1, 0, false)).toBe(11);
+		expect(scale.getPixelForValue(0, 1, 0, true)).toBe(42);
+
+		expect(scale.getPixelForValue(0, 3, 0, false)).toBe(136);
+		expect(scale.getPixelForValue(0, 3, 0, true)).toBe(168);
+
+		config.gridLines.offsetGridLines = false;
+
+		expect(scale.getPixelForValue(0, 1, 0, false)).toBe(11);
+		expect(scale.getPixelForValue(0, 1, 0, true)).toBe(11);
+
+		expect(scale.getPixelForValue(0, 3, 0, false)).toBe(199);
+		expect(scale.getPixelForValue(0, 3, 0, true)).toBe(199);
+	});
 });

test/scale.linear.tests.js

@@ -23,19 +23,11 @@ describe('Linear Scale', function() {
 			},
 			position: "left",
 			scaleLabel: {
-				fontColor: '#666',
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: 'normal',
 				labelString: '',
 				display: false,
 			},
 			ticks: {
 				beginAtZero: false,
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: "normal",
 				maxRotation: 90,
 				mirror: false,
 				padding: 10,
@@ -658,7 +650,6 @@ describe('Linear Scale', function() {
 
 		// Reverse mode makes this count up
 		expect(scale.ticks).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]);
-		expect(scale.ticksAsNumbers).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80]);
 		expect(scale.start).toBe(80);
 		expect(scale.end).toBe(0);
 	});

test/scale.logarithmic.tests.js

@@ -22,19 +22,11 @@ describe('Logarithmic Scale tests', function() {
 			},
 			position: "left",
 			scaleLabel: {
-				fontColor: '#666',
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: 'normal',
 				labelString: '',
 				display: false,
 			},
 			ticks: {
 				beginAtZero: false,
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: "normal",
 				maxRotation: 90,
 				mirror: false,
 				padding: 10,

test/scale.radialLinear.tests.js

@@ -28,18 +28,11 @@ describe('Test the radial linear scale', function() {
 			},
 			lineArc: false,
 			pointLabels: {
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 				fontSize: 10,
-				fontStyle: "normal",
 				callback: defaultConfig.pointLabels.callback, // make this nicer, then check explicitly below
 			},
 			position: "chartArea",
 			scaleLabel: {
-				fontColor: '#666',
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: 'normal',
 				labelString: '',
 				display: false,
 			},
@@ -48,10 +41,6 @@ describe('Test the radial linear scale', function() {
 				backdropPaddingY: 2,
 				backdropPaddingX: 2,
 				beginAtZero: false,
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: "normal",
 				maxRotation: 90,
 				mirror: false,
 				padding: 10,

test/scale.time.tests.js

@@ -1,6 +1,27 @@
 // Time scale tests
 describe('Time scale tests', function() {
 
+	beforeEach(function() {
+		jasmine.addMatchers({
+			toEqualOneOf: function() {
+				return {
+					compare: function(actual, expecteds) {
+						var result = false;
+						for (var i = 0, l = expecteds.length; i < l; i++) {
+							if (actual === expecteds[i]) {
+								result = true;
+								break;
+							}
+						}
+						return {
+							pass: result
+						};
+					}
+				};
+			}
+		});
+	});
+
 	it('Should load moment.js as a dependency', function() {
 		expect(window.moment).not.toBe(undefined);
 	});
@@ -27,19 +48,11 @@ describe('Time scale tests', function() {
 			},
 			position: "bottom",
 			scaleLabel: {
-				fontColor: '#666',
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: 'normal',
 				labelString: '',
 				display: false,
 			},
 			ticks: {
 				beginAtZero: false,
-				fontColor: "#666",
-				fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
-				fontSize: 12,
-				fontStyle: "normal",
 				maxRotation: 90,
 				mirror: false,
 				padding: 10,
@@ -50,6 +63,7 @@ describe('Time scale tests', function() {
 				autoSkipPadding: 20
 			},
 			time: {
+				parser: false,
 				format: false,
 				unit: false,
 				round: false,
@@ -176,6 +190,43 @@ describe('Time scale tests', function() {
 		expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 3, 2015', 'Jan 5, 2015', 'Jan 7, 2015', 'Jan 9, 2015', 'Jan 11, 2015']);
 	});
 
+	it('should allow custom time parsers', function() {
+		// Helper to build date objects
+
+
+		var scaleID = 'myScale';
+		var mockData = {
+			datasets: [{
+				data: [{
+					x: 375068900,
+					y: 1
+				}],
+			}]
+		};
+		var verticalScaleConfig = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('time'));
+		verticalScaleConfig.time.unit = 'day';
+		verticalScaleConfig.time.round = true;
+		verticalScaleConfig.time.parser = function customTimeParser(label) {
+			return moment.unix(label);
+		}
+
+		var mockContext = window.createMockContext();
+		var Constructor = Chart.scaleService.getScaleConstructor('time');
+		var scale = new Constructor({
+			ctx: mockContext,
+			options: verticalScaleConfig,
+			chart: {
+				data: mockData
+			},
+			id: scaleID
+		});
+		scale.update(400, 50);
+
+		// Counts down because the lines are drawn top to bottom
+		expect(scale.ticks[0]).toEqualOneOf(['Nov 19, 1981', 'Nov 20, 1981']); // handle time zone changes
+		expect(scale.ticks[1]).toEqualOneOf(['Nov 19, 1981', 'Nov 20, 1981']); // handle time zone changes
+	});
+
 	it('should build ticks using the config unit', function() {
 		var scaleID = 'myScale';