Question

Basically, this is a huge web-service based web application where hundreds of graphs can be displayed. I have just got involved in the project and need to implement a graph legend onto these dynamically generated graphs.

I know my image is loaded because when I enter an incorrect/random path I get the error:

Currently, the text from the CSS displays but images cannot be entered in it’s place because it only seems to allow one set of tags. I have already tried placing it as img in the display as well as changing Z-indexes and positions but it just doesn’t show anything, except for the text.

Here is the relevant CSS (I’ve already tried using background instead of backgroundImage btw):

credits: {
    enabled: true,
    text: 'Highcharts.com',
    href: 'http://www.highcharts.com',
    position: {
        align: 'right',
        x: -10,
        verticalAlign: 'bottom',
        y: -5
    },
    style: {
        cursor: 'pointer',
        color: '#909090',
        fontSize: '10px',
        backgroundImage: 'url("/image/example")'
    }   
}

and the potentially relevant JavaScript:

if (credits.enabled && !chart.credits) {
        creditsHref = credits.href;
    chart.credits = renderer.text(
        credits.text,
        0,
    0
    )
    .on('click', function () {
        if (creditsHref) {
            location.href = creditsHref;
        }
    })
    .attr({
        align: credits.position.align,
        zIndex: 8
    })
    .css(credits.style)
    .add()
    .align(credits.position);
}

Answer 1

UPDATE 2:

First off, you need to change the numbers to fit your situation (width, height, x, y, etc). Looks like you changed your chart type as well. To reset back to spline chart use this:

   chart: {
       renderTo: 'your-container-id', // chart div id
       type: 'spline', // your chart type
....

Next, we need to make sure that the chart DOES NOT resize on browser resize by setting the width: <div id="your-container-id" style="width:1000px;"></div> or set to whatever size needed.

Then, we need to set the right margin to make sure we have negative space to the right.

chart: {
 renderTo: 'your-container-id', // chart div id
 type: 'spline', // your chart type
 margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed
....

Finally, we render the image to the right side of the chart:

chart: {
 renderTo: 'your-container-id', // chart div id
 type: 'spline', // your chart type
 margin: [ 50, 150, 100, 80 ], // top, right, bottom, left. leaves 150px negative space on right side of chart. adjust as needed
 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 to move image off chart (approx div width minus right margin) adjust as needed
       }
     }   
....

If you need your charts resizing, then we need to write a function to re-position the graphic on resize. But that’s another chapter.

If I’m still in the wrong ballpark, please elaborate on the desired outcome.

UPDATE 1:

You can not add backgrounds to the credits section of the chart. i generally disable it unless we tag it with our company name and link. What you need is to use the legend functionality or if that is not what you need, use a custom image with a wide margin.

Check out this simple fiddle I snagged from the highcharts site and modified to fit what I was trying to explain: jsFiddle Link
OK, whats going on is:
Add standard legend to chart with hide/show functionality:

 legend: {
  layout: 'vertical', // stacked legend. can also be horizontal and moved to bottom for a clean linear legend
  backgroundColor: '#FFFFFF',
  align: 'left',
  verticalAlign: 'top',
  x: 380, // move to right side of chart
  y: 200, // drop down 200px
  floating: true, // enabled for positioning
  shadow: true
 },

Add background image all the way to the right:

 chart: {
   renderTo: 'container',
   type: 'column',
   margin: [ 50, 150, 100, 80 ], // wide right margin to allow image outside 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 to move image off chart
   }
 }   
}

NOTE: I set the width of the chart container to 500px.

I hope this clears some things up.

ORIGINAL ANSWER:

i just updated all our company charts to highcharts last week.. use this for your background image

chart: {
            renderTo: 'container',   // where does the chart go?
            type: 'column',   // what kind of chart is it?
            margin: [ 50, 50, 100, 80 ],   // margins between 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 image parameters are as follows: image(url, x, y, width, height);