0

I'm looking to pass a chart export to a component that specifically requires PNG or JPG- so an SVG will unfortunately not work.

With the help of other SO answers- I was able to get the SVG Base64 using the following code: 

let link = "data:image/svg+xml;base64," + btoa(this.lineChartRef.current.CHART.current.chart.getSVG());

Is there a way I can get the PNG base64? Or is there an efficient way within React to convert this SVG base64 to a PNG?

Thanks!!!

mg2019
  • 191
  • 17
  • 1
    Hi @mg2019, Please check these two threads: https://stackoverflow.com/questions/54761784/highcharts-export-multiple-charts-using-jspdf and https://ourcodeworld.com/articles/read/15/3-ways-to-export-highcharts-charts-to-image-with-javascript-client-side-solution- and let me know if this solves your problem. – ppotaczek Mar 27 '20 at 12:38
  • @ppotaczek Yes! That first post did help! thank you so much! – mg2019 Mar 27 '20 at 13:46

1 Answers1

2

Thanks to @ppotaczek for his forwarding of [this SO post][1], I was able to create the following solution for React. Hopefully it will help someone else in the future!

//Start by calling the chart options (using refs) into a variable and JSON stringify 
let chartoptions = this.lineChartRef.current.BrokerChart.current.chart.userOptions
    chartoptions = JSON.stringify(chartoptions)

//Create a data body with the following parameters 
    let data = {
      options: chartoptions,
      filename: 'LineChart',
      async: true
    }

    let url = "https://export.highcharts.com/"
    let returnedimageurl = ""
    //setState will be called within the Axios return so "This" must 
    let self = this

    axios({
     method: 'post',
     url: 'https://export.highcharts.com/',
     data: data,
    })
    .then(function (response) {
      returnedimageurl= url +response.data
      self.setState({
        activityChartPng: url
      }, self.allowDownload())
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    }); 

//The activityChartPvg state can then be passed as props to the React-PDF component


  [1]: https://stackoverflow.com/questions/54761784/highcharts-export-multiple-charts-using-jspdf
mg2019
  • 191
  • 17