admin管理员组

文章数量:1430533

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";
         }
      }
    }
}

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";
         }
      }
    }
}
  • javascript
  • callback
  • chart.js
Share Improve this question asked Dec 23, 2021 at 17:39 LierotLierot 211 silver badge2 bronze badges 2
  • Did you manage to find a solution? – Alvin Sartor Commented Jun 22, 2022 at 11:53
  • Not your case but for me the problem was that I'm using another plugin, stacked100, which was already replacing the tooltip, that's why my callbacks were not being called. This plugin offers replaceTooltipLabel : false so you can customize the tooltip with callbacks the way you're trying to do. – maganap Commented Apr 21, 2023 at 16:48
Add a ment  | 

1 Answer 1

Reset to default 3

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./ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>

本文标签： javascriptTooltip callbacks in line chart JS not workingStack Overflow

版权声明：本文标题：javascript - Tooltip callbacks in line chart JS not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745493779a2660720.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。