Page 1 of 1

Shape of gauge dial

Posted: Wed Jul 06, 2022 10:31 am
by zaneta
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.

Re: Shape of gauge dial

Posted: Wed Jul 06, 2022 11:56 am
by hubert.k
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!

Re: Shape of gauge dial

Posted: Thu Jul 07, 2022 7:21 am
by zaneta
Great! Thank you for help Hubert.

Re: Shape of gauge dial

Posted: Thu Jul 07, 2022 7:22 am
by hubert.k
You're welcome! In case of any further questions, feel free to contact us again.

Re: Shape of gauge dial

Posted: Thu Jul 07, 2022 7:38 am
by zaneta
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.

Re: Shape of gauge dial

Posted: Thu Jul 07, 2022 8:44 am
by hubert.k
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!