Highcharts:Add image to legend - highcharts

Question

I have this chart. I want to add some check icons in the rectangle from the legend, when it is selected.
How can I do this?
var chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
data: jsonChart
}],
legend: {
symbolWidth: 40,
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: 40,
y:0,
width: 150,
},
});
});The chart

Answer 1

You can use Renderer to render an image in the chart.
function drawTicks() {
const {
translateX: tx,
translateY: ty
} = this.legend.group;
this.series[0].points.forEach(p => {
let img = p.img;
if (!img) {
p.img = img = this.renderer.image('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png', -9999, 0, 15, 15).attr({
zIndex: 10
}).add();
}
const bbox = p.legendSymbol.getBBox();
const x = p.legendGroup.translateX + tx;
const y = p.legendGroup.translateY + ty;
img.attr({
x: x,
y: y
});
});
}
on load/redraw draw ticks
chart: {
events: {
load: drawTicks,
redraw: drawTicks
}
},
on legendItemClick change the img's visibility
series: [{
type: 'pie',
name: 'Browser share',
point: {
events: {
legendItemClick: function() {
this.img.attr({
visibility: !this.visible ? 'visibile' : 'hidden'
});
}
}
},
example: http://jsfiddle.net/3348yjrq/