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

Shape of gauge dial

Wed Jul 06, 2022 10:31 am

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 63 times

hubert.k
Posts: 675
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

Wed Jul 06, 2022 11:56 am

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

Thu Jul 07, 2022 7:21 am

Great! Thank you for help Hubert.

hubert.k
Posts: 675
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

Thu Jul 07, 2022 7:22 am

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

Thu Jul 07, 2022 7:38 am

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: 675
Joined: Mon Apr 11, 2022 11:48 am

Re: Shape of gauge dial

Thu Jul 07, 2022 8:44 am

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”