How to display highchart series line marker symbol from local image object?

Question

I'm trying to get a few custom symbols in Highcharts. I'm currently following the specs:

marker: {
  symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}

However, this requires a network call, which I'm trying to avoid by pre-caching the image. I created a custom image before loading the chart.

var sun = new Image();
sun.src = 'https://www.highcharts.com/samples/graphics/sun.png'

As expected, this code preloads the image (as seen in the network tab of Chrome Developer Console), but when I load the graph the same url loads again. My guess is that this is particular to Highchart library.

I also tried to directly set the symbol value to the image like symbol: sun but that didn't work.

I'm wondering how else to approach this. Maybe converting the local image into a blob and then setting it as the value of the symbol? I'll try that but would welcome any other ideas.

Answer 1

I found the answer. Turns out that we can just convert the image to base 64 and then setting that as symbol. Instead of 100 - 800 ms in loading time I get about < 100 microseconds.

Answer 2

Thanks @Bowen Yang, yes, base64 works. Convert image on https://elmah.io/tools/base64-image-encoder/ , then copy code in CSS usage to highchart symbol.