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

skipNulls is not working with dataset parsing #11717

Open
jmtimko5 opened this issue Mar 15, 2024 · 1 comment
Open

skipNulls is not working with dataset parsing #11717

jmtimko5 opened this issue Mar 15, 2024 · 1 comment

Comments

@jmtimko5
Copy link

jmtimko5 commented Mar 15, 2024

Expected behavior

Skip nulls should behave properly, accounting for the missing width of nonexistent bars within a bar category (tick). Chart number 3 in the code pen, should look similar to chart number 2. After adding the additional dimension of country to the chart seems to throw skipNulls off somehow.

Skip Nulls working with parsing and two dimensions:
image

Current behavior

The widths are not correctly calculated, and the bars are overlapping.

Skip Nulls broken with parsing and three dimensions:
image

Reproducible sample

https://codepen.io/jmtimko5/pen/vYMyOqV

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

The product I work on is effectively a BI tool, so it we've built a visualization layer that is quite flexible and can handle arbitrary dimensions on the chart. Much thanks to chart.js for enabling us to do that :) . We allow users to chose what dimension they would like to see on the x-axis. For example a simple chart would be "Sum of Revenue grouped by Country and Subscription Tier". In that case users could choose to put Country or Subscription Tier as the x-axis. The way we have implemented this is by making extensive use of the parsing key in the dataset controllers. When a user changes the x-axis, I don't need to reformat the data at all, all I need to do is update the parsing.xAxisKey and xAxisID field on the dataset and it works wonderfully. However, I now need to properly account for null value spacing in these charts, and using parsing with multiple dimensions, and skipNulls appears to not work. I really appreciate any help or guidance you can provide.

chart.js version

v4.4.2

Browser name and version

Chrome 122.0.6261.112

Link to your project

No response

@huqingkun
Copy link
Contributor

Can someone in the contributor list assign this issue to me?

@jmtimko5 There's a workaround for this issue. You can make sure the dataset and data order keep same. In your case, you can change the blue/red order in BRA to red/blue.

brianwarner pushed a commit to fidelity-contributions/chartjs-chart.js that referenced this issue Jul 24, 2024
Signed-off-by: Hu, Vince <Qingkun.Hu@fmr.com>
kayhern pushed a commit to fidelity-contributions/chartjs-chart.js that referenced this issue Aug 1, 2024
LeeLenaleee pushed a commit that referenced this issue Aug 6, 2024
* fix issue #11717

Signed-off-by: Hu, Vince <Qingkun.Hu@fmr.com>

* unit test for issue #11717

* fixing test lint style issue

* update codes according review comments

---------

Signed-off-by: Hu, Vince <Qingkun.Hu@fmr.com>
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

2 participants