Animated charts with Highcharts


Blog Posts Highcharts Tutorials0 comments

Featured image

 

This tutorial will illustrate how to create an interactive animated chart leveraging a smart Highchart option.

Animated charts can provide a powerful and effective means to draw attention to certain aspects of the data. As an alternative to overwhelming the audience with too much data at once, animations allow the audience to gain a deeper insight into the data at a moderate speed.
 
The following chart visualizes the Arctic Sea Ice extent from 1980 to 2020:

 

The chart above displays six different lines; the (four) grey lines represent the data for 1980, 1990, 2000, and 2010; the blue line represents the most recent measurement 2020, and the red line displays the lowest record that was measured in 2012.
Without animation, the chart may overwhelm the audience, resulting in additional time and cognitive processing to comprehend the story the data is trying to present. With the inclusion of animation, the audience is enabled to digest the data in a short time effortlessly. The audience’s interest is maintained as a result of the data being displayed continuously.

The advantage of leveraging chart animations to enhance the audience experience is clear, so let’s progress to creating animated interactive charts with Highcharts.
The demo above is created using the option defer under the animation option. To enable, you simply add the deferoption for each chart required to animate. Be sure to space the line’s rendering time (1000 milliseconds) to avoid having two or more series rendered at the same time or in the wrong order:

series: [
    {
      showInLegend: false,
      animation: {
        defer: period
      }
    },
    {
      showInLegend: false,
      animation: {
        defer: period * 2
      }
    },
    ...

To get the progress time effect for each line, you can add set a value to the animation option under plotOptions:

  plotOptions: {
    series: {
      color: "#ABB2B9",
      marker: {
        enabled: false
      },
      label: {
        connectorAllowed: false
      },
      animation:{
        duration:1200
      }
    }
  },

That is it, simple and effective :).
Animations are an eloquent solution to visualize data and help the audience gain a deeper insight.
Feel free to share your experience with the animated chart using the comment sections below.

Consent for marketing cookies needs to be given to post comments
Do NOT follow this link or you will be banned from the site!