Start the animation when the chart scrolls in to view
I'd like to be able to delay the initial animation of the chart until it comes in to view in the browser by scrolling.
I've tried doing this with js but the whole chart is hidden until it comes in to view which looks odd. I'd like the axis to show and only the animation to trigger when it comes in to view.
Here’s a plugin/study for the feature: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/studies/appear/
-
Red commented
I love this plugin! Thank you. NOTE: with version 8.0.4 of highcharts, I can't get line, spline, or area charts to work correctly. The plugin seems to work fine with version 8.0.0, though.
-
Mariana commented
This seems to don't work well for 3D pie charts. The labels with series name don't stay in the right position:
http://jsfiddle.net/sghyumd8/ -
Saloni commented
Thanks! This helped me out and got to learn something new :)
-
Hi Elle, I'm afraid animation is generally disabled on the funnel chart, so we don't have a way of animating it on scrolling into view.
One possibility though is to write an animator function, for example by borrowing (and modifying) the one from geo maps: http://jsfiddle.net/qskthLe1/3/.
-
Ellie commented
Hi there, the plugin is not working on the funnel chart: http://jsfiddle.net/qskthLe1/2/. Do you know how to fix it?
Thanks!
-
Jeff Phillips commented
How would I use this with Cloud.Highcharts?
-
Anonymous commented
> Of course, just take the contents of the plugin and put in a file.
Thanks! I did that but it only shows the first chart container with the grid but without the actual values, and it doesn't show the rest of the charts at all.
My charts are defined differently, they are listed in an external JS file as:
chart1 = new Highcharts.Chart({ });
chart2 = new Highcharts.Chart({ });and so on.
I wonder what could be wrong.
-
> Is it possible to make this an external JS file?
Of course, just take the contents of the plugin and put in a file. Make sure it is loaded after Highcharts and jQuery.
-
Anonymous commented
Is it possible to make this an external JS file? I tried but to no avail, it stops rendering the first chart and doesn't even display the rest of the charts.
(I'm absolutely new to JS but having a really good time with Highcharts.)
-
Anonymous commented
Thanks a lot Torstein Honsi for your updated fiddle. It helped me a lot. You are a saviour. Truly Great.
-
Sorry about that. I've updated the snippet so that it renders immediately when animation is not enabled, like in export.
-
Anonymous commented
With this plugin when I export the jpeg image of the chart, the chart is blank . The reason is proceed.call is only when it appears and the exported image renders the initial view of the chart when page is loaded. I want animation on scroll and also be able to download the full jpeg image. Could you please help me resolve that?
-
I changed the snippet to wrap the render method rather than animate method. This seems more robust, and also works with bubbles. I added a bubble chart at the very bottom. See the updated demo.
-
Anonymous commented
This seems to work well for everything I've tried so far except this demo:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bubble/ -
Erik commented
I copied your jsfiddle code, verbatim, and it didn't show in html. I installed the plugin also...what is going on?
-
Rosa Schiavello commented
Yes, work on iOs e Android, but... Line and area NOT WORK: the animation not work :( sob.
-
Rosa Schiavello commented
One question: work on ipad 2? Thanks very much
-
Andrew commented
That is perfect, thanks very much.
-
Andrew commented
Thanks. I have tried this with a similar plugin, waypoints.js, but I only want to delay the animation effect, not delay the whole chart. Is there a way to delay the animation until an event happens?
-
You should be able to use the appear.js jQuery plugin to initialize the charts once the container div appears: https://github.com/morr/jquery.appear