Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-21 23:56:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tooltip colorbox supports configurable borderWidth, borderRadius, and dash effect (#8874)

Browse Source 
* Start on extending tooltip style
* Correct borderRadius implementation
* Tests of updated tooltip styling
* Update docs
This commit is contained in:
Evert Timberg
2021-04-10 13:37:22 -04:00
committed by GitHub
parent a84347b035
commit 7ee498e412
10 changed files with 333 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/plugins/plugin.tooltip.js
View File

@@ -1,7 +1,8 @@
import Animations from '../core/core.animations';
import Element from '../core/core.element';
import {addRoundedRectPath} from '../helpers/helpers.canvas';
import {each, noop, isNullOrUndef, isArray, _elementsEqual} from '../helpers/helpers.core';
import {toFont, toPadding} from '../helpers/helpers.options';
import {toFont, toPadding, toTRBLCorners} from '../helpers/helpers.options';
import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl';
import {distanceBetweenPoints, _limitValue} from '../helpers/helpers.math';
import {drawPoint} from '../helpers';
@@ -377,6 +378,8 @@ export class Tooltip extends Element {
this.width = undefined;
this.caretX = undefined;
this.caretY = undefined;
// TODO: V4, make this private, rename to `_labelStyles`, and combine with `labelPointStyles`
// and `labelTextColors` to create a single variable
this.labelColors = undefined;
this.labelPointStyles = undefined;
this.labelTextColors = undefined;
@@ -709,18 +712,50 @@ export class Tooltip extends Element {
ctx.fillStyle = labelColors.backgroundColor;
drawPoint(ctx, drawOptions, centerX, centerY);
} else {
// Fill a white rect so that colours merge nicely if the opacity is < 1
ctx.fillStyle = options.multiKeyBackground;
ctx.fillRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
// Border
ctx.lineWidth = 1;
ctx.lineWidth = labelColors.borderWidth || 1; // TODO, v4 remove fallback
ctx.strokeStyle = labelColors.borderColor;
ctx.strokeRect(rtlHelper.leftForLtr(rtlColorX, boxWidth), colorY, boxWidth, boxHeight);
ctx.setLineDash(labelColors.borderDash || []);
ctx.lineDashOffset = labelColors.borderDashOffset || 0;
// Inner square
ctx.fillStyle = labelColors.backgroundColor;
ctx.fillRect(rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2), colorY + 1, boxWidth - 2, boxHeight - 2);
// Fill a white rect so that colours merge nicely if the opacity is < 1
const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth);
const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2);
const borderRadius = toTRBLCorners(labelColors.borderRadius);
if (Object.values(borderRadius).some(v => v !== 0)) {
ctx.beginPath();
ctx.fillStyle = options.multiKeyBackground;
addRoundedRectPath(ctx, {
x: outerX,
y: colorY,
w: boxWidth,
h: boxHeight,
radius: borderRadius,
});
ctx.fill();
ctx.stroke();
// Inner square
ctx.fillStyle = labelColors.backgroundColor;
ctx.beginPath();
addRoundedRectPath(ctx, {
x: innerX,
y: colorY + 1,
w: boxWidth - 2,
h: boxHeight - 2,
radius: borderRadius,
});
ctx.fill();
} else {
// Normal rect
ctx.fillStyle = options.multiKeyBackground;
ctx.fillRect(outerX, colorY, boxWidth, boxHeight);
ctx.strokeRect(outerX, colorY, boxWidth, boxHeight);
// Inner square
ctx.fillStyle = labelColors.backgroundColor;
ctx.fillRect(innerX, colorY + 1, boxWidth - 2, boxHeight - 2);
}
}
// restore fillStyle
@@ -1197,7 +1232,11 @@ export default {
const options = meta.controller.getStyle(tooltipItem.dataIndex);
return {
borderColor: options.borderColor,
backgroundColor: options.backgroundColor
backgroundColor: options.backgroundColor,
borderWidth: options.borderWidth,
borderDash: options.borderDash,
borderDashOffset: options.borderDashOffset,
borderRadius: 0,
};
},
labelTextColor() {