I have created a custom legend for my chart using CSS, which displays correctly on the web. However, when I try to download the chart using the Print Chart option, the custom legend design does not appear in the downloaded document. All other download options work fine except for Print Chart. I have tried multiple solutions and even attempted to use a Highcharts JSFiddle example with a custom legend, but it still doesn't work as expected.
Highcharts.chart('container', {
exporting: {
chartOptions: {
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
fallbackToExportServer: false
},
title: {
text: 'Offline export'
},
legend: {
enabled: true,
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
useHTML: true,
floating: false,
verticalAlign: 'middle',
x: -40,
y: 10,
itemMarginBottom: 20,
labelFormatter: function () {
return '<div><div style="padding-right: 5px;color: #666666;text-align:center;">Text 123<span style="padding-left: 5px;font-size: 12px;font-weight: 300;color: #999999;">(16.78%)</span></div>' +
'<div style="background:' + this.color + ';height:20px; width:120px;text-align:center;color:white;font-weight:300;font-size: 10px;line-height:20px;">'
+ this.name + '</div></div>';
}
},
subtitle: {
text: 'Click the button to download as PNG, JPEG, SVG or PDF'
},
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
If anyone has encountered a similar issue and found a solution, please guide me in resolving this problem.
Thank you