Chartjs-Reveal.js with plotly.js and chart.js export pdf

by

1👍

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>

Leave a comment