convert SVG in PowerPoint to shapes for Polar Chart is very large and off the chart

[rignaldspan]

We are implementing the new highcharts and something we use is to convert SVG in PowerPoint to shapes.
This works for most Highchart graphs but we have an issue with the polar chart.

Live demo with steps to reproduce

https://www.highcharts.com/demo/polar
Export to SVG and paste in PowerPoint and convert to Shapes but then it looks not correct and one shape is too big.

Product version

Highcharts 9.1.1

[raf18seb]

Hi @rignaldspan and thank you for reporting the issue.

This is caused by the axis labels group's height which is, in case of this demo, over 10.000px:

[raf18seb]

After further investigation, the height is over 10.000 because the last label is hidden by setting its y to -9999. This is intended behavior and shouldn't be considered as a bug.

However, the workaround is very simple: in the PowerPoint, after converting to Shapes, find the highest element, ungroup it, go on top of a page, find the highest labels elements (texts) and delete them:

[rignaldspan]

Hi Rafal, Thank you for investigating but how is this intended behaviour and isn't there a way to not have this extra hidden label. The workaround is very cumbersome and will have clients to do extra steps. Best Regards, Rignald Op di 15 jun. 2021 om 14:05 schreef Rafał ***@***.***>:

…

After further investigation, the height is over 10.000 because the last label is hidden by setting its y to -9999. This is intended behavior and shouldn't be considered as a bug. However, the workaround is very simple: in the PowerPoint, after converting to Shapes, find the highest element, ungroup it, go on top of a page, find the highest labels elements (texts) and delete them: [image: PowerPoint shapes] <https://user-images.githubusercontent.com/23310742/122049424-b0f3c200-cde2-11eb-9136-6b950df17558.gif> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#15863 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUMYQALFCK54G3R6BSMXCC3TS462JANCNFSM46J22MMA> .

-- With kind regards/Met vriendelijke groeten, Rignald Span Managing Director EyeQuestion Software (Logic8 BV) The Netherlands Tel.: +31(0)481350370 Mobile: +31(0)652031206 E-mail: ***@***.*** Internet: www.eyequestion.nl EyeQuestion Software (Logic8 BV) - Aamsestraat 90D - PO Box 206 - NL-6660 AE - Elst(Gld) - The Netherlands The information contained in this communication is confidential and may be legally privileged. It is intended solely for the use of the individual or entity to whom it is adressed and others authorised to receive it. If you are not the intended recipient you are hereby (a): notified that any disclosure, copying, distribution or taking any action with respect to the content of this information is strictly prohibited and may be unlawful, and (b): kindly requested to inform the sender immediately and destroy any copies. Logic8 does neither accept any responsibility and/or liability for the improper and incomplete transmission of the information contained in this communication nor for any delay in its receipt.

[raf18seb]

@TorsteinHonsi is it possible to implement a different solution for axis labels in polar so there are no DOM elements with such a big height?

[TorsteinHonsi]

Good question. The practice of setting y: -9999 is a bit hacky, it would be better if we were able to use regular .hide() and .show() calls, and if there are problems with that, implement the fix in those functions instead.

Minimal demo

I have created a demo where we loop over the SVG's first level child elements to verify that the bounding boxes are way off the chart (literally): https://jsfiddle.net/highcharts/eq0cwjvz/

The issue does not only apply to polar charts. There are other situation where we use the same trick to hide labels, like with overflowing data labels: https://jsfiddle.net/highcharts/eq0cwjvz/1/

Workaround

A drop-in workaround is to remove all these elements before creating the export:

// Workaround for #15863, elements far off the chart in export
// causing bounding box trouble in PowerPoint
Highcharts.wrap(Highcharts.Chart.prototype, 'getChartHTML', proceed => {
	[].forEach.call(
    	this.container.querySelectorAll('g[transform], *[y="-9999"]'),
        element => {
			if (
            	element.getAttribute('y') === '-9999' ||
            	element.transform.baseVal[0].matrix.f <= -9999 // translate Y
            ) {
                element.remove();
            }
        });
    return proceed.call(this);
});

See it in action on jsFiddle.

@raf18seb I think we should try to remove all these cases of setting 'y', as it is a counterintuitive of hiding an element. We should try to use .show() and .hide() instead. One caveat to look out for is that for each time we do hide, we need to add a show() if the same element should be shown again. That is new, because with the y: -9999 hack, the element would automatically become visible when a valid y position was set.

If it turns out that this approach has unforeseen consequences, we need to implement some form of the workaound above in the exporting module.

[pawelfus]

Let me check this.

List of current -9999 translations:

• - scrollbar.group
• - axis.title
• - SVGElement.hide(true) - hides by translation
• - Data Labels (alignDataLabel method)
• - Flag Series (Data Labels)
• - Stack Labels
• - tick.label
• - Gantt: tick.labelIcon
• - SVGElement.fadeOut() - apparently used by Tooltip
• - SeriesLabel module
• - imgs in IE11:

                        // Special case for SVGs on IE11, the width is not
                        // accessible until the image is part of the DOM
                        // (#2854).

• - AreaRange & Draggable points: resizers are placed at -999 if low or high is not defined
• - RangeSelector hides HTML inputs and the dropdown this way
• - Annotations: Circle, Ellipse, Image, Label, Path, Rect and ControlPoints
• - 3D columns are placed that way when outside the extremes
• - Pie Series (Data Labels)