Make locale configurable

docs/axes/labelling.md

@@ -34,8 +34,8 @@ var chart = new Chart(ctx, {
             y: {
                 ticks: {
                     // Include a dollar sign in the ticks
-                    callback: function(value, index, values) {
-                        return '$' + value;
+                    callback: function(ctx) {
+                        return '$' + ctx.tickValue;
                     }
                 }
             }

docs/developers/axes.md

@@ -96,7 +96,7 @@ Optionally, the following methods may also be overwritten, but an implementation
 
 ```javascript
 {
-    // Adds labels to objects in the ticks array. The default implementation simply calls this.options.ticks.callback(numericalTick, index, ticks);
+    // Adds labels to objects in the ticks array. The default implementation simply calls this.options.ticks.callback(ctx);
     generateTickLabels: function() {},
 
     // Determine how much the labels will rotate by. The default implementation will only rotate labels if the scale is horizontal.

src/core/core.scale.js

@@ -512,7 +512,14 @@ class Scale extends Element {
 		let i, ilen, tick;
 		for (i = 0, ilen = ticks.length; i < ilen; i++) {
 			tick = ticks[i];
-			tick.label = helpers.callback(tickOpts.callback, [tick.value, i, ticks], me);
+			const ctx = {
+				chart: me.chart,
+				scale: me,
+				tickValue: tick.value,
+				ticks,
+				index: i
+			};
+			tick.label = helpers.callback(tickOpts.callback, [ctx], me);
 		}
 	}
 	afterTickToLabelConversion() {

src/core/core.ticks.js

@@ -16,27 +16,28 @@ export default {
 		/**
 		 * Formatter for value labels
 		 * @method Chart.Ticks.formatters.values
-		 * @param value the value to display
+		 * @param ctx the tick formatting context
 		 * @return {string|string[]} the label to display
 		 */
-		values: function(value) {
+		values: function(ctx) {
+			const value = ctx.tickValue;
 			return helpers.isArray(value) ? value : '' + value;
 		},
 
 		/**
 		 * Formatter for numeric ticks
 		 * @method Chart.Ticks.formatters.numeric
-		 * @param tickValue {number} the value to be formatted
-		 * @param index {number} the position of the tickValue parameter in the ticks array
-		 * @param ticks {number[]} the list of ticks being converted
+		 * @param ctx the tick formatting context
 		 * @return {string} string representation of the tickValue parameter
 		 */
-		numeric: function(tickValue, index, ticks) {
+		numeric: function(ctx) {
+			const tickValue = ctx.tickValue;
 			if (tickValue === 0) {
 				return '0'; // never show decimal places for 0
 			}
 
 			// If we have lots of ticks, don't use the ones
+			const ticks = ctx.ticks;
 			let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
 
 			// If we have a number like 2.5 as the delta, figure out how many decimal places we need
@@ -48,16 +49,17 @@ export default {
 			const logDelta = math.log10(Math.abs(delta));
 
 			const maxTick = Math.max(Math.abs(ticks[0].value), Math.abs(ticks[ticks.length - 1].value));
+			const locale = ctx.chart.platform.locale;
 			if (maxTick < 1e-4) { // all ticks are small numbers; use scientific notation
 				const logTick = math.log10(Math.abs(tickValue));
 				let numExponential = Math.floor(logTick) - Math.floor(logDelta);
 				numExponential = Math.max(Math.min(numExponential, 20), 0);
-				return new Intl.NumberFormat(navigator.languages, {notation: 'scientific', minimumFractionDigits: numExponential, maximumFractionDigits: numExponential}).format(tickValue);
+				return new Intl.NumberFormat(locale, {notation: 'scientific', minimumFractionDigits: numExponential, maximumFractionDigits: numExponential}).format(tickValue);
 			}
 
 			let numDecimal = -1 * Math.floor(logDelta);
 			numDecimal = Math.max(Math.min(numDecimal, 20), 0); // toFixed has a max of 20 decimal places
-			return new Intl.NumberFormat(navigator.languages, {minimumFractionDigits: numDecimal, maximumFractionDigits: numDecimal}).format(tickValue);
+			return new Intl.NumberFormat(locale, {minimumFractionDigits: numDecimal, maximumFractionDigits: numDecimal}).format(tickValue);
 		}
 	}
 };

src/scales/scale.time.js

@@ -652,8 +652,15 @@ class TimeScale extends Scale {
 			nestedTickOpts.callback,
 			tickOpts.callback
 		]);
+		const ctx = {
+			chart: me.chart,
+			scale: me,
+			tickValue: label,
+			ticks,
+			index
+		};
 
-		return formatter ? formatter(label, index, ticks) : label;
+		return formatter ? formatter(ctx) : label;
 	}
 
 	generateTickLabels(ticks) {

test/specs/core.ticks.tests.js

@@ -28,16 +28,16 @@ describe('Test tick generators', function() {
 						type: 'linear',
 						position: 'bottom',
 						ticks: {
-							callback: function(value) {
-								return value.toString();
+							callback: function(ctx) {
+								return ctx.tickValue.toString();
 							}
 						}
 					},
 					y: {
 						type: 'linear',
 						ticks: {
-							callback: function(value) {
-								return value.toString();
+							callback: function(ctx) {
+								return ctx.tickValue.toString();
 							}
 						}
 					}
@@ -71,8 +71,8 @@ describe('Test tick generators', function() {
 						min: 0.1,
 						max: 1,
 						ticks: {
-							callback: function(value) {
-								return value.toString();
+							callback: function(ctx) {
+								return ctx.tickValue.toString();
 							}
 						}
 					},
@@ -81,8 +81,8 @@ describe('Test tick generators', function() {
 						min: 0.1,
 						max: 1,
 						ticks: {
-							callback: function(value) {
-								return value.toString();
+							callback: function(ctx) {
+								return ctx.tickValue.toString();
 							}
 						}
 					}

test/specs/scale.linear.tests.js

@@ -806,8 +806,8 @@ describe('Linear Scale', function() {
 					y: {
 						type: 'linear',
 						ticks: {
-							callback: function(value, index) {
-								return index.toString();
+							callback: function(ctx) {
+								return ctx.index.toString();
 							}
 						}
 					}

test/specs/scale.logarithmic.tests.js

@@ -463,8 +463,8 @@ describe('Logarithmic Scale tests', function() {
 						min: 10,
 						max: 1010,
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -496,8 +496,8 @@ describe('Logarithmic Scale tests', function() {
 						min: -10,
 						max: -1010,
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -526,8 +526,8 @@ describe('Logarithmic Scale tests', function() {
 						min: 'zero',
 						max: null,
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -554,8 +554,8 @@ describe('Logarithmic Scale tests', function() {
 					y: {
 						type: 'logarithmic',
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -584,8 +584,8 @@ describe('Logarithmic Scale tests', function() {
 					y: {
 						type: 'logarithmic',
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -616,8 +616,8 @@ describe('Logarithmic Scale tests', function() {
 						type: 'logarithmic',
 						reverse: true,
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -646,8 +646,8 @@ describe('Logarithmic Scale tests', function() {
 						type: 'logarithmic',
 						reverse: true,
 						ticks: {
-							callback: function(value) {
-								return value;
+							callback: function(ctx) {
+								return ctx.tickValue;
 							}
 						}
 					}
@@ -696,8 +696,8 @@ describe('Logarithmic Scale tests', function() {
 					y: {
 						type: 'logarithmic',
 						ticks: {
-							callback: function(value, index) {
-								return index.toString();
+							callback: function(ctx) {
+								return ctx.index.toString();
 							}
 						}
 					}

test/specs/scale.radialLinear.tests.js

@@ -321,8 +321,8 @@ describe('Test the radial linear scale', function() {
 			options: {
 				scale: {
 					ticks: {
-						callback: function(value, index) {
-							return index.toString();
+						callback: function(ctx) {
+							return ctx.index.toString();
 						}
 					}
 				}

test/specs/scale.time.tests.js

@@ -683,8 +683,8 @@ describe('Time scale tests', function() {
 								}
 							},
 							ticks: {
-								callback: function(value) {
-									return '<' + value + '>';
+								callback: function(ctx) {
+									return '<' + ctx.tickValue + '>';
 								}
 							}
 						}
@@ -704,8 +704,8 @@ describe('Time scale tests', function() {
 
 		it('should update ticks.callback correctly', function() {
 			var chart = this.chart;
-			chart.options.scales.x.ticks.callback = function(value) {
-				return '{' + value + '}';
+			chart.options.scales.x.ticks.callback = function(ctx) {
+				return '{' + ctx.tickValue + '}';
 			};
 			chart.update();
 
@@ -732,18 +732,18 @@ describe('Time scale tests', function() {
 						x: {
 							type: 'time',
 							ticks: {
-								callback: function(value) {
-									return '<' + value + '>';
+								callback: function(ctx) {
+									return '<' + ctx.tickValue + '>';
 								},
 								major: {
 									enabled: true,
-									callback: function(value) {
-										return '[[' + value + ']]';
+									callback: function(ctx) {
+										return '[[' + ctx.tickValue + ']]';
 									}
 								},
 								minor: {
-									callback: function(value) {
-										return '(' + value + ')';
+									callback: function(ctx) {
+										return '(' + ctx.tickValue + ')';
 									}
 								}
 							}

test/utils.js

@@ -34,6 +34,7 @@ function acquireChart(config, options) {
 	var canvas = document.createElement('canvas');
 	var chart, key;
 
+	Chart.platform.locale = 'en-US';
 	config = config || {};
 	options = options || {};
 	options.canvas = options.canvas || {height: 512, width: 512};