I have been using the following code to add borders around the legend symbols. The problem is, it adds them around my line markers as well. They look fine on the published chart, but when I save it as a .png, it replaces my original marker style with the black border.
var borderColor = 'black';
var borderWidth = 1;
Highcharts.merge(true, options, {
chart: {
events: {
load: function(){
var series = this.series;
series.forEach(function(serie) {
console.log(serie.legendItem)
if (serie.legendItem) {
serie.legendItem.symbol.element.setAttribute('stroke-width', borderWidth);
serie.legendItem.symbol.element.setAttribute('stroke', borderColor);
}
});
}
}
}
});
The export server is not properly aligned with what the actual published chart looks like, which is something we have a development ticket for, but no work has been started.
Here’s an iterated version of the same code you have which is adapted to work for maps (which I found from a previous discussion of ours). In it, I’ve also added a check for a line being present, as you can see with the horizontal line on B & A. If this is present, we don’t apply border strokes.
var borderColor = 'black';
var borderWidth = 1;
function setBorders(legendItems) {
legendItems.forEach(function (item) {
if (item.legendItem && ! item.legendItem.line) {
item.legendItem.symbol.element.setAttribute('stroke-width', borderWidth);
item.legendItem.symbol.element.setAttribute('stroke', borderColor);
}
});
}
Highcharts.merge(true, options, {
chart: {
events: {
load: function () {
if (this.options.chart.type === 'map') {
setBorders(this.legend.allItems)
} else {
setBorders(this.series)
}
}
}
},
});
