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

Pie Chart Labels are broken #387

Open
MasterCash opened this issue Jul 12, 2023 · 3 comments
Open

Pie Chart Labels are broken #387

MasterCash opened this issue Jul 12, 2023 · 3 comments

Comments

@MasterCash
Copy link

It looks like that the labels are broken with Pie Chart labels in the latest ChartJs

chartjs-plugin-datalabels.esm.js:118 Uncaught TypeError: Cannot read properties of null (reading 'x')
    at orient (chartjs-plugin-datalabels.esm.js:118:19)
    at Object.fallback [as positioner] (chartjs-plugin-datalabels.esm.js:342:13)
    at coordinates (chartjs-plugin-datalabels.esm.js:838:21)
    at Object.draw (chartjs-plugin-datalabels.esm.js:1009:18)
    at Object.afterDatasetsDraw (chartjs-plugin-datalabels.esm.js:1302:12)
    at callback (helpers.core.ts:109:15)
    at PluginService._notify (core.plugins.js:60:11)
    at PluginService.notify (core.plugins.js:42:25)
    at Chart.notifyPlugins (core.controller.js:1148:26)
    at Chart._drawDatasets (core.controller.js:787:10)

Originally posted by @tedik123 in #380 (comment)

There is a PR #380 which looks like it fixes this problem, according to the PR it is an issue where instanceof no longer works in newer versions of ChartJs

@MasterCash
Copy link
Author

would be really great to get this fixed.

@simonbrunel
Copy link
Member

@MasterCash If instanceof does not work, it's probably because your project compiles 2 different versions of Chart.js. If you are sure that it's not the case, please provide a codepen that reproduces this issue. Note that PR #380 does provide a proper fix.

@COV-GIS
Copy link

COV-GIS commented Sep 27, 2023

I just ran into the same error. A few months ago I updated a couple apps to chart js 4.x using data labels 2.2.0. Everything was working fine in dev and deployment until yesterday when the doughnut chart with labels failed to render and throws the above error. There has been no code changes. Additionally, bar chart labels are also having alignment issues but throw no errors. None of the alignment options are working.

image
They were just centered horizontally by default. And again...no option can effect the position.

This is possibly (???) a jsdelivr +esm issue as my refactor went module with imports like:

import {
  Chart,
  DoughnutController,
  ArcElement,
  Title,
  Tooltip,
} from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import ChartDataLabels from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

I'm removing labels as a temporary fix. And any suggestions as to what may be causing this would be appreciated.

My charts config is complex and data is dynamic so not good for reproduction. I'm going to keep digging into this. And see if I can get a pen up to reproduce.

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

No branches or pull requests

3 participants