Still Not showing all x-axis label, stepped line's Filling when disable Clip

[gerhuy66]

Hi, I think this is the bug, The chart didn't show all bars when I add too much data that make the chart element very wide.
Then I add the attribute "clip: false" to the chart option and the bars are showing but the x-axis label and the filling part of the stepped line don't.

Expected Behavior

The chart should show all x-axis labels, stepped line filling when I add clip: false in the options.

Current Behavior

Only missing bars were shown in the wide chart.

Possible Solution

Can we fix the clipping problem or apply the "clip: false" to the x-axis label and stepped line filling.

Steps to Reproduce

Please check the example here: https://codepen.io/gerhuy66/pen/qBjrbeE

Context

I'm implementing a horizontal scroll chart that can be contained so many columns. So, this problem prevents me to do it, it's only working fine if the data columns are smaller than 150(actually the canvas width is about 16252 pixels).

Environment

Chart.js version: 3.4.1

[kurkle]

You could also limit the visible data segment on a smaller canvas (did not implement the scrollbar, but you can use the same logic for that):
https://codepen.io/kurkle/pen/VwWzvEM

[kurkle]

These are browser limitations. Chrome 97 renders everything (the clipping is fixed). Firefox renders nothing. Chrome 94 works as described here.
I don't think we can surpass the canvas element limitations any better that we already did.

Chrome Version 97.0.4668.2 (Official Build) canary (64-bit) (even with clip: false removed)

[kurkle]

@etimberg should we add a warning, something like:
"Most browsers do not render properly, when canvas dimension exceeds 16384 pixels (current size: WxH)"

[kurkle]

Duplicate of #4909