Skip to content

Commit 11b7f48

Browse files
kurklekurkle
authored
Add border support for line label (#459)
1 parent f096657 commit 11b7f48

File tree

14 files changed

+112
-23
lines changed

14 files changed

+112
-23
lines changed

‎docs/guide/types/box.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The following options are available for box annotations.
6565
| [`borderDash`](#styling) | `number[]`| Yes | `[]`
6666
| [`borderDashOffset`](#styling) | `number`| Yes | `0`
6767
| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color`
68-
| [`cornerRadius`](#styling) | `number` | Yes | `0`
68+
| [`borderRadius`](#styling) | `number` | Yes | `0`
6969

7070
### General
7171

@@ -92,4 +92,4 @@ If one of the axes does not match an axis in the chart, the box will take the en
9292
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
9393
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
9494
| `backgroundColor` | Fill color
95-
| `cornerRadius` | Radius of box rectangle
95+
| `borderRadius` | Radius of box rectangle

‎docs/guide/types/line.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr
105105
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
106106
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
107107
| `backgroundColor` | Fill color
108-
| `cornerRadius` | Radius of box rectangle
108+
| `borderRadius` | Radius of box rectangle
109109

110110
### Label
111111

@@ -118,7 +118,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
118118
| `backgroundColor` | [`Color`](../options#color) | `'rgba(0,0,0,0.8)'` | Background color of the label container.
119119
| `color` | [`Color`](../options#color) | `'#fff'` | Text color.
120120
| `content` | `string`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) | `null` | The content to show in the label.
121-
| `cornerRadius` | `number` | `6` | Radius of label box in pixels.
121+
| `borderRadius` | `number` | `6` | Radius of label box in pixels.
122122
| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset
123123
| `enabled` | `boolean` | `false` | Whether or not the label is shown.
124124
| `font` | [`Font`](../options#font) | `{ style: 'bold' }` | Label font

‎docs/samples/charts/bar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const annotation3 = {
6969
borderColor: 'rgba(0,150,0,0.2)',
7070
drawTime: 'beforeDatasetsDraw',
7171
borderWidth: 0,
72-
cornerRadius: 0,
72+
borderRadius: 0,
7373
};
7474
// </block:annotation3>
7575

‎docs/samples/types/box.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const annotation1 = {
2323
backgroundColor: 'rgba(0,150,0,0.02)',
2424
borderColor: 'rgba(0,150,0,0.2)',
2525
borderWidth: 1,
26-
cornerRadius: 4,
26+
borderRadius: 4,
2727
xMin: (ctx) => min(ctx, 0, 'x') - 2,
2828
yMin: (ctx) => min(ctx, 0, 'y') - 2,
2929
xMax: (ctx) => max(ctx, 0, 'x') + 2,
@@ -37,7 +37,7 @@ const annotation2 = {
3737
backgroundColor: 'rgba(150,0,0,0.02)',
3838
borderColor: 'rgba(150,0,0,0.2)',
3939
borderWidth: 1,
40-
cornerRadius: 4,
40+
borderRadius: 4,
4141
xMin: (ctx) => min(ctx, 1, 'x') - 2,
4242
yMin: (ctx) => min(ctx, 1, 'y') - 2,
4343
xMax: (ctx) => max(ctx, 1, 'x') + 2,

‎docs/samples/types/ellipse.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const annotation1 = {
2323
backgroundColor: 'rgba(0,150,0,0.02)',
2424
borderColor: 'rgba(0,150,0,0.2)',
2525
borderWidth: 1,
26-
cornerRadius: 4,
26+
borderRadius: 4,
2727
xMin: (ctx) => min(ctx, 0, 'x') - 10,
2828
yMin: (ctx) => min(ctx, 0, 'y') - 10,
2929
xMax: (ctx) => max(ctx, 0, 'x') + 10,
@@ -37,7 +37,7 @@ const annotation2 = {
3737
backgroundColor: 'rgba(150,0,0,0.02)',
3838
borderColor: 'rgba(150,0,0,0.2)',
3939
borderWidth: 1,
40-
cornerRadius: 4,
40+
borderRadius: 4,
4141
xMin: (ctx) => min(ctx, 1, 'x') - 10,
4242
yMin: (ctx) => min(ctx, 1, 'y') - 10,
4343
xMax: (ctx) => max(ctx, 1, 'x') + 10,

‎docs/samples/types/line.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ const annotation2 = {
5151
label: {
5252
rotation: 'auto',
5353
backgroundColor: 'black',
54+
borderColor: 'red',
55+
borderDash: [6, 3],
56+
borderRadius: 10,
57+
borderWidth: 2,
5458
content: (ctx) => 'Upper bound: ' + maxValue(ctx).toFixed(3),
5559
enabled: true
5660
}

‎old_samples/box.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
backgroundColor: 'rgba(101, 33, 171, 0.5)',
143143
borderColor: 'rgb(101, 33, 171)',
144144
borderWidth: 1,
145-
cornerRadius: 10,
145+
borderRadius: 10,
146146
click(context) {
147147
console.log('Annotation', context);
148148
}

‎src/types/box.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Element} from 'chart.js';
2+
import {valueOrDefault} from 'chart.js/helpers';
23
import {scaleValue, roundedRect} from '../helpers';
34

45
export default class BoxAnnotation extends Element {
@@ -31,7 +32,8 @@ export default class BoxAnnotation extends Element {
3132
ctx.setLineDash(options.borderDash);
3233
ctx.lineDashOffset = options.borderDashOffset;
3334

34-
roundedRect(ctx, x, y, width, height, options.cornerRadius);
35+
// TODO: v2 remove support for cornerRadius
36+
roundedRect(ctx, x, y, width, height, valueOrDefault(options.cornerRadius, options.borderRadius));
3537
ctx.fill();
3638

3739
// If no border, don't draw it
@@ -85,7 +87,7 @@ BoxAnnotation.defaults = {
8587
borderDash: [],
8688
borderDashOffset: 0,
8789
borderWidth: 1,
88-
cornerRadius: 0,
90+
borderRadius: 0,
8991
xScaleID: 'x',
9092
xMin: undefined,
9193
xMax: undefined,

‎src/types/line.js

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Element} from 'chart.js';
2-
import {isArray, toFontString, toRadians} from 'chart.js/helpers';
2+
import {isArray, toFontString, toRadians, valueOrDefault} from 'chart.js/helpers';
33
import {scaleValue, roundedRect, rotated} from '../helpers';
44

55
const PI = Math.PI;
@@ -156,6 +156,13 @@ LineAnnotation.defaults = {
156156
borderDashOffset: 0,
157157
label: {
158158
backgroundColor: 'rgba(0,0,0,0.8)',
159+
borderCapStyle: 'butt',
160+
borderColor: 'black',
161+
borderDash: [],
162+
borderDashOffset: 0,
163+
borderJoinStyle: 'miter',
164+
borderRadius: 6,
165+
borderWidth: 0,
159166
drawTime: undefined,
160167
font: {
161168
family: undefined,
@@ -168,7 +175,6 @@ LineAnnotation.defaults = {
168175
xPadding: 6,
169176
yPadding: 6,
170177
rotation: 0,
171-
cornerRadius: 6,
172178
position: 'center',
173179
xAdjust: 0,
174180
yAdjust: 0,
@@ -210,8 +216,14 @@ function drawLabel(ctx, line, chartArea) {
210216
ctx.rotate(rect.rotation);
211217

212218
ctx.fillStyle = label.backgroundColor;
213-
roundedRect(ctx, -(width / 2), -(height / 2), width, height, label.cornerRadius);
219+
const stroke = setBorderStyle(ctx, label);
220+
221+
// TODO: v2 remove support for cornerRadius
222+
roundedRect(ctx, -(width / 2), -(height / 2), width, height, valueOrDefault(label.cornerRadius, label.borderRadius));
214223
ctx.fill();
224+
if (stroke) {
225+
ctx.stroke();
226+
}
215227

216228
ctx.fillStyle = label.color;
217229
if (isArray(label.content)) {
@@ -238,6 +250,18 @@ function drawLabel(ctx, line, chartArea) {
238250
}
239251
}
240252

253+
function setBorderStyle(ctx, options) {
254+
if (options.borderWidth) {
255+
ctx.lineCap = options.borderCapStyle;
256+
ctx.setLineDash(options.borderDash);
257+
ctx.lineDashOffset = options.borderDashOffset;
258+
ctx.lineJoin = options.borderJoinStyle;
259+
ctx.lineWidth = options.borderWidth;
260+
ctx.strokeStyle = options.borderColor;
261+
return true;
262+
}
263+
}
264+
241265
function calculateLabelXAlignment(label, width) {
242266
const {textAlign, xPadding} = label;
243267
if (textAlign === 'start') {

‎test/fixtures/box/cornerRadius.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ module.exports = {
2626
yMax: 10,
2727
backgroundColor: 'rgba(33, 101, 171, 0.5)',
2828
borderColor: 'rgb(33, 101, 171)',
29-
cornerRadius: 8,
29+
borderRadius: 8,
3030
borderWidth: 5,
3131
},
3232
box2: {
@@ -39,7 +39,7 @@ module.exports = {
3939
yMax: 15,
4040
backgroundColor: 'rgba(101, 33, 171, 0.5)',
4141
borderColor: 'rgb(101, 33, 171)',
42-
cornerRadius: Infinity,
42+
borderRadius: Infinity,
4343
borderWidth: 5,
4444
},
4545
box3: {
@@ -52,7 +52,7 @@ module.exports = {
5252
yMax: 16,
5353
backgroundColor: 'rgba(171, 101, 33, 0.5)',
5454
borderColor: 'rgb(171, 101, 33)',
55-
cornerRadius: 4,
55+
borderRadius: 4,
5656
borderWidth: 5,
5757
}
5858
}

0 commit comments

Comments
 (0)