Display tooltip color boxes for all tooltips. Added a new `displayColors` option...

diff --git a/docs/01-Chart-Configuration.md b/docs/01-Chart-Configuration.md
index 5ed712a97cdc8f5e6c289ff6caaf16d9212fd89e..1aeaab940fbdd358857b358666a7ed86bc31995e 100644 (file)
--- a/docs/01-Chart-Configuration.md
+++ b/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

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 9210ed529ac05ae21b47dff08fecd8ae4998d167..1c9a1fdb1bb1aece4d18f9a66bcef04d7b82fae4 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/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

diff --git a/test/core.tooltip.tests.js b/test/core.tooltip.tests.js
index 21d25ebaa16c8fffeef22036e6da85f71905d8ab..9927debc01b71f4446321b68be49fa3d91cd9269 100755 (executable)
--- a/test/core.tooltip.tests.js
+++ b/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);