highcharts / highcharts-ios

iOS wrapper for Highcharts.
Other
127 stars 39 forks source link

BUG: Pictorial charts cut off #426

Closed skuske closed 1 year ago

skuske commented 1 year ago

I am using the new pictorial charts and I do have some trouble with it. SVG rendering of the chart is cut off on the right side of the chart, and the SVG is not centered horizontally. The issue is with any SVG I use.

On iPhone screens I can get around the issue by setting marginRight and marginLeft of the chart (so that the SVG is centered horizontally), but on larger screens like on iPad Pro this does not help.

What can I do to fix that, what can I do to somehow control the position where the SVG is rendered in what size? I would like the SVG to have a specific size and position (centered horizontally) within the HIChartView frame. Sample screenshot and source code attached.

pictorial

samplecode.txt

skuske commented 1 year ago

Update: I have found that the issue is related to the fact that the xAxis is hidden. If I show the xAxis, the SVG is not cut off. However, I don't want the xAxis to be visible as it makes no sense, but once I hide the xAxis, the issue is back.

skuske commented 1 year ago

Update 2 - this somewhat helps, but not completely:

    HIXAxis *xaxis = [[HIXAxis alloc] init];
    xaxis.visible=[NSNumber numberWithBool:YES];
    xaxis.labels = [[HILabels alloc] init];
    xaxis.labels.style=[[HICSSObject alloc] init];

    // The following helps, but not completely
    xaxis.labels.style.color=@"#00000000"; // required to hide the xAxis labels. If not set, the labels still show. If labels are hidden by enabled=NO, SVG is cut off
    xaxis.labels.style.fontSize=@"0px"; // even now the SVG is slightly cut off on the right. If fontSize is removed, the SVG is fine, but the xAxis still requires space between the SVG and the Legend
    xaxis.tickColor=[[HIColor alloc] initWithUIColor:[UIColor clearColor]]; // Required to hide the ticks. If tickAmount is set to 0, then the SVG is compressed horizontally
    xaxis.lineWidth=@0;

pictorial2

skuske commented 1 year ago

Update 3 - this fixes the small cut off that was left in my Update 2 above:

xaxis.labels.style.fontSize=@"-1px";

fontSize must be negative to get rid of the small right cut off of the SVG. However, there's still a lot of space between the SVG and the legend now.

kamil-musialowski commented 1 year ago

Closing the issue as it is a Highcharts Core issue, see here: https://github.com/highcharts/highcharts/issues/20066

skuske commented 1 year ago

OK, it's a core issue, but: how can I workaround this? I am close to get that fixed with tweaking the xAxis, but I still need help with removing the space the (invisible) xAxis (red box in screenshot) occupies and, the SVG is still not centered:

pictorial3

skuske commented 1 year ago

Update: on larger screens my workaround does not help (iPad)