score:0

you will need a custom plugin for this, see live example:

var options = {
  type: 'line',
  data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
      label: '# of votes',
      data: [12, 19, 3, 5, 2, 3],
      bordercolor: 'red',
      backgroundcolor: 'red'
    }]
  },
  options: {
    plugins: {
      selector: {
        color: 'blue',
        width: 2,
        // if canvas has a different backgroundcolor set this to match
        boxcolor: 'white'
      }
    }
  },
  plugins: [{
    id: 'selector',
    beforedatasetsdraw: (chart, args, opts) => {
      // return if no hover
      if (chart._active.length === 0) {
        return;
      }

      // set all variables needed
      const activeel = chart._active[0].element;
      const labelitem = chart.scales.x._labelitems[chart._active[0].index];
      const {
        ctx,
        scales: {
          y
        }
      } = chart;
      const metrics = ctx.measuretext(labelitem.label);
      const labelwidth = metrics.width;
      const labelheight = metrics.fontboundingboxascent + metrics.fontboundingboxdescent;

      // draw white box over old label
      ctx.save();
      ctx.fillstyle = opts.boxcolor || '#ffffff';
      ctx.fillrect((labelitem.translation[0] - labelwidth / 2), labelitem.translation[1], labelwidth, labelheight);
      ctx.restore();

      // draw new text on canvas
      ctx.save();
      ctx.font = chart.helpers.tofontstring(object.assign(labelitem.font, {
        style: 'bold'
      }));
      ctx.filltext(labelitem.label, (labelitem.translation[0] - labelwidth / 2), labelitem.translation[1] + labelitem.textoffset)
      ctx.restore();

      // draw vertical line down from point
      ctx.save();
      ctx.linewidth = opts.width || 1;
      ctx.strokestyle = opts.color || 'black';
      ctx.beginpath();
      ctx.moveto(activeel.x, activeel.y);
      ctx.lineto(activeel.x, y.getpixelforvalue(y.min));
      ctx.stroke();
      ctx.restore();
    }
  }]
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.4.0/chart.js"></script>
</body>


Related Query

More Query from same tag