reveal.js with plotly.js and chart.js export pdf

Question

I am using reveal.js for my presentation. The presentation has some animated plots using plotly.js and chart.js. For performance reasons, I used addEventListner so that the animations run only when I reach to that slide. For example:

Reveal.addEventListener("slide2", function () {
 // plot function here
}

When I export the slides to pdf using ?print-pdf, all the canvas elements are rendered blank. Is there a way to get around this so that the printed pdf contains at least the initial or final frame or any frame of these animated plots?

A similar question was asked here but that question was related to export-pdf on iframe elements. The suggested answer there to disable lazy-loading by using data-preload does not work in my case.

LeeLenalee · Accepted Answer · 2021-09-05 17:10:01Z

There are 2 ways, if you create your chart after you call the print pdf function you can set the animation option to false so the chart doesnt animate and shows instantly, and set it to true for normal. The other way you can go is by going into your chart variable and then set the animation to false and update it.

let animate = false; // Option 1, set this variable to the correct value before creating the chart

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    animation: animate
  }
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

// Option 2, update the animation mode on the fly
const switchMode = () => {
  chart.options.animation = !chart.options.animation;
}
// Option 2 if you want to make sure at all times it is false for printing
const setAniFalse = () => {
  chart.options.animation = false;
}
// Option 2 if you want to make sure at all times it is true for showing in presentation
const setAniTrue = () => {
  chart.options.animation = true;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <button onClick="switchMode()">
      Switch ani mode
    </button>
</body>

Collectives™ on Stack Overflow

reveal.js with plotly.js and chart.js export pdf

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related