score:0

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

score:0

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.

example: http://jsfiddle.net/LGzuj/

score:1

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: {  
    plotBackgroundImage:'/assets/lightpaperfibers.png',
  },

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

score:1

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 www.tanks-vs.com with actively using Highcharts and also this command. So after 1 or 2 weeks it will be implemented there, you can see.


Related Articles