[feature] Add clip option for scatter, line, bar, lines, custom chart

Currently we have overflow issue on the axis with fixed min/max. As described in the following issues.

• #11086 Bug with stack bar with min value
• #9200 Incorrectly render lines overflow the chart
• #10010 Scatters are rendered outside of grid when setting axis range
• #10224 Toolbox zoom returns chart in odd state

They are all related to the function of clipping the overflowed graphics.

So I’m planning to add a clip option in these series, whose default value is true.

The clipping strategy varies between series to achieve a good visual quality. For example:

• Scatter series will ignore the graphics whose centroid is outside the grid.
• Line series will use a rect clip path and let canvas do the clipping. But the symbol in line series will follow scatter series.
• Bar series will do an intersection operation with the grid rect.
• Custom series will also use a clip path to do the clipping. Since we can’t sure what graphics will be used.

Series needs clip option

• scatter
• line
• bar
• pictorialBar
• lines
• candlestick
• custom

Q: Why not use clip path for all series?

A: Let canvas do clipping may cause visual artifacts on particular series. For example:

• It may cut the graphics into half.
• It may cause line along the edge looks thinner

Reference of highcharts. https://api.highcharts.com/highcharts/series.line.clip

[Ovilia]

For example, if I wish to keep my grid area clean and do not want anything to overflow from it, or if there is axis tick label on the left side and I don’t want the circle to overflow from the grid to touch the axis label. In this case, neither of the situations when the circle is on the top of the axis label or under it creates a satisfying result.

This is just one example. What I wish to say is that it is important (to provide the ability) to keep the series inside the grid area to avoid unexpected results.

[Ovilia]

I’m cool with most of these. Just to be clarified, what happens to scatter items whose centroid is inside the grid but part of the circle is outside the grid area? I think (A) displaying the whole graphic and (B) displaying the part inside the grid both make sense. Would it be possible for a user to decide which policy to use?