Chartjs-ChartJS/ ChartJS-plugin annotation set height of vertical line

by

0👍

Hey I don’t know if this still helps you, but I wrote a plugin for ChartJS which does exactly what you’re asking. You may be able to adapt the source code in the repo for your own needs. Here’s a relevant snippet:

  /**
   * Draw the line height annotation to the highest data point on the chart.
   * @param {int} x horizontal coordinate on canvas
   * @param {int} bottomY bottom Y dimension of the chart
   * @param {float} highestDataY highest possible Y value on the chart, taking padding and border offsets into consideration.
   */
  drawLineHeightAnnotation(x, bottomY, highestDataY) {
    let ctx = this.ctx;
    let options = this.options;

    ctx.save();
    ctx.beginPath();
    if (!options.noDash) {
      ctx.setLineDash([10, 10]);
    }
    ctx.moveTo(x, highestDataY);
    ctx.lineTo(x, bottomY);
    ctx.lineWidth = options.lineWeight ? options.lineWeight : 1.5;
    ctx.strokeStyle = options.color ? options.color : "#000";
    ctx.stroke();
    ctx.restore();
  }

Leave a comment