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

add custom svg icon and text at the bottom right corner of the chart area(credits area)

Hi ,

How can I add custom svg icon and text at the bottom right corner below the legends in the chart area. Its like we almost want to add the icon and text as disclaimer to the charts at the credits area i.e instead of highcharts.com at the bottom right, want to add icon and text(you can find the screenshot below, where the highlighted credit area should be replaced with custom icon and text) . Kindly help in achieving this.

Fiddle link: http://jsfiddle.net/5e3pu9ad/
Attachments
custom_svg_icon.PNG
custom_svg_icon.PNG (11.75 KiB) Viewed 896 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

Hi anu_1555!
We appreciate you reaching out to us!

You can use chart.renderer.image and have it in the correct position when resizing your chart. Also, a good idea would be to disable credits and render on your own using a renderer.
Here you can find code that can help you:

Demo: http://jsfiddle.net/BlackLabel/nska7oj5/
API Reference: https://api.highcharts.com/class-refere ... VGRenderer

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

Thanks ! That works but how can i add svg element instead of png. below is the svg i would like to add instead of png. Kindly help.Thanks again

Code: Select all

<svg >
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>
fiddle : http://jsfiddle.net/BlackLabel/nska7oj5/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

anu_1555,
You can use the link to SVG Icon, like in this demo: http://jsfiddle.net/BlackLabel/Lx6f53yu/
Or if you want to draw a path you can use methods from SVG Renderer e.g. https://api.highcharts.com/class-refere ... derer#path

Regards!
Hubert Kozik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

Hi,

Thank you , will checkout but I have observed one strange thing happening in fiddle, when i resize the browser, i am getting multiple texts and svg icons at the bottom as shown in the screenshot and also the text and icons moving from the corner to the middle. How can we avoid this happening and always have one text and icon at the bottom corner even on resizing or on different resolutions?

just zoomed in and zoomed out the browser and have observed this issue for the below fiddle.

http://jsfiddle.net/BlackLabel/Lx6f53yu/
Attachments
duplicates.PNG
duplicates.PNG (17.47 KiB) Viewed 867 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

anu_1555,

Yes, because I didn't make it responsible. You can add some if-statement and conditionally use translate method to move custom SVG elements based on chart dimensions - just like in the demo below.

Demo: http://jsfiddle.net/BlackLabel/vwg4jL95/

Regards!
Hubert Kozik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

Hi,

Thankyou so much! I have one more question. I am trying to add svg icon through the path and adding the image as below in the fiddle. I am again getting duplicate images when we resize the browser as shown in the screenshot. Am I setting the transform property correctly here to avoid the duplicates? Could you please help in avoiding the duplicate svg images when adding through the path. below is the fiddle link
duplicates_svg.PNG
duplicates_svg.PNG (11.48 KiB) Viewed 852 times
http://jsfiddle.net/fajxpomv/17/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: add custom svg icon and text at the bottom right corner of the chart area(credits area)

anu_1555,

It's kind of weird behaviour, but you can avoid this by using destroy method if the SVG element exists. I think it is related to your path array because HC (https://api.highcharts.com/class-refere ... derer#path) require this parameter as an SVG path definition in array form.

Demo: http://jsfiddle.net/BlackLabel/zdsfumhr/

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”