Rendering image via Java Script in highchart

Question

I am trying to render an image to display it on my highchart graph in shiny app but am unable to do so.

I tried this:

dataLabels = list(
  enabled = T,
  allowOverlap = T,
  style = list(
    fontWeight = "italic",
    fontSize = 11
  ),
  formatter = JS("
                           function(){
                            return(this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 160, 30, 30).add()+
                            '<br>sim API: ' + this.point.sim_api.toFixed(0));
                            }")
)

I expect that in graph the image should appear but it's not appearing.

Hi @Navneet, Where do you exactly want to render the image? In which chart element it should appear? — ppotaczek, Jul 04 '23 at 09:13
It should appear on the y-axis of the chart, also when you say 'chart element' what do you mean? — Navneet, Jul 05 '23 at 17:03

score 0 · Answer 1 · answered Jul 06 '23 at 11:00

By using formatter functions, you need to always return a string from it. So, you can use the below approach:

  yAxis: {
    labels: {
      useHTML: true,
      formatter: function() {
        return '<div style="height: 30px; width: 30px; background-image: url(https://www.highcharts.com/samples/graphics/sun.png)"></div>'
      }
    }
  }

Or render an image in some chart event.

Live demo: http://jsfiddle.net/BlackLabel/jpmvhLkx/

API Reference: https://api.highcharts.com/highcharts/yAxis.labels.formatter

Rendering image via Java Script in highchart

1 Answers1