UPDATE 2:
To begin with, adjust the numbers to match your specific requirements (width, height, x, y, etc). It seems like you have also altered your chart type. To revert back to a spline chart, use the following code:
chart: {
renderTo: 'your-container-id', // ID of chart div
type: 'spline', // specify chart type
....
Ensure that the chart does not resize when the browser window is resized by setting the width attribute:
<div id="your-container-id" style="width:1000px;"></div>
, or set it to the desired size.
Also, adjust the right margin to include negative space on the right side of the chart:
chart: {
renderTo: 'your-container-id', // ID of chart div
type: 'spline', // specify chart type
margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px of negative space on the right side of the chart. adjust as necessary
....
Lastly, position the image on the right side of the chart:
chart: {
renderTo: 'your-container-id', // ID of chart div
type: 'spline', // specify chart type
margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px of negative space on the right side of the chart. adjust as necessary
events: {
load: function() {
this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 900, 105, 100, 100).add(); // x=900px moves the image off the chart (approximately width of div minus right margin). Adjust as needed.
}
}
....
If resizing of charts is required, a function needs to be written to reposition the graphic upon resize. However, that topic is for another discussion.
If the provided solution does not align with your intentions, please provide more details about the desired outcome.
UPDATE 1:
Adding backgrounds to the credit section of the chart is not feasible. Typically, I disable it unless branding with our company name and link is required. Consider utilizing the legend functionality or incorporating a custom image with a wide margin instead.
Refer to this modified fiddle from the highcharts site to visualize the concept: jsFiddle Link
In summary:
Include a standard legend in the chart with show/hide capability:
legend: {
layout: 'vertical', // vertically stacked legend. Can also be horizontal and positioned at the bottom for a sleek linear legend
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 380, // moved to the right side of the chart
y: 200, // dropped down by 200px
floating: true, // positioning enabled
shadow: true
},
Add a background image aligned to the far right:
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 150, 100, 80 ], // wide right margin to accommodate image outside the chart
events: {
load: function() {
this.renderer.image('http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png', 400, 105, 100, 100).add(); // x=400px shifts the image off the chart
}
}
}
NOTE: The width of the chart container is set to 500px.
I trust this sheds light on the matter.
ORIGINAL ANSWER:
Last week, I updated all our company charts to utilize highcharts. Employ the following code snippet for incorporating a background image:
chart: {
renderTo: 'container', // where should the chart be placed?
type: 'column', // what type of chart is being used?
margin: [ 50, 50, 100, 80 ], // margins between the outer edge and plot area
events: {
load: function() {
this.renderer.image('http://www.domain.com/images/logo.jpg', 150, 105, 545, 141).add(); // add image(url, x, y, w, h)
}
}
},
The parameters for the image are as follows: image(url, x, y, width, height);