expose boxWidth and boxHeight on tooltip

chartjs · Jan 21, 2020 · 2735681 · 2735681
1 parent fb19b77
commit 2735681
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
@@ -42,6 +42,8 @@ The tooltip configuration is passed into the `options.tooltips` namespace. The g
 | `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.
+| `boxWidth` | `number` | `bodyFontSize` | Width of the color box if displayColors is true.
+| `boxHeight` | `number` | `bodyFontSize` | Height of the color box if displayColors is true.
 | `borderColor` | `Color` | `'rgba(0, 0, 0, 0)'` | Color of the border.
 | `borderWidth` | `number` | `0` | Size of the border.
 | `rtl` | `boolean` | | `true` for rendering the legends from right to left.

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
@@ -239,6 +239,9 @@ function resolveOptions(options) {
 	options.bodyFontStyle = valueOrDefault(options.bodyFontStyle, defaults.fontStyle);
 	options.bodyFontSize = valueOrDefault(options.bodyFontSize, defaults.fontSize);
 
+	options.boxHeight = valueOrDefault(options.boxHeight, options.bodyFontSize);
+	options.boxWidth = valueOrDefault(options.boxWidth, options.bodyFontSize);
+
 	options.titleFontFamily = valueOrDefault(options.titleFontFamily, defaults.fontFamily);
 	options.titleFontStyle = valueOrDefault(options.titleFontStyle, defaults.fontStyle);
 	options.titleFontSize = valueOrDefault(options.titleFontSize, defaults.fontSize);
@@ -256,7 +259,7 @@ function resolveOptions(options) {
 function getTooltipSize(tooltip) {
 	const ctx = tooltip._chart.ctx;
 	const {body, footer, options, title} = tooltip;
-	const {bodyFontSize, footerFontSize, titleFontSize} = options;
+	const {bodyFontSize, footerFontSize, titleFontSize, boxWidth, boxHeight} = options;
 	const titleLineCount = title.length;
 	const footerLineCount = footer.length;
 
@@ -275,7 +278,9 @@ function getTooltipSize(tooltip) {
 			+ options.titleMarginBottom;
 	}
 	if (combinedBodyLength) {
-		height += combinedBodyLength * bodyFontSize
+		// Body lines may include some extra height depending on boxHeight
+		const bodyLineHeight = bodyFontSize > boxHeight ? bodyFontSize : boxHeight;
+		height += combinedBodyLength * bodyLineHeight
 			+ (combinedBodyLength - 1) * options.bodySpacing;
 	}
 	if (footerLineCount) {
@@ -298,7 +303,7 @@ function getTooltipSize(tooltip) {
 	helpers.each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth);
 
 	// Body lines may include some extra width due to the color box
-	widthPadding = options.displayColors ? (bodyFontSize + 2) : 0;
+	widthPadding = options.displayColors ? (boxWidth + 2) : 0;
 	helpers.each(body, function(bodyItem) {
 		helpers.each(bodyItem.before, maxLineWidth);
 		helpers.each(bodyItem.lines, maxLineWidth);
@@ -729,22 +734,24 @@ class Tooltip extends Element {
 		const me = this;
 		const options = me.options;
 		const labelColors = me.labelColors[i];
-		const bodyFontSize = options.bodyFontSize;
+		const {boxHeight, boxWidth, bodyFontSize} = options;
 		const colorX = getAlignedX(me, 'left');
 		const rtlColorX = rtlHelper.x(colorX);
+		const yOffSet = boxHeight < bodyFontSize ? (bodyFontSize - boxHeight) / 2 : 0;
+		const colorY = pt.y + yOffSet;
 
 		// Fill a white rect so that colours merge nicely if the opacity is < 1
 		ctx.fillStyle = options.multiKeyBackground;
-		ctx.fillRect(rtlHelper.leftForLtr(rtlColorX, bodyFontSize), pt.y, bodyFontSize, bodyFontSize);
+		ctx.fillRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
 
 		// Border
 		ctx.lineWidth = 1;
 		ctx.strokeStyle = labelColors.borderColor;
-		ctx.strokeRect(rtlHelper.leftForLtr(rtlColorX, bodyFontSize), pt.y, bodyFontSize, bodyFontSize);
+		ctx.strokeRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
 
 		// Inner square
 		ctx.fillStyle = labelColors.backgroundColor;
-		ctx.fillRect(rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), bodyFontSize - 2), pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
+		ctx.fillRect(rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2), colorY + 1, boxWidth - 2, boxHeight - 2);
 
 		// restore fillStyle
 		ctx.fillStyle = me.labelTextColors[i];
@@ -753,14 +760,15 @@ class Tooltip extends Element {
 	drawBody(pt, ctx) {
 		const me = this;
 		const {body, options} = me;
-		const {bodyFontSize, bodySpacing, bodyAlign, displayColors} = options;
+		const {bodyFontSize, bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth} = options;
+		const bodyLineHeight = bodyFontSize > boxHeight ? bodyFontSize : boxHeight;
 		var xLinePadding = 0;
 
 		var rtlHelper = getRtlHelper(options.rtl, me.x, me.width);
 
 		var fillLineOfText = function(line) {
-			ctx.fillText(line, rtlHelper.x(pt.x + xLinePadding), pt.y + bodyFontSize / 2);
-			pt.y += bodyFontSize + bodySpacing;
+			ctx.fillText(line, rtlHelper.x(pt.x + xLinePadding), pt.y + bodyLineHeight / 2);
+			pt.y += bodyLineHeight + bodySpacing;
 		};
 
 		var bodyAlignForCalculation = rtlHelper.textAlign(bodyAlign);
@@ -777,7 +785,7 @@ class Tooltip extends Element {
 		helpers.each(me.beforeBody, fillLineOfText);
 
 		xLinePadding = displayColors && bodyAlignForCalculation !== 'right'
-			? bodyAlign === 'center' ? (bodyFontSize / 2 + 1) : (bodyFontSize + 2)
+			? bodyAlign === 'center' ? (boxWidth / 2 + 1) : (boxWidth + 2)
 			: 0;
 
 		// Draw body lines now