chartjs / chartjs/Chart.js

Scales don't update when toggling data (compared to datasets) visibility

Open
#11,949 2 comments 1 reaction 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

I would expect the scales to update when some of the data has been toggled off, similar to when a dataset is toggled off.

In particular:
- the "y" scale should auto-scale / shrink to the bounds of the data being displayed
- the "x" category scale which shows a column for each piece of data should ideally remove that column if its data is hidden

### Current behavior

Currently, the scale factors in all data regardless of if they're hidden (only shrinking the scale if a *dataset* gets hidden)

### Reproducible sample

https://codepen.io/alexrcoleman/pen/KKOryXe

### Optional extra steps/info to reproduce

Toggle some categories using the legend (referencing the pie chart legend plugin settings which uses chart.toggleDataVisibility() to hide one piece of data), observe that the y-axis does not resize and the x-axis continues reserving space (making the ability to toggle that data fairly pointless here)

### Possible solution

The scales could be updated to only factor in visible data. For category scale, this might require a bit more to only consider labels coming from visible data. For a numerical scale though, it should simply only use visible values.

### Context

I am trying to display a bar chart with many categories (20-50). It should generally behave the same as a pie chart (helping the user view the breakdown of a dataset), but using bars rather than pie to allow easier relative comparison of sizes.

The downside of a bar chart is the many small slices of the "pie" take up a lot of real estate. By default, I only want to mark 5 of the 20-50 categories as visible so the user can see all the options in the legend, but the bar chart isnt too cluttered by the full list. In a pie chart, the pie would properly resize to include only the visible items, but the scales on a bar chart do not adjust.

This is related to an old feature request I filed: https://github.com/chartjs/Chart.js/issues/11319

I've already hacked a version of CategoryScale which supports this, but I think the "y" scaling in particular feels more like a bug than feature request.

### chart.js version

v4.4.6

### Browser name and version

_No response_

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