Add a way of sorting tooltip items with a custom sort function

docs/01-Chart-Configuration.md

@@ -195,6 +195,7 @@ Name | Type | Default | Description
 enabled | Boolean | true | Are tooltips 
 custom | Function | null | See [section](#chart-configuration-custom-tooltips) below
 mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value.
+itemSort | Function | undefined | Allows sorting of [tooltip items](#chart-configuration-tooltip-item-interface). Must implement a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
 backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip
 titleFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for tooltip title inherited from global font family
 titleFontSize | Number | 12 | Font size for tooltip title inherited from global font size

src/core/core.tooltip.js

@@ -272,6 +272,7 @@ module.exports = function(Chart) {
 			var opts = me._options;
 			var model = me._model;
 			var active = me._active;
+
 			var data = me._data;
 			var chartInstance = me._chartInstance;
 
@@ -280,8 +281,7 @@ module.exports = function(Chart) {
 			if (active.length) {
 				model.opacity = 1;
 
-				var element = active[0],
-					labelColors = [],
+				var labelColors = [],
 					tooltipPosition = tooltipPosition = getAveragePosition(active);
 
 				var tooltipItems = [];
@@ -289,6 +289,11 @@ module.exports = function(Chart) {
 					tooltipItems.push(createTooltipItem(active[i]));
 				}
 
+				// If the user provided a sorting function, use it to modify the tooltip items
+				if (opts.itemSort) {
+					tooltipItems = tooltipItems.sort(opts.itemSort);
+				}
+
 				// If there is more than one item, show color items
 				if (active.length > 1) {
 					helpers.each(tooltipItems, function(tooltipItem) {

test/core.tooltip.tests.js

@@ -372,4 +372,86 @@ describe('tooltip tests', function() {
 			}]
 		}));
 	});
+
+	it('Should display information from user callbacks', function() {
+		var chartInstance = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					label: 'Dataset 1',
+					data: [10, 20, 30],
+					pointHoverBorderColor: 'rgb(255, 0, 0)',
+					pointHoverBackgroundColor: 'rgb(0, 255, 0)'
+				}, {
+					label: 'Dataset 2',
+					data: [40, 40, 40],
+					pointHoverBorderColor: 'rgb(0, 0, 255)',
+					pointHoverBackgroundColor: 'rgb(0, 255, 255)'
+				}],
+				labels: ['Point 1', 'Point 2', 'Point 3']
+			},
+			options: {
+				tooltips: {
+					mode: 'label',
+					itemSort: function(a, b) {
+						return a.datasetIndex > b.datasetIndex ? -1 : 1;
+					}
+				}
+			}
+		});
+
+		// Trigger an event over top of the 
+		var meta0 = chartInstance.getDatasetMeta(0);
+		var point0 = meta0.data[1];
+
+		var meta1 = chartInstance.getDatasetMeta(1);
+		var point1 = meta1.data[1];
+
+		var node = chartInstance.chart.canvas;
+		var rect = node.getBoundingClientRect();
+
+		var evt = new MouseEvent('mousemove', {
+			view: window,
+			bubbles: true,
+			cancelable: true,
+			clientX: rect.left + point0._model.x,
+			clientY: rect.top + point0._model.y
+		});
+
+		// Manully trigger rather than having an async test
+		node.dispatchEvent(evt);
+
+		// Check and see if tooltip was displayed
+		var tooltip = chartInstance.tooltip;
+		
+		expect(tooltip._view).toEqual(jasmine.objectContaining({
+			// Positioning
+			xAlign: 'left',
+			yAlign: 'center',
+
+			// Text
+			title: ['Point 2'],
+			beforeBody: [],
+			body: [{
+				before: [],
+				lines: ['Dataset 2: 40'],
+				after: []
+			}, {
+				before: [],
+				lines: ['Dataset 1: 20'],
+				after: []
+			}],
+			afterBody: [],
+			footer: [],
+			x: 269,
+			y: 155,
+			labelColors: [{
+				borderColor: 'rgb(0, 0, 255)',
+				backgroundColor: 'rgb(0, 255, 255)'
+			}, {
+				borderColor: 'rgb(255, 0, 0)',
+				backgroundColor: 'rgb(0, 255, 0)'
+			}]
+		}));
+	});
 });