Accepted answer

i understand that u are trying to change the background image in the highchart.

just giving chart.plotbgimage.attr({href: 'xxx'}); will not help, u will need to reload the entire highchart.

i did this (without the live data part as its working fine for you!!) fiddle


you can disable stanrdard bacrkgoudn color by:

backgroundcolor: 'rgba(255,255,255,0)'

then set backgorund in css for #contaniner and use jquery / javacript to modify it.



this is how i changed the background image of my chart: download any pattern and put it in your image folder, now simply add the following code in your highchart:

  chart: {  

write the name of image in the paths i.e. '/assets/your_image.png'


the command:

chart.highcharts().plotbgimage.attr({href: picturepath});

allows to change the image on the chart. i changes the image after click the button, so this works. in my project picturepath was the path to a folder with a picture: "pictures/example.png"

the exact code:

self.chartplot = chart.highcharts();
self.pic = ...;
self.chartplot.plotbgimage.attr({href: self.pic});// changes the image on the chart.

now (nov 2014) i'm working on my project with actively using highcharts and also this command. so after 1 or 2 weeks it will be implemented there, you can see.

Related Query

More Query from same tag