question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bubble Chart animation

See original GitHub issue

Hi i am trying to add animation in the bubble chart.

I am trying the code below but it doesn’t work. Am I doing something wrong? Am I defining the object correctly? I cannot see my chart doing the easeOutBounce and it doesnt go into the onAnimationProgress function.

var bubbleOptions = {
        animation: {
            animateScale: true,
            animationSteps: 100,
            animationEasing: "easeOutBounce",
            animateRotate: true,
            animateScale: true,
            onAnimationComplete: null,
            onAnimationProgress: function () {
                var t = 'test';
            }
        }
};

An this is how i create the chart

    window.myChart = new Chart(ctx, {
            type: 'bubble',
            data: bubbleChartData,
            options: bubbleOptions
        });

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
etimbergcommented, Jun 12, 2016

Oh, i see it. Try “easing” instead of “animationEasing”

0reactions
JoeyElRassicommented, Mar 22, 2021

hello, i am using chart.js 2.8… Is there a way to animate bubble chart on hide/show using this version?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Animated bubble chart - Python Graph Gallery
This blogpost explains how to build an animated bubble chart using Python and Image Magick . Matplotlib is used to produce several images,...
Read more >
Create Motion Bubble Charts & Scatter Plots in Excel - YouTube
Free Excel template to create motion bubble charts and scatter plots. Animated Single series and multi-series bubble charts and scatter ...
Read more >
Animate a Bubble Chart in Power BI - YouTube
Animated Bubble Chart probably got their start from Hans Rosling's TED talk demo using their Gapminder tool. This data visualization has ...
Read more >
Create a Motion Bubble Chart - YouTube
You can replicate the data and animation part (the drama you'll need to provide) in the example of how to create a motion...
Read more >
Animated bubble chart with R and gganimate
The gganimate package allows to build animated chart using the ggplot2 syntax directly from R. This post shows how to apply it on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found