Adding an image to highchart

Question

I am trying to add an image to highchart, but I do not see the image. See code below:

var currentECGOptions = { chart: { renderTo: 'currentECGContainer', events: { load: function () { alert("load this function"); this.renderer.image('/Content/Images/logo.png', 100, 100, 30, 30) .on('click' , function(){location.href='http://www.highcharts.com'}) .css({cursor:'Pointer'}) .add(); } } }, navigator: { enabled: true, maskFill: 'rgba(255, 255, 255, 0.45)', series: { type: 'areaspline', color: 'rgba(255, 255, 255, 0.00)', fillOpacity: 0.8, dataGrouping: { smoothed: true }, lineWidth: 1, lineColor: 'blue', fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [[0, '#FF8000'], [1, '#FFFF00']] }, marker: { enabled: false }, shadow: false }, yAxis: { reversed: false } }, series: [{ showInLegend: false, data: [null, null] }] }; currentECGOptions = jQuery.extend(true, {}, options, currentECGOptions); var currentECG = new Highcharts.Chart(currentECGOptions); currentECG.setTitle({ text: "CURRENT ECG" }); currentECG.showLoading(); 

Answer 1

You can set the image via css:

HTML

CSS #mychart {background-image: url ('image.png'); }

JS $ ('# mychart'). highcharts (...)

Answer 2

Try adding a logo after creating the chart, not in the events option. It might look something like this:

 /* create the chart */ var currentECG = new Highcharts.Chart(currentECGOptions); /* add the image to the new chart, after it been created */ currentECG.renderer.image('/Content/Images/logo.png', 100, 100, 30, 30).on('click' , function(){location.href='http://www.highcharts.com'}).css({cursor:'Pointer'}).add(); 

Hope this helps!