We can use the animation option with bar charts as well. With bar charts, the lines will load from the bottom and move upward. We pull our chart, Quarterly Revenue by Product, from Chapter 3, Bar Charts and Digging into Data, found in 1168_03_03.html
:
We start by setting the
animate
option totrue
:title:'Quarterly Revenue by Product', animate: true, axesDefaults: { ...
We can also set the speed for how fast each bar or line is animated. By default, each bar will start at the same speed, but we want the taller bars to move faster so that it gives the appearance that each bar finishes around the same time. To set the speed for each bar individually, we need to create a
rendererOptions
object within each series object. Next, we create ananimation
object, and then we setspeed
. For DVDs/Blu-ray and Computers, we vary the speed so that these bars load faster than the other two:... series: [ { label: 'DVDs/Blu-ray', rendererOptions...