How to add image to High-chart? - highcharts

Question

I have plot in high-chart with 1000 polygon series but i cannot show all legends. So i just want to keep four legend(after grouping multiple polygon series) and want to write their legends.
1. case 1. Red color box
2. case 2. Blue color box
3. case 3. Green color box
4. case 4. white color box
But how can i put that legend in highchart as high chart only generate legend based on series data. Or can i add static image already generated seperately in highchart multi-polygon series (showinlegend: flase) so that it should appear as legend in polygon series?

Answer 1

As per your requirement , if you just want to show four non-clickable legend like indicators you can use renderer like below :
function(chart) {
chart.renderer.rect(80, 75, 10, 10).attr({
fill: '#C5FFC5',
}).add(); chart.renderer.text("Series 1" ,100, 85).add();
chart.renderer.rect(80, 95, 10, 10).attr({
fill: 'red'
}).add();
chart.renderer.text("Series 2" ,100, 105).add();
chart.renderer.rect(80, 115, 10, 10).attr({
fill: 'green'
}).add();
chart.renderer.text("Series 3" ,100, 125).add();
}
Edit in your code ,place this code like below:
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
chart.renderer.rect(80, 75, 10, 10).attr({
fill: '#C5FFC5',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 1", 100, 85).add();
chart.renderer.rect(80, 95, 10, 10).attr({
fill: 'red',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 2", 100, 105).add();
chart.renderer.rect(80, 115, 10, 10).attr({
fill: 'green',
stroke: 'black',
'stroke-width': 1
}).add();
chart.renderer.text("Series 3", 100, 125).add();
});
See the working fiddle here