Shape of gauge dial

[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.

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.

[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!

[zaneta]

Great! Thank you for help Hubert.

[hubert.k]

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

[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.

[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!