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

Question

I've been consuming the Chart JS documentation but I think this is probably more computer science / math based of a question. I'm trying to draw a line that extends from the bottom of my chart to the top of the highest data point. Here's a link to a working code example: https://stackblitz.com/edit/react-pvzbwc

The idea is for the chart to look something like this where the point ends exactly at the top of the data: https://i.stack.imgur.com/L8d0H.jpg

Here's what I have so far for my after draw hook:

// draw a line when someone hovers over a data point
afterDatasetDraw: (chart) => {
          // console.log(chart)
          if (chart.tooltip._active && chart.tooltip._active.length) {
            const activePoint = chart.tooltip._active[0];
            console.log(activePoint.tooltipPosition())
            const ctx = chart.ctx;
            const y_axis = chart.scales['y-axis-0'];
            const x = activePoint.tooltipPosition().x;
            const yData = activePoint._chart.config.data.datasets[activePoint._datasetIndex].data[activePoint._index].y;

            const topY = y_axis.top;
            const bottomY = y_axis.bottom;
            // draw line
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x, topY);
            ctx.lineTo(x, bottomY);
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#000';
            ctx.stroke();
            ctx.restore();
         }
        }

It works pretty well when I need to draw a line straight up through the top, but not when I want just to see it at the top of the highest datapoint. What I've noticed is that topY is a static unchanging number. I'm wondering if there's a way I can calculated the top position based on the cartesian points of the chart?

Any insight is definitely appreciated.

Sean Kelly · Accepted Answer · 2018-12-23T05:41:19.093

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();
      }

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

1 Answers1