simsim
Posts: 2
Joined: Thu Jan 20, 2022 12:50 am

Transform into image

Hi Highcharts,

Im trying to convert this to b64 image. Could u help me to modify it so that it could return an image after sending to export.highchart.com.


$("#container").highcharts({
chart: {
type: 'column',
height: 450,
marginTop: 35,
style: {
fontFamily: 'Raleway'
}
},
exporting: {
url: export.highcharts.com,
enabled: false,
allowHTML: true
},
title: {
text: ""
},
plotOptions: {
column: {
colorByPoint: true,
groupPadding: 0,
pointPadding: 0.15,
dataLabels: {
enabled: true,
allowOverlap: true,
useHTML: true,
align: "center",
verticalAlign: "top",
y: -35,
crop: false,
overflow: 'none',
formatter: function () {
return "<span>" + Highcharts.numberFormat(this.y, 0) + '<small style="font-size:9pt;color:#A5A5A5;">%</small></span>';
},
style: {
textShadow: false,
textOutline: false,
fontSize: '17pt',
fontWeight: 700,
color: "#666"
}
}

}
},
colors: _.map(dataSeries, "color"),
credits: {
enabled: false
},
xAxis: {
categories: _.map(dataSeries, "name"),
title: {
text: reportData.name,
style: {
fontSize: '10px',
fontWeight: 600,
color: "#edba02"
}
},
labels: {
style: {
fontSize: '8px',
fontWeight: 600
}
}
},
yAxis: {
min: 0,
max: yMax,
title: {
text: 'Some Text Here',
style: {
fontSize: '10px',
fontWeight: 600,
color: "#edba02"
}
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, ',') + '%';
},
style: {
fontSize: '8px',
fontWeight: 600
}
}
},
legend: {
enabled: false,
},
tooltip: {
enabled: false
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '16px',
color: 'red',
}
},
series: [{
name: '',
data: _.map(dataSeries, "value")
}],
}, function(){
$scope.mc_processing = false;

});
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Transform into image

Hi simsim,

Welcome to our forum and thanks for contacting us with your question!

This question has been asked few times before. Please take a look at these topics because most likely you will find an answer there:
- How to get chart's base64 PNG data to be used in jsPDF?
- Highcharts - export to base64

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
simsim
Posts: 2
Joined: Thu Jan 20, 2022 12:50 am

Re: Transform into image

Hi,

I dint use jsPDF or canvas or any other plugin. Do you have any other method that would directly inside js file?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Transform into image

Hi simsim,

You need to pass b64: true parameter and create a request for example with a fetch.
Demo: https://jsfiddle.net/BlackLabel/4mt13pbe/
API reference: https://github.com/highcharts/node-expo ... ttp-server

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”