CODEWITHSUNDEEP
javascriptcallbackchart.js
Lierot
Lierot

Reputation: 21

Tooltip callbacks in line chart JS not working

I'm using line chart js to display a graph and I'm trying to calculate the difference between the selected point and the previous one and render it in a tool tip.

I've read that I should use callbacks function but when I tried it nothing happen.

Even I only try to change the tittle Here's my options for my line chart if anyone can help :) Chart js version : 3.6.1

  plugins: {
    legend: {
      display: false
    },
    title: {
      display: true,
      font: {
        size: 18,
      },
      color: "white"
    },
    zoom: {
      zoom: {
        drag: {
          enabled: true
        },
        mode: 'xy',
      }
    },
    tooltip: {
      callbacks: {
        title: function () {
          return "my tittle";
         }
      }
    }
}

Upvotes: 2

Views: 8303

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31439

This is because you are using V2 syntax in with V3, you can read the namespace in the options.

Tooltip has been moved to the plugins section

For all changes please read the migration guide

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: () => ('Title')
        }
      }
    }
  }
}

const 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.6.2/chart.js"></script>
</body>

Upvotes: 3

Related Questions