Chartjs-How can I draw a line to the highest datapoint in chart js?

1👍

After some struggle I’ve answered the question. It was a lot more simple than I made the problem out to be. It turns out I just needed to calculate the ratio between the datapoints and the graph in pixels, and then implement a line at that point.

I’ve put this into a plugin with the API:

/// default values
lineHeightAnnotation: {
  // defaults to have line to the highest data point on every tick
  always: true,
  // optionally, only have line draw to the highest datapoint nearest the user's hover position
  hover: false,
  // colors of the line
  color: '#000',
  // name of yAxis
  yAxis: 'y-axis-0',
  // weight of the line
  lineWeight: 1.5,
   /// sets shadow for ALL lines on the canvas
  shadow: {
    // color of the shadow
    color: 'rgba(0,0,0,0.35)',
    // blur of the shadow
    blur: 10,
    /// shadow offset
    offset: {
      // x offset
      x: 0,
      // y offset
      y: 3
    }
  },
  // dash defaults at [10, 10]
  noDash: true,
}

Logic:

/**
 * Vars
 * maxY - the tallest data point on the graph
 * tickMax - the tallest tick on the y axis
 * bottomY - the lowest point of the graph
 * additionalOffsets = dataset.borderWidth * 2
 * 
 *                               bottomY * maxY      
 * highestDataY =   bottomY -  -------------------   + additionOffsets
 *                                   tickMax
 */

Function:

   afterDatasetDraw: (chart) => {
      // draw a dashed line when someone hovers over a data point
      if (chart.tooltip._active && chart.tooltip._active.length) {
        const activePoint = chart.tooltip._active[0];
        const ctx = chart.ctx;

        const x = activePoint.tooltipPosition().x;
        const yAxis = chart.scales['y-axis-0'];

        const tickMax = yAxis.ticksAsNumbers[0] // first index is always the tallest
        const tickLow = yAxis.ticksAsNumbers[yAxis.ticksAsNumbers.length - 1]
        const topY = yAxis.top; // clientRect.top + chart.padding.y
        const bottomY = yAxis.bottom; // clientRect.bottom

        let maxY = 1;
        let borderWidth = 0;
        const datasets = chart.config.data.datasets
        datasets.forEach((set, i) => {
          // get maximum Y value
          // get borderWidth of that dataset
          let point = set.data[activePoint._index].y
          if(point > maxY) {
            maxY = parseInt(point, 10) - parseInt(set.borderWidth, 10)
            borderWidth = parseInt(set.borderWidth, 10)
          }
        });

        let yBRatio = bottomY * (maxY - tickLow)
        let tMRatio = yBRatio / (tickMax - tickLow)
        let highestDataY = bottomY - tMRatio + (borderWidth * 2)

        // draw line
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([10, 10]);
        ctx.moveTo(x, highestDataY);
        ctx.lineTo(x, bottomY);
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = '#000';
        ctx.stroke();
        ctx.restore();
      }

Leave a comment