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

[pissang]

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

• Bug with stack bar with min value #11086 Bug with stack bar with min value
• Incorrectly render lines overflow the chart. #9200 Incorrectly render lines overflow the chart
• Scatters are rendered outside of grid when setting axis range #10010 Scatters are rendered outside of grid when setting axis range
• Toolbox zoom returns chart in odd state #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

[100pah]

Agree.

For the

Q: Why not use clip path for all series?

I can give a bad case here:

BTW, what the default value of the option clip for each series will be?

Probably for custom series, the default value should better be false,
otherwise, some current cases might be broken. And usually, the clipping
have to be processed case by case in custom series.

[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?

[100pah]

@Ovilia
Which scenario the (B, displaying the part inside the grid) is needed for scatter and line chart?
I've thought about it for a while but can not find some cases that are reasonable enough.

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

[pissang]

Probably for custom series, the default value should better be false,
otherwise, some current cases might be broken. And usually, the clipping
have to be processed case by case in custom series

I think it's fine if custom series have its own default value.

[100pah]

I don't want the circle to overflow from the grid to touch the axis label

This case probably makes sense, especially when dataZoom available and the symbols are too big or the labels are too long.

[pissang]

@100pah @Ovilia I found this issue #11010 (comment) about overflow in candlestick series.

I'm not sure if we need to clip the shape in this scenario

[Ovilia]

I think it should absolutely be clipped without explicit configuration. Why asking?

[ngoc308]

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?

How can I decide which policy to use in Echarts version 4.9.0?
I see now all circle display as (A) solution. But, in my case, I expect display as (B) solution or ignore circles that have a part outside the grid.