ty2610
Posts: 6
Joined: Wed Jun 30, 2021 2:44 pm

How to Use Custom Local Image For Context Menu Button

I would like to use a custom image in the file structure of my project for my context menu button. I would like a sideways kabab menu, but I cant seem to figure out the correct format to make this happen. Here is my guess out of many different iterations. I am attempting to set it programmatically.

Code: Select all

templatechartOption.highchartOptions.exporting.buttons.contextButton.symbol = 'image(../../../../assets/images/contextButton/Ellipsis.png)';
I've seen http://jsfiddle.net/BlackLabel/fdutoqfh/, http://jsfiddle.net/BlackLabel/y6825fqo/, but I've never got the local file to work, and I really don't know how to write it in SVG.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to Use Custom Local Image For Context Menu Button

Hi,

Thanks for contacting us with your question!

I've tried to reproduce the chart with a local svg image and everything looks fine.
Here is the demo with the external svg file: http://jsfiddle.net/BlackLabel/Lwcmpe87/

Please, check your image path again and try to use this structure:

Code: Select all

exporting.buttons.contextButton.symbol = 'url(...)';

Let me know if that worked for you!
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
ty2610
Posts: 6
Joined: Wed Jun 30, 2021 2:44 pm

Re: How to Use Custom Local Image For Context Menu Button

That fiddle doesn't experience the issue I'm running into because it is requesting a file from an external web source. I have the file locally in my project structure, and I want to show it, and cant figure the syntax to achieve that. Is there a fiddle that has the file in the same directory as the ts/html?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to Use Custom Local Image For Context Menu Button

I couldn't attach a local file to the fiddle, but I wanted to show you, that I used the same code and SVG image, and It worked for me, so the problem must be in the path.

Have you modified the path's structure as I mentioned in the previous post?

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
ty2610
Posts: 6
Joined: Wed Jun 30, 2021 2:44 pm

Re: How to Use Custom Local Image For Context Menu Button

Hi, Yes I have. I don't think it's the path, reason being is I can go to the ts file's location in terminal and use that pathing to get to the image. You're saying you can use the url and point to a local file? Do you mind pasting what your path looks like? Only thing I can think of is that my formatting or something is off, even if that is unlikely.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: How to Use Custom Local Image For Context Menu Button

Hi,

I have a folder with three files: index.html, script.js and img.svg. My path to the image is:

Code: Select all

symbol: "url(img.svg)"

I've noticed you are using "Ellipsis.png", but you wanted to add an SVG right? Maybe you wrote the wrong image format?

You can also add svg path directly to the chart, for example: http://jsfiddle.net/BlackLabel/fdutoqfh/

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”