anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Custom SVG marker

Hi,

I see from the below demo, we can have custom markers symbols. But I am trying to create one which I want to show as a Warning Triangle(Exclamatory mark inside triangle) and use this as a marker but I am not unable to create that VML. How can I create this icon(screenshot) as SVG icon Renderer?

Please find the attachment below for the icon which I am trying to add as a marker and the fiddle link below

jsfiddle.net/wfzLce1n/1/
Attachments
triangle_icon.PNG
triangle_icon.PNG (1.16 KiB) Viewed 1894 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom SVG marker

Hello,

You can easily use custom markers in your charts (they don't even have to be SVGs). Take a look at this demo, with some custom markers:
https://jsfiddle.net/BlackLabel/4ohyedr8/
Everything you need can be achieved by setting a custom symbol URL in series.marker.symbol property, see API Reference:
https://api.highcharts.com/highcharts/p ... ies.marker

Please do not hesitate to contact us with any futher questions!
Have a good day
Kamil Musiałowski
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Custom SVG marker

Hi,

Thanks for the response. but I want to add markers as only SVGs not just images as its a requirement because the images(.png) are not rendering properly when at higher resolutions.Kindly suggest how to make this custom marker as SVG renderer to highcharts. Appreciate your help!Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Custom SVG marker

Hi there,

Sorry I didn't get your previous post right. You can use the SVG as a base64 image, or link it from your local folder i.e

Code: Select all

url(images/your_image.svg)
Please take a look at the demo, with an SVG icon created from a base64 image.
DEMO: https://jsfiddle.net/BlackLabel/3jr7Lzmn/

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”