[Chartjs]-Add Horizontal crosshairs using Chart.js

1👍

try

  const options = {
    hover: {
      intersect: false
    },
    onHover: function(this: Chart, event: MouseEvent, activeElements: Array<object>): any {
      if (activeElements.length) {
        const activePoint = activeElements[0] as any;
        const ctx = this.ctx;
        if (!ctx) {
          return;
        }
        const x = activePoint._view.x;
        const y = activePoint._view.y;
        const leftX = this.chartArea.left;
        const topY = this.chartArea.top;
        const RightX = this.chartArea.right;
        const bottomY = this.chartArea.bottom;
        ctx.beginPath();
        ctx.moveTo(x, topY);
        ctx.lineTo(x, bottomY);
        ctx.moveTo(leftX, y);
        ctx.lineTo(RightX, y);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#C2C7CC";
        ctx.stroke();
        ctx.closePath();
      }
    },
   //...
}

Leave a comment