jinsean
Posts: 21
Joined: Thu Aug 18, 2016 7:22 pm

how to align SVG Text node for mapNavigation zoom button

Hi. When using chart.styledMode = false, the SVG text node is misaligned. I know there's alignment options for the button but there doesn't seem to be options to adjust alignment for the SVG text node itself. I tried all the alignment options, but it simply adjusts the outer button and not the text itself. Anyone know how to fix this?
mapzoom.png
mapzoom.png (1.89 KiB) Viewed 687 times
jinsean
Posts: 21
Joined: Thu Aug 18, 2016 7:22 pm

Re: how to align SVG Text node for mapNavigation zoom button

sorry typo. when chart.styledMode = true (as in using CSS to style)

here is a link to a fiddle showing the problem https://jsfiddle.net/nk6z1Lmc/12/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: how to align SVG Text node for mapNavigation zoom button

Hi jinsean!
We appreciate you reaching out to us!

It seems, that the only way is to use some CSS styling like these lines:

Code: Select all

.highcharts-map-navigation text {
	text-anchor: middle;
	transform: translate(8.5px);
}
Here is a working demo (lines 859-862 in the CSS tab): https://jsfiddle.net/BlackLabel/cLk71vs0/

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer
jinsean
Posts: 21
Joined: Thu Aug 18, 2016 7:22 pm

Re: how to align SVG Text node for mapNavigation zoom button

that seems to work! thank you @hubert
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: how to align SVG Text node for mapNavigation zoom button

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”