skipNulls is not working with dataset parsing

[jmtimko5]

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:

Current behavior

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

Skip Nulls broken with parsing and three dimensions:

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]

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.