I have a line chart with marker enabled. I also have my own custom legend Formatter
legend: {
enabled: true,
useHTML: true,
labelFormatter: function() {
let symbol = '<span style="color:' + this.color + ';font-size:12px;">▬</span>';
return '<span style="font-size: 12px;">' + symbol + ' ' + this.name + '</span>';
}
}
Because of my marker, I get an additional line next to my custom legend symbol. I tried destroying my marker symbols using this solution LINK: http://jsfiddle.net/Tr7nk/2621/ But , I am getting errors when toggling the legends
ERROR TypeError: Cannot read property 'isSVG' of undefined
at E.destroy (highcharts.src.js:4424)
at t.<anonymous> (chart.component.ts:271)
at Function.each (jquery.min.js:2)
Please help. thanks
Instead of destroying the legend symbol, you can set symbolWidth to 0, to make it invisible.
legend: {
...,
symbolWidth: 0
}
Live demo: http://jsfiddle.net/BlackLabel/mwpu26sj/
API Reference: https://api.highcharts.com/highcharts/legend.symbolWidth
another method that worked for me was, instead of destroying the legend symbol, we can hide them
if (serie.legendSymbol ) serie.legendSymbol.hide()