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