Some chart features exceed the chart's bounds when zooming

[meirinberg]

I use the .xy zoom setting across various charts. I've noticed that some chart features (e.g. lines, areas, and columns) will move past the chart boundaries and overflow onto the chart title, axes, and legend. However, it appears that the marker dots always stay within the chart region, which is the correct/desired appearance. This issue purely cosmetic. Is there a way I can ensure all the chart features are cropped inside the charting area when zooming?

I have attached two gifs for visual reference. Thank you.

[AAChartModel]

Please update AAChartKit-Swift to be latest version 9.1.0, the problem will be solved.

[AAChartModel]

PS:

However, I found during testing that when the chart's zoomType property is set to .xy, if the chart type is a stacking type, there are issues with user two-finger zooming. When the chart is of a non-stacking type, user two-finger zooming works as expected.

[meirinberg]

Thank you! I updated to 9.1.0 and I see that the non-stacking chart features are now cropped at the chart boundary.

I do see issues on the stacked charts when using the .xy zoom (which you referred to in the comment above). The issues I see relating to .xy zooming on stacked charts are:

1. Some features still exceed the chart bounds. This problem is cosmetic, so it's not a critical issue.
2. After pinching to zoom in, it seems impossible to return to the default y-axis range by pinching to zoom out (the upper y-axis value becomes fixed). Furthermore, I no longer see the "Reset Zoom" button, so I don't seem to be able to return to the default zoom unless I force-reload the entire chart. This problem is more concerning as the user becomes stuck in an improper zoom-state. Let me know if you would like me to provide more information about this.

As always, thank you.

[AAChartModel]

PS:

However, I found during testing that when the chart's zoomType property is set to .xy, if the chart type is a stacking type, there are issues with user two-finger zooming. When the chart is of a non-stacking type, user two-finger zooming works as expected.

I found that setting the singleTouch property of AAZooming to true can partially resolve this issue.

Here is a complete configuration example:

static func simpleZoomingChart2() -> AAOptions {
        AAOptions()
            .chart(AAChart()
                .type(.line)
                .zooming(AAZooming()
                    .singleTouch(true)
                    .type(.xy)
                    .pinchType(.xy)
                    .resetButton(AAResetButton()
                        .theme(AAButtonTheme()
                            .fill(AAColor.yellow)
                            .stroke(AAColor.green)
                            .strokeWidth(3)
                            .r(3)
                            .states(AAButtonThemeStates()
                                .hover(AAButtonThemeStatesHover()
                                    .fill(AAColor.red)
                                    .style(AAStyle()
                                        .color(AAColor.white))))))))
            .colors(["#04d69f", "#1e90ff", "#ef476f", "#ffd066"])
            .plotOptions(AAPlotOptions()
                .series(AASeries()
                    .stacking(.normal)
                    .marker(AAMarker()
                        .radius(0))))
            .tooltip(AATooltip()
                .followTouchMove(false))
            .series([
                AASeriesElement()
                    .name("Tokyo Hot")
                    .lineWidth(5.0)
                    .fillOpacity(0.4)
                    .data([0.45, 0.43, 0.50, 0.55, 0.58, 0.62, 0.83, 0.39, 0.56, 0.67, 0.50, 0.34, 0.50, 0.67, 0.58, 0.29, 0.46, 0.23, 0.47, 0.46, 0.38, 0.56, 0.48, 0.36]),
                AASeriesElement()
                    .name("Berlin Hot")
                    .lineWidth(5.0)
                    .fillOpacity(0.4)
                    .data([0.38, 0.31, 0.32, 0.32, 0.64, 0.66, 0.86, 0.47, 0.52, 0.75, 0.52, 0.56, 0.54, 0.60, 0.46, 0.63, 0.54, 0.51, 0.58, 0.64, 0.60, 0.45, 0.36, 0.67]),
                AASeriesElement()
                    .name("London Hot")
                    .lineWidth(5.0)
                    .fillOpacity(0.4)
                    .data([0.46, 0.32, 0.53, 0.58, 0.86, 0.68, 0.85, 0.73, 0.69, 0.71, 0.91, 0.74, 0.60, 0.50, 0.39, 0.67, 0.55, 0.49, 0.65, 0.45, 0.64, 0.47, 0.63, 0.64]),
                AASeriesElement()
                    .name("NewYork Hot")
                    .lineWidth(5.0)
                    .fillOpacity(0.4)
                    .data([0.60, 0.51, 0.52, 0.53, 0.64, 0.84, 0.65, 0.68, 0.63, 0.47, 0.72, 0.60, 0.65, 0.74, 0.66, 0.65, 0.71, 0.59, 0.65, 0.77, 0.52, 0.53, 0.58, 0.53]),
            ])
    }

Refer to the online doc:

• https://api.highcharts.com/highcharts/chart.zooming.singleTouch

[meirinberg]

Thank you for following up. I've noticed that the reset button no longer appears unless singleTouch is enabled.

Broadly speaking, there seem to be a handful of mysterious issues involving the zoom features. Do you think they are problems in Highcharts or problems related to the swift-wrapper?

[AAChartModel]

I tested it, and it seems the issues are with Highcharts itself. The problems persist even without using the swift-wrapper.

[meirinberg]

Thank you for that information. How can we raise this issue with Highcharts so they can fix this on their end?

[AAChartModel]

I have brought up these issues but have not yet received a response.

• Reset button not showing when setting zoom type on iPhone highcharts/highcharts#22128
• On iPhone, after zooming in, using two fingers to zoom out does not work for a stacking type chart. highcharts/highcharts#22129

[meirinberg]

Excellent, thank you!