Animate Charts within Sliders

Support
#1

Is it possible to animate a chart within a slider on reveal? The first slide shows the animation when it becomes visible but any subsequent slides with charts have already completed their animation apparently. Ideally, this would trigger when the slide appears similar to how all other animations within Cornerstone work.

Any workarounds?

Thanks!

#2

Hey @bangak,

Thanks for writing in! We would love to check yor Chart and Slider set up if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

In the meantime, try to wrap the Chart element with a DIV element inside the Slide. Only Animate the DIV element and see how it affects the Chart elements.

Best Regards.

#3

Sure thing. I tried wrapping the chart in a div and it didn’t affect anything. Thanks!

#4

Thank you for the info. We edited the buttons and added a new data-destination attribute containing the name of the destination. We then added this script to reset and update the chart after clicking the destination buttons. You can find the test page in the secure note.

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.x-button-dest').forEach(button => {
    button.addEventListener('click', function() {
      const destination = this.getAttribute('data-destination');
      const capitalizedDestination = destination.charAt(0).toUpperCase() + destination.slice(1);
      console.log('pie-' + capitalizedDestination);
      const canvas = document.getElementById('pie-' + capitalizedDestination);
      console.log(canvas)
      if (!canvas) return;

      const chartConfig = JSON.parse(canvas.getAttribute('data-tco-chart'));
      const existingChart = window.Chartjs.getChart(canvas);
      console.log(existingChart)
      if (existingChart) {
        existingChart.reset();
        existingChart.update();
      }

      const ctx = canvas.getContext('2d');
      // const newChart = new window.Chartjs(ctx, chartConfig);
      // canvas.$chartjs = newChart;
    });
  });
});

Result: https://streamable.com/wpop55