Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Charts global override for tooltips doesn't seem to work anymore #11107

Closed
charlesmass2 opened this issue Feb 2, 2023 · 1 comment · Fixed by #11110
Closed

Charts global override for tooltips doesn't seem to work anymore #11107

charlesmass2 opened this issue Feb 2, 2023 · 1 comment · Fixed by #11110

Comments

@charlesmass2
Copy link
Contributor

Expected behavior

As stated in the documentation here, we should be able to set global overrides for the tooltips.
In v3, I could globally disable the tooltips using the following:

import { Chart } from 'chart.js';
Chart.overrides.doughnut.plugins.tooltip.callbacks.label = () => null;

Current behavior

When using the code above, I get the following error: Cannot read properties of undefined (reading 'callbacks')
When outputting the content of Chart overrides in the console, I see this:

{
  "bar": { ... },
  "bubble": { ... },
  "doughnut": {
    "aspectRatio": 1,
    "plugins": {
      "legend": {
        "labels": {}
      }
    }
  },
  ...
}

Which suggests the documentation is wrong ?

Reproducible sample

https://codepen.io/lamasse/pen/WNKLbeV

Optional extra steps/info to reproduce

Please open the console in the codepen to see the issue

Possible solution

It might be a documentation issue only.

Context

No response

chart.js version

v4.2.0

Browser name and version

Chrome 109

Link to your project

No response

@stockiNail
Copy link
Contributor

@charlesmass2 maybe I'm wrong but doughnut controller is not overriding any tooltip configuration anymore (from version 4, see migration giude to 4).

static overrides = {
aspectRatio: 1,
// Need to override these to give a nice default
plugins: {
legend: {
labels: {
generateLabels(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
const {labels: {pointStyle, color}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const style = meta.controller.getStyle(i);
return {
text: label,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
fontColor: color,
lineWidth: style.borderWidth,
pointStyle: pointStyle,
hidden: !chart.getDataVisibility(i),
// Extra data used for toggling the correct item
index: i
};
});
}
return [];
}
},
onClick(e, legendItem, legend) {
legend.chart.toggleDataVisibility(legendItem.index);
legend.chart.update();
}
}
}
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants