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:
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.
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
parsingkey 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 theparsing.xAxisKeyandxAxisIDfield 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