chartjs / chartjs/Chart.js

skipNulls is not working with dataset parsing

Open
#11,717 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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](https://github.com/chartjs/Chart.js/assets/6867087/63a7bfa3-13a3-4351-9c69-59f309b907be)

### Current behavior

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

Skip Nulls broken with parsing and three dimensions:
![image](https://github.com/chartjs/Chart.js/assets/6867087/22a02f26-b285-4af7-ac19-7150e6c034fa)

### 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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.