How to show text inside line point onhover

[DiegoMcDipster]

Hi,

I'm new to Chartjs and so far it seems like an excellent package!

I have a line chart. What I would like to do is:

1. hover over a point
2. the point size increases (I have this working)
3. the value of that point (or string = 'click me') to be displayed inside the enlarged point
4. if i click on the point i get routed to another page (I have this working)

So, all I'm missing is how to get the value or any string to be displayed when i hover over the point.

[kurkle]

You could use the datalabels plugin, or you can do the drawing by your own plugin in afterDraw or afterDatasetDraw hook. More information about plugins: https://www.chartjs.org/docs/latest/developers/plugins.html

For example:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
      hoverRadius: 30,
      plugins: {
        tooltip: false
      }
    },
  plugins: [{
    id: 'hoverValue',
    afterDraw(chart) {
      chart.getActiveElements().forEach((active) => drawTextInPoint(chart, active));
    }
  }]
});

function drawTextInPoint(chart, {element, datasetIndex, index}) {
  const value = chart.data.datasets[datasetIndex].data[index];
  const ctx = chart.ctx;
  const {radius} = element.options
  const fontSize = ~~radius
  ctx.save();
  ctx.font = `${fontSize}px times`  
  ctx.fillStyle = 'red'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(value, element.x, element.y + radius/15)
  ctx.restore();
}

[DiegoMcDipster]

Thanks so much!

The datalabels plugin makes it very easy to implement!