Using EuroPDF with Highcharts

Highcharts animates charts by default. While this looks great in the browser, it can cause issues when generating PDFs: Animations may still be running, resulting in incomplete charts.

To ensure charts created with Highcharts render correctly in PDFs, use one of these approaches:

See below for detailed examples.

(You’ll also need to enable JavaScript preprocessing in the API call.)

Method 1: Disable chart animations

Set plotOptions.series.animation to false to turn off initial series animations.

Tip: By checking for the global EuroPDF object, you can disable animations during PDF generation only, while keeping them enabled in the browser:

Highcharts.chart('container', {
  plotOptions: {
    series: {
      animation: !window.EuroPDF
    },
  },
  // remaining options
})

Complete example

Input document:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Using Highcharts with EuroPDF: Disabled animations</title>
</head>
<body>
  <div id="container" style="height: 350px"></div>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script>
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Corn vs wheat estimated production for 2023'
      },
      xAxis: {
        categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
      },
      yAxis: {
        title: {
          text: '1000 metric tons (MT)'
        }
      },
      plotOptions: {
        series: {
          animation: !window.EuroPDF
        },
      },
      series: [
        {
          name: 'Corn',
          data: [387749, 280000, 129000, 64300, 54000, 34300]
        },
        {
          name: 'Wheat',
          data: [45321, 140000, 10000, 140500, 19500, 113500]
        }
      ]
    });
  </script>
</body>
</html>

API call (using the HTTPie CLI client):

https post 'api.europdf.eu/v1/docs?api_key=YOUR_API_KEY' \
  -o highcharts.pdf \
  javascript=1 \
  document_url=https://www.europdf.eu/docs/examples/highcharts-disabled-animations

Open generated PDF

Method 2: Delay PDF rendering

Alternatively, you can delay PDF generation until all chart animations have finished. To do this, override EuroPDF.readyToRender() to control when rendering occurs:

if (window.EuroPDF) {
  let animationsFinished = false
  EuroPDF.readyToRender = () => animationsFinished

  // By default, Highcharts animations last 1 second.
  // Add 500ms as a buffer to ensure completion.
  setTimeout(() => { animationsFinished = true }, 1500)
}

Note: Check for the presence of the EuroPDF object before accessing it, to ensure the document still renders correctly in the browser.

Complete example

Input document:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Using Highcharts with EuroPDF: Delayed rendering</title>
</head>
<body>
  <div id="container" style="height: 350px"></div>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script>
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Corn vs wheat estimated production for 2023'
      },
      xAxis: {
        categories: ['USA', 'China', 'Brazil', 'EU', 'Argentina', 'India'],
      },
      yAxis: {
        title: {
          text: '1000 metric tons (MT)'
        }
      },
      series: [
        {
          name: 'Corn',
          data: [387749, 280000, 129000, 64300, 54000, 34300]
        },
        {
          name: 'Wheat',
          data: [45321, 140000, 10000, 140500, 19500, 113500]
        }
      ]
    });

    if (window.EuroPDF) {
      let animationsFinished = false;
      EuroPDF.readyToRender = () => animationsFinished;
      setTimeout(() => { animationsFinished = true }, 1500);
    }
  </script>
</body>
</html>

API call (using the HTTPie CLI client):

https post 'api.europdf.eu/v1/docs?api_key=YOUR_API_KEY' \
  -o highcharts.pdf \
  javascript=1 \
  document_url=https://www.europdf.eu/docs/examples/highcharts-disabled-animations

Open generated PDF