Add raw data to context and rename dataPoint to parsed (#8318)

* Make the raw data point available in scriptable context
* Rename variables
* Update samples

docs/docs/configuration/tooltip.md

@@ -140,8 +140,8 @@ var chart = new Chart(ctx, {
                         if (label) {
                             label += ': ';
                         }
-                        if (!isNaN(context.dataPoint.y)) {
-                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.dataPoint.y);
+                        if (!isNaN(context.parsed.y)) {
+                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                         }
                         return label;
                     }
@@ -220,7 +220,10 @@ The tooltip items passed to the tooltip callbacks implement the following interf
     label: string,
 
     // Parsed data values for the given `dataIndex` and `datasetIndex`
-    dataPoint: object,
+    parsed: object,
+
+    // Raw data values for the given `dataIndex` and `datasetIndex`
+    raw: object,
 
     // Formatted value for the tooltip
     formattedValue: string,

docs/docs/general/options.md

@@ -72,7 +72,8 @@ In addition to [dataset](#dataset)
 
 - `active`: true if element is active (hovered)
 - `dataIndex`: index of the current data
-- `dataPoint`: the parsed data values for the given `dataIndex` and `datasetIndex`
+- `parsed`: the parsed data values for the given `dataIndex` and `datasetIndex`
+- `raw`: the raw data values for the given `dataIndex` and `datasetIndex`
 - `element`: the element (point, arc, bar, etc.) for this data
 - `index`: getter for `dataIndex`
 - `type`: `'data'`

samples/animations/delay.html

@@ -76,7 +76,7 @@
 						var delay = 0;
 						var dsIndex = context.datasetIndex;
 						var index = context.dataIndex;
-						if (context.dataPoint && !context.delayed) {
+						if (context.parsed && !context.delayed) {
 							delay = index * 300 + dsIndex * 100;
 							context.delayed = true;
 						}

samples/charts/multi-series-pie.html

@@ -84,7 +84,7 @@
 						callbacks: {
 							label: function(context) {
 								var labelIndex = (context.datasetIndex * 2) + context.dataIndex;
-								return context.chart.data.labels[labelIndex] + ': ' + context.dataset.data[context.dataIndex];
+								return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
 							}
 						}
 					}

samples/scales/financial.html

@@ -192,7 +192,7 @@
 								if (label) {
 									label += ': ';
 								}
-								label += context.dataPoint.y.toFixed(2);
+								label += context.parsed.y.toFixed(2);
 								return label;
 							}
 						}

samples/scriptable/bar.html

@@ -27,7 +27,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			var c = v < -50 ? '#D60000'
 				: v < 0 ? '#F46300'
 				: v < 50 ? '#0358B6'

samples/scriptable/bubble.html

@@ -33,7 +33,7 @@
 		}
 
 		function colorize(opaque, context) {
-			var value = context.dataset.data[context.dataIndex];
+			var value = context.raw;
 			var x = value.x / 100;
 			var y = value.y / 100;
 			var r = channelValue(x, y, [250, 150, 50, 0]);
@@ -90,14 +90,12 @@
 					},
 
 					hoverBorderWidth: function(context) {
-						var value = context.dataset.data[context.dataIndex];
-						return Math.round(8 * value.v / 1000);
+						return Math.round(8 * context.raw.v / 1000);
 					},
 
 					radius: function(context) {
-						var value = context.dataset.data[context.dataIndex];
 						var size = context.chart.width;
-						var base = Math.abs(value.v) / 1000;
+						var base = Math.abs(context.raw.v) / 1000;
 						return (size / 24) * base;
 					}
 				}

samples/scriptable/line.html

@@ -40,7 +40,7 @@
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			return v < 10 ? 5
 				: v < 25 ? 7
 				: v < 50 ? 9

samples/scriptable/pie.html

@@ -27,7 +27,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, hover, ctx) {
-			var v = ctx.dataPoint;
+			var v = ctx.parsed;
 			var c = v < -50 ? '#D60000'
 				: v < 0 ? '#F46300'
 				: v < 50 ? '#0358B6'

samples/scriptable/polar.html

@@ -26,7 +26,7 @@
 		utils.srand(110);
 
 		function colorize(opaque, hover, ctx) {
-			var v = ctx.dataset.data[ctx.dataIndex];
+			var v = ctx.raw;
 			var c = v < 35 ? '#D60000'
 				: v < 55 ? '#F46300'
 				: v < 75 ? '#0358B6'

samples/scriptable/radar.html

@@ -44,7 +44,7 @@
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
-			var v = ctx.dataPoint.y;
+			var v = ctx.parsed.y;
 			return v < 10 ? 5
 				: v < 25 ? 7
 				: v < 50 ? 9

samples/tooltips/callbacks.html

@@ -68,7 +68,7 @@
 								var sum = 0;
 
 								tooltipItems.forEach(function(tooltipItem) {
-									sum += tooltipItem.dataPoint.y;
+									sum += tooltipItem.parsed.y;
 								});
 								return 'Sum: ' + sum;
 							},

src/core/core.datasetController.js

@@ -171,7 +171,7 @@ function createDatasetContext(parent, index, dataset) {
 	});
 }
 
-function createDataContext(parent, index, point, element) {
+function createDataContext(parent, index, point, raw, element) {
 	return Object.create(parent, {
 		active: {
 			writable: true,
@@ -180,9 +180,12 @@ function createDataContext(parent, index, point, element) {
 		dataIndex: {
 			value: index
 		},
-		dataPoint: {
+		parsed: {
 			value: point
 		},
+		raw: {
+			value: raw
+		},
 		element: {
 			value: element
 		},
@@ -757,13 +760,14 @@ export default class DatasetController {
 	 */
 	getContext(index, active) {
 		const me = this;
+		const dataset = me.getDataset();
 		let context;
 		if (index >= 0 && index < me._cachedMeta.data.length) {
 			const element = me._cachedMeta.data[index];
 			context = element.$context ||
-				(element.$context = createDataContext(me.getContext(), index, me.getParsed(index), element));
+				(element.$context = createDataContext(me.getContext(), index, me.getParsed(index), dataset.data[index], element));
 		} else {
-			context = me.$context || (me.$context = createDatasetContext(me.chart.getContext(), me.index, me.getDataset()));
+			context = me.$context || (me.$context = createDatasetContext(me.chart.getContext(), me.index, dataset));
 		}
 
 		context.active = !!active;

src/plugins/plugin.tooltip.js

@@ -122,7 +122,8 @@ function createTooltipItem(chart, item) {
 	return {
 		chart,
 		label,
-		dataPoint: controller.getParsed(index),
+		parsed: controller.getParsed(index),
+		raw: chart.data.datasets[datasetIndex].data[index],
 		formattedValue: value,
 		dataset: controller.getDataset(),
 		dataIndex: index,

test/specs/plugin.tooltip.tests.js

@@ -506,7 +506,7 @@ describe('Plugin.Tooltip', function() {
 						mode: 'index',
 						callbacks: {
 							beforeLabel: function(ctx) {
-								return ctx.dataPoint.x + ',' + ctx.dataPoint.y;
+								return ctx.parsed.x + ',' + ctx.parsed.y;
 							}
 						}
 					}