Is there an option in Highcharts JS (highcharts.com) to change the animation when a chart loads? Right now, on a column chart, the columns slide up from the bottom. Is it possible to alter the default animation to, say, bounce?
4 Answers
Sure, to your chart options add the animation duration and easing options. For example, to bounce:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: {
duration: 1500,
easing: 'easeOutBounce'
}
},
...
});
Example seen here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/
The loading animation can be controlled using the 'loading' option. It defines a CSS object that you can theme. You can animated the loading display by using an animated image as the background. http://highcharts.com/ref/#loading
To change the text that it displays via the lang property of options. See http://highcharts.com/ref/#lang for more. I usually just set it to blank.
var options = {
style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' },
lang: { loading: '' }
};
var chart = new Highcharts.Chart(options);
Plus to display the CSS object, you need to call chart.showLoading();
-
5I know the OP accepted this as the answer, but as a third party, it appears this response does not address the question about data animation but rather talks about customizing a spinner-type "busy" indicator. These are separate concerns (you could, for instance, customize both on the same chart). -1– TomJan 17, 2013 at 20:37
It was moved under "series" object istead of chart
http://api.highcharts.com/highstock#plotOptions.series
Something like this:
series: [{
animation:{
duration: 10000
},
type: 'pie',
name: 'Percentuale per periodo',
data: [
['2 anni', 13.0],
['3 anni', 41],
['4 anni', 17],
['5 anni', 17],
['7 anni', 4],
['8 anni', 8]
]
}]
I don't see any animation effect from the answer referencing the fiddle:
Example seen here http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/
Even trying elevated value as here: http://jsfiddle.net/p9EuZ/
chart: {
animation: {
duration: 6222500,
easing: 'easeOutBounce'
}
}
-
2Agreed. This question also specifically asks about the "loading" animation, not the "update" animation. Oct 24, 2013 at 16:20