I have implemented the code below to export a png:
var added_chart_options = {
credits:{
enabled: true
},
title:{
style:{
display: 'block'
}
},
subtitle:{
style:{
display: 'block'
}
}
};
var options = Highcharts.merge(false, Highcharts['charts'][0]['options'], added_chart_options);
var data = {
options: JSON.stringify(options),
resources: {
css: ".highcharts-background { fill: #fff; stroke: #0ff; stroke-width: 2px}"
},
filename: 'test.png',
type: 'image/png',
async: true
};
var exportUrl = 'https://export.highcharts.com/';
$.post(exportUrl, data, function(data) {
var imageUrl = exportUrl + data;
var urlCreator = window.URL || window.webkitURL;
fetch(imageUrl).then(response => response.blob()).then(data => {console.log(data, imageUrl)});
})
I am encountering several issues:
How can I define fonts for the exported image? Currently, I added font styling using custom CSS for the entire project.
The legend is displaying differently than expected. It's wrapping text unnecessarily.
The formatter is not functioning as expected. The xAxis dataLabels are not being formatted correctly in the export.
Update 1
My current legend code is:
legend:{
useHTML: true,
borderWidth: 1,
layout: "horizontal",
align: "center",
verticalAlign: "bottom",
alignColumns: true,
rtl: true,
itemWidth: null,
x: 20
},
In the browser, the legend displays perfectly, but after exporting, it appears distorted. It seems that there is a width limitation causing even short legend lines to collapse.