SilentBear
Posts: 2
Joined: Tue Mar 21, 2023 8:19 am

Higcharts Vue get SVG or image as variable.

Hi.

I'm using Highcharts in vue and is currently trying to figure out how i can get it to generate an svg or image into a variable that i want use elsewhere such as pdfmake.

I manage to render the chart on the screen, and have the download buttons enabled which all works, just that i'm not interested in downloading just storing it as a variable, preferably without the use of the built in buttons.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Higcharts Vue get SVG or image as variable.

Hi,

Welcome to our forum & thanks for the question!

There are multiple ways to achieve this.

Here's a simple demo: https://jsfiddle.net/BlackLabel/3h25ope4/

With this you can create your custom buttons and store the SVG code in a string variable.

Then, you could use a JavaScript plugin that allows to convert SVGs to JPGs. Here's an article about that: https://stackoverflow.com/questions/397 ... he-browser

If you need more flexibility, I'd do it this way, not with the Highcharts default exporting buttons.

Let me know if that's what you were looking for.

Best regards,
Jakub
Jakub
Highcharts Developer
SilentBear
Posts: 2
Joined: Tue Mar 21, 2023 8:19 am

Re: Higcharts Vue get SVG or image as variable.

Was about to post this just before your response Jakub but got a "blocked message". Cheers anyhow!
"
Whelp.

4 hours after trying different packages to render the highcharts element as an image i finally found the solution!

Just had to make an element with an id and create a new higcharts object and append it to it and then use getSVG...

example:
methods:{
testMethod():{
let testElement = document.createElement('div');
testElement.setAttribute("id","testElement")
const chart = HighCharts.chart(testElement,this.highChart);
const chartSVG = chart.getSVG();
console.log(chartSVG);
}
}

No actual vue or components needed.
"
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Higcharts Vue get SVG or image as variable.

Great!

You're right, chart.getSVG() is the best way to go.

I'm glad you figured it out.

Do not hesitate to let me know if you have any more questions.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Usage”