When using chart.js, custom tooltips disappear immediately after rendering

Question

I'm using chart js 2 to display several Line graphs. I want to set a custom tooltip to allow me to view additional data when the user hovers over a point on the graph. However, every time I add a callback function (no matter what the function returns), it causes the tooltip to disappear. It properly renders my custom text for a brief moment, but then it disappears. I have to move my mouse around constantly to be able to read the tooltips. Here's the documentation on this function https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback

I've tried changing virtually every chart option I can. I'm currently using the callback function 'label', but I've tried beforeLabel and afterLabel as well. One thing that I noticed had an effect is when I changed the value of "animation: { duration } ". It's currently set to 0 because I don't want any of the other animations when the charts change, because they update frequently. I set it to 1000 and I noticed that the tooltip persisted for slightly longer and had a darker background, but the overall chart rendering seemed to slow down. I've also changed the callback function's format from an arrow function to a regular function.

Here are my chart options, with the relevant portion spaced out more towards the end:

const chartOptions = {
        legend: {
          labels: {
            fontColor: NUMBER_COLOR,
            fontSize: 12
          }
        },
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: "Frame",
              fontColor: SCALE_LABEL_COLOR,
              fontSize: 14
            },
            stepSize: ystep,
            ticks: {
              min: XMIN,
              max: XMAX,
              stepSize: (XMAX - XMIN) / TICK_NUMS,
              maxRotation: 0,
              minRotation: 0,
              fontColor: NUMBER_COLOR,
              fontSize: 12
            },
            type: "linear"
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: this.props.yAxisUnits,
              fontColor: SCALE_LABEL_COLOR,
              fontSize: 14
            },
            ticks: {
              id: "0",
              min: yChartMin,
              max: yChartMax,
              stepSize: Number(((yChartMax - yChartMin) / TICK_NUMS).toFixed(DECIMAL_NUM)),
              maxRotation: 0,
              minRotation: 0,
              display: true,
              fontColor: NUMBER_COLOR,
              fontSize: 13
            }
          }]
        },


        animation: {
          duration: 0
        },
        tooltips: {
          intersect: true,
          mode: "nearest",
          enabled: true,
          callbacks: {
            label: (tooltipItems, data) => {
              const labelText = [
                data.datasets[tooltipItems.datasetIndex].label + ": " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].y,
                "Time: " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].time
              ];
              return labelText;
            }
          }
        }
      };

The data points themselves each follow the format:

{
    x: xValue,
    y: yValue,
    time: timeValue
}

and my chart is displayed via:

<Line
  data={chartData}
  options={chartOptions}
  width={DEFAULT_WIDTH}
  height={DEFAULT_HEIGHT}
  getElementAtEvent={(e: any) => this.clickedElement(e)}
/>

When I delete the callback function "label", the tooltip persists and displays as expected. Please let me know if you can offer help in any way.

Thanks!

When using chart.js, custom tooltips disappear immediately after rendering

0 Answers0