I want to set custom symbol to legend item. Currently I have rectangle. I need rectangle with tick (like colorful checked checkbox). According to documentation, I can just customize elements like text near that symbols.
But in case I've made all elements on plot like custom image ( Example ) then legend symbol will be changed.
Can I customize legend symbol without customizing points on plot?
series:[
{
name: 'Image symbol',
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
You can use legend.labelFormatter for adding legend symbols. For example you can use useHTML: true for your legend and then add an image to your legend item as a symbol:
legend: {
useHTML: true,
symbolWidth: 0,
labelFormatter: function() {
var name = this.name;
var img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Check_Box_Noun_project_10759.svg/2000px-Check_Box_Noun_project_10759.svg.png" width = "10px" height = "10px">';
return img + ' ' + name;
}
},
Here you can find an example how it can work: http://jsfiddle.net/ryd061r0/
You can also wrap drawLegendSymbol method as Barbara Laird suggested.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.