diff --git a/README.md b/README.md index b2ba2d0e0..bbd89a9f6 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ To configure the annotations plugin, you can simply add new config options to yo // context: {chart, element} }, - // Array of annotation configuration objects + // Array of annotation configuration objects // or Object with the annotation configuration objects, one for each key // See below for detailed descriptions of the annotation options annotations: [{ @@ -113,6 +113,9 @@ Vertical or horizontal lines are supported. // Background color of label, default below backgroundColor: 'rgba(0,0,0,0.8)', + // optional drawTime to control labels' layering; defaults to this element's drawTime + drawTime: 'afterDatasetsDraw', + font: { // Font family of text, inherits from global family: "sans-serif", @@ -214,7 +217,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo // Fill color backgroundColor: 'green', - + // Radius of box rectangle, default below cornerRadius: 0, @@ -304,7 +307,7 @@ The 2 coordinates, xValue, yValue are optional. If not specified, the point is e // Stroke width borderWidth: 2, - + // Radius of the point, default below radius: 10, @@ -397,7 +400,7 @@ The 2 coordinates, xValue, yValue are optional. If not specified, the point is e // Stroke width borderWidth: 2, - + // Radius of the point, default below radius: 10, diff --git a/src/annotation.js b/src/annotation.js index b13366db3..e196db35e 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -139,15 +139,19 @@ function resyncElements(elements, annotations) { function draw(chart, options, caller) { const {ctx, chartArea} = chart; - const elements = chartStates.get(chart).elements; + const elements = chartStates.get(chart).elements.filter(el => el._display); clipArea(ctx, chartArea); - for (let i = 0; i < elements.length; i++) { - const el = elements[i]; - if (el._display && (el.options.drawTime || options.drawTime || caller) === caller) { + elements.forEach(el => { + if ((el.options.drawTime || options.drawTime || caller) === caller) { el.draw(ctx); } - } + }); + elements.forEach(el => { + if ('drawLabel' in el && el.options.label && (el.options.label.drawTime || el.options.drawTime || options.drawTime || caller) === caller) { + el.drawLabel(ctx); + } + }); unclipArea(ctx); } diff --git a/src/helpers.js b/src/helpers.js index 6ab0e7d50..45b8f4d12 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -20,6 +20,7 @@ export function scaleValue(scale, value, fallback) { * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object? */ export function roundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); if (radius) { const r = Math.min(radius, height / 2, width / 2); const left = x + r; diff --git a/src/types/box.js b/src/types/box.js index 3a897b0dc..56c951b73 100644 --- a/src/types/box.js +++ b/src/types/box.js @@ -28,7 +28,6 @@ export default class BoxAnnotation extends Element { ctx.strokeStyle = options.borderColor; ctx.fillStyle = options.backgroundColor; - ctx.beginPath(); roundedRect(ctx, x, y, width, height, options.cornerRadius); ctx.fill(); ctx.stroke(); diff --git a/src/types/line.js b/src/types/line.js index d3dd8d3d9..0876cf007 100644 --- a/src/types/line.js +++ b/src/types/line.js @@ -66,11 +66,15 @@ export default class LineAnnotation extends Element { ctx.lineTo(x2, y2); ctx.stroke(); + ctx.restore(); + } + + drawLabel(ctx) { if (this.labelIsVisible()) { + ctx.save(); drawLabel(ctx, this); + ctx.restore(); } - - ctx.restore(); } resolveElementProperties(chart, options) { diff --git a/types/label.d.ts b/types/label.d.ts index 13b21997c..d0b640f3e 100644 --- a/types/label.d.ts +++ b/types/label.d.ts @@ -1,7 +1,9 @@ import { Color, FontSpec } from "chart.js"; +import { DrawTime } from "./options"; export interface LabelOptions { backgroundColor?: Color, + drawTime?: DrawTime, font?: FontSpec /** * Padding of label to add left/right, default below