zaneta
Posts: 3
Joined: Wed Jul 06, 2022 10:28 am

Shape of gauge dial

Hello, could I ask you for a little help? I need a triangle like in the picture but I can't change the path to svg.
Image
I already have this solution https://jsfiddle.net/rafal_S/st58ady3/ but the last step is the shape.

Thank you and have a nice day.
Attachments
Výstřižek.PNG
Výstřižek.PNG (53.47 KiB) Viewed 249 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

Hello zaneta!
Welcome to our forum and thanks for contacting us with your question!

I have prepared a little bit different demo for you with the usage of custom code written by Rafal. I have changed the marker to triangle and also I extended it to use another custom property "size" in dial object, which controls the size of triangle dial. Besides this, the main logic is same as in your demo.

Demo: https://jsfiddle.net/BlackLabel/yo9ewavp/

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
zaneta
Posts: 3
Joined: Wed Jul 06, 2022 10:28 am

Re: Shape of gauge dial

Great! Thank you for help Hubert.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
zaneta
Posts: 3
Joined: Wed Jul 06, 2022 10:28 am

Re: Shape of gauge dial

I only noticed now, that the triangle show on a little bit different value. See https://jsfiddle.net/t952061w/ The red line is on 100 and triangle too.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

zaneta,
There was a small bug in calculating translateX of the arrow. This is a custom code, so some bugs can occur. In the demo from this post I have corrected it, please check it below.

Demo: https://jsfiddle.net/BlackLabel/q9fkwdc8/

Best regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”