Chartjs-Chart.js (3.7) – Why do the tooltips not appear?

0👍

I took your code, changed the Chart.js script file (now importing from cdnjs.cloudflare.com) and added the missing canvas.

The tooltips appear as expected…

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="energy-generation-canvas" height="100"></canvas>
<script>
    const DATA_COUNT = 12;
    const labels = [];
    for (let i = 0; i < DATA_COUNT; ++i) {
        labels.push(i.toString());
    }
    const datapoints = [0, 20, 20, 60, 60, 120, 30, 180, 120, 125, 105, 110, 170];
    const data = {
      labels: labels,
      datasets: [
        {
          label: 'Test',
          data: datapoints,
          borderColor: "#FF0000",
        }
      ]
    };
    const config = {
      type: 'line',
      data: data,
      options: {
        responsive:          true,
        maintainAspectRatio: false, 
        showTooltips:        true,
        plugins: {
          title: {
            display: true,
            text: 'myTitle'
          },
          tooltip: {
            enabled: true,
            callbacks: {
                label: function(context) {
                    let label = context.dataset.label || '';

                    if (label) {
                        label += ': ';
                    }
                    if (context.parsed.y !== null) {
                        label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                    }
                    return label;
                }
            }
        }
        },
        interaction: {
          intersect: false,
        },
        scales: {
          x: {
            display: true,
            title: {
              display: true
            }
          },
          y: {
            display: true,
            title: {
              display: true,
              text: 'Value'
            },
            suggestedMin: -10,
            suggestedMax: 200
          }
        }
      },
    };
    const ctx = document.getElementById('energy-generation-canvas').getContext('2d');
    const myChart = new Chart(ctx, config);
</script>

Leave a comment