Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
stockiNail authored Apr 14, 2021
1 parent 8d2239e commit 489a15d
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 2 deletions.
1 change: 1 addition & 0 deletions docs/guide/types/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ All of these options can be [Scriptable](../options#scriptable-options)
| `xAdjust` | `number` | `0` | Adjustment along x-axis (left-right) of label relative to computed position. Negative values move the label left, positive right.
| `yAdjust` | `number` | `0` | Adjustment along y-axis (top-bottom) of label relative to computed position. Negative values move the label up, positive down.
| `position` | `string` | `'center'` | Anchor position of label on line. Possible options are: `'start'`, `'center'`, `'end'`.
| `textAlign` | `string` | `'center'` | Text alignment of label content when there's more than one line. Possible options are: `'start'`, `'center'`, `'end'`.
| `width` | `number`\|`string` | `undefined` | Overrides the width of the image. Could be set in pixel by a number, or in percentage of current width of image by a string. If undefined, uses the width of the image. It is used only when the content is an image.
| `height` | `number`\|`string` | `undefined` | Overrides the height of the image. Could be set in pixel by a number, or in percentage of current height of image by a string. If undefined, uses the height of the image. It is used only when the content is an image.
| `rotation` | `number`\|`'auto'` | `0` | Rotation of label, in degrees, or 'auto' to use the degrees of the line
17 changes: 15 additions & 2 deletions src/types/line.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ LineAnnotation.defaults = {
position: 'center',
xAdjust: 0,
yAdjust: 0,
textAlign: 'center',
enabled: false,
content: null
},
Expand Down Expand Up @@ -172,7 +173,6 @@ function drawLabel(ctx, line, chartArea) {
const label = line.options.label;

ctx.font = toFontString(label.font);
ctx.textAlign = 'center';

const {width, height} = measureLabel(ctx, label);
const rect = line.labelRect = calculateLabelPosition(line, width, height, chartArea);
Expand All @@ -186,12 +186,14 @@ function drawLabel(ctx, line, chartArea) {

ctx.fillStyle = label.color;
if (isArray(label.content)) {
ctx.textAlign = label.textAlign;
const x = calculateLabelXAlignment(label, width);
let textYPosition = -(height / 2) + label.yPadding;
for (let i = 0; i < label.content.length; i++) {
ctx.textBaseline = 'top';
ctx.fillText(
label.content[i],
-(width / 2) + (width / 2),
x,
textYPosition
);
textYPosition += label.font.size + label.yPadding;
Expand All @@ -201,11 +203,22 @@ function drawLabel(ctx, line, chartArea) {
const y = -(height / 2) + label.yPadding;
ctx.drawImage(label.content, x, y, width - (2 * label.xPadding), height - (2 * label.yPadding));
} else {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(label.content, 0, 0);
}
}

function calculateLabelXAlignment(label, width) {
const {textAlign, xPadding} = label;
if (textAlign === 'start') {
return -(width / 2) + xPadding;
} else if (textAlign === 'end') {
return +(width / 2) - xPadding;
}
return 0;
}

function getImageSize(size, value) {
if (typeof value === 'number') {
return value;
Expand Down
8 changes: 8 additions & 0 deletions types/label.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ export interface LabelOptions {
*/
position?: LabelPosition,

/**
* Text alignment when the content of the label is multi-line.
* @default 'center'
*/
textAlign?: LabelTextAlign,

/**
* Adjustment along x-axis (left-right) of label relative to above number (can be negative)
* For horizontal lines positioned left or right, negative values move
Expand Down Expand Up @@ -75,3 +81,5 @@ export interface LabelOptions {
}

export type LabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';

export type LabelTextAlign = 'start' | 'center' | 'end';

0 comments on commit 489a15d

Please sign in to comment.