Display tooltip color boxes for all tooltips. Added a new displayColors option to turn them off

docs/01-Chart-Configuration.md

@@ -238,6 +238,7 @@ yPadding | Number | 6 | Padding to add on top and bottom of tooltip
 caretSize | Number | 5 | Size, in px, of the tooltip arrow
 cornerRadius | Number | 6 | Radius of tooltip corner curves
 multiKeyBackground | Color | "#fff" | Color to draw behind the colored boxes when multiple items are in the tooltip
+displayColors | Boolean | true | if true, color boxes are shown in the tooltip
 callbacks | Object | | See the [callbacks section](#chart-configuration-tooltip-callbacks) below
 
 #### Tooltip Callbacks

src/core/core.tooltip.js

@@ -30,6 +30,7 @@ module.exports = function(Chart) {
 		caretSize: 5,
 		cornerRadius: 6,
 		multiKeyBackground: '#fff',
+		displayColors: true,
 		callbacks: {
 			// Args are: (tooltipItems, data)
 			beforeTitle: helpers.noop,
@@ -193,7 +194,8 @@ module.exports = function(Chart) {
 					cornerRadius: tooltipOpts.cornerRadius,
 					backgroundColor: tooltipOpts.backgroundColor,
 					opacity: 0,
-					legendColorBackground: tooltipOpts.multiKeyBackground
+					legendColorBackground: tooltipOpts.multiKeyBackground,
+					displayColors: tooltipOpts.displayColors
 				}
 			});
 		},
@@ -298,12 +300,10 @@ module.exports = function(Chart) {
 					});
 				}
 
-				// If there is more than one item, show color items
-				if (active.length > 1) {
-					helpers.each(tooltipItems, function(tooltipItem) {
-						labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance));
-					});
-				}
+				// Determine colors for boxes
+				helpers.each(tooltipItems, function(tooltipItem) {
+					labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, chartInstance));
+				});
 
 				// Build the Text Lines
 				helpers.extend(model, {
@@ -377,7 +377,7 @@ module.exports = function(Chart) {
 			helpers.each(vm.beforeBody.concat(vm.afterBody), maxLineWidth);
 
 			// Body lines may include some extra width due to the color box
-			widthPadding = body.length > 1 ? (bodyFontSize + 2) : 0;
+			widthPadding = vm.displayColors ? (bodyFontSize + 2) : 0;
 			helpers.each(body, function(bodyItem) {
 				helpers.each(bodyItem.before, maxLineWidth);
 				helpers.each(bodyItem.lines, maxLineWidth);
@@ -613,7 +613,7 @@ module.exports = function(Chart) {
 			// Before body lines
 			helpers.each(vm.beforeBody, fillLineOfText);
 
-			var drawColorBoxes = body.length > 1;
+			var drawColorBoxes = vm.displayColors;
 			xLinePadding = drawColorBoxes ? (bodyFontSize + 2) : 0;
 
 			// Draw body lines now

test/core.tooltip.tests.js

@@ -85,6 +85,7 @@ describe('tooltip tests', function() {
 			backgroundColor: 'rgba(0,0,0,0.8)',
 			opacity: 1,
 			legendColorBackground: '#fff',
+			displayColors: true,
 
 			// Text
 			title: ['Point 2'],
@@ -199,6 +200,7 @@ describe('tooltip tests', function() {
 			backgroundColor: 'rgba(0,0,0,0.8)',
 			opacity: 1,
 			legendColorBackground: '#fff',
+			displayColors: true,
 
 			// Text
 			title: ['Point 2'],
@@ -211,7 +213,10 @@ describe('tooltip tests', function() {
 			afterBody: [],
 			footer: [],
 			caretPadding: 2,
-			labelColors: []
+			labelColors: [{
+				borderColor: 'rgb(255, 0, 0)',
+				backgroundColor: 'rgb(0, 255, 0)'
+			}]
 		}));
 
 		expect(tooltip._view.x).toBeCloseToPixel(269);