Highcharts custom guage dial path

[sulemanrai]

I am trying to use the path property to create a custom needle for the gauage dial but i cant figure out how to properly use the path. I am referring to this as an example https://jsfiddle.net/gj3z2ucr/ . I need to create a needle with a circle at the end as shown in the image below. here is the svg i have.

Code: Select all

<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.79102 6.73065L15.6608 6.53345" stroke="#242E2C" stroke-width="2"/>
<circle cx="4.79204" cy="6.73066" r="3.45714" transform="rotate(-59.034 4.79204 6.73066)" fill="#242E2C"/>
</svg>

How can i create the path in the options

[michal.f]

Hello,

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

You need to use some vector graphics tool that offers the ability to flatten the shapes, then you can use the d attributes of all paths as one string: https://jsfiddle.net/BlackLabel/zm5c840u/

Let me know if you have any further questions!
Best regards!

[sulemanrai]

Thanks for the feedback. Its really helpful.

[michal.f]

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

Best regards!