{"id":20590,"date":"2021-02-05T10:04:37","date_gmt":"2021-02-05T09:04:37","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20590"},"modified":"2026-01-13T11:17:46","modified_gmt":"2026-01-13T11:17:46","slug":"animated-charts-with-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/animated-charts-with-highcharts\/","title":{"rendered":"Animated charts with Highcharts"},"content":{"rendered":"<p>This tutorial will illustrate how to create an interactive animated chart leveraging a smart Highchart option.<\/p>\n<p>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.<br \/>\n&nbsp;<br \/>\nThe following chart visualizes the Arctic Sea Ice extent from 1980 to 2020:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"Animation with Highcharts: The Arctic Sea Ice extent from 1980 to 2020\" src=\"https:\/\/codepen.io\/mushigh\/embed\/QWGyLPj?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"500\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" title=\"A line chart visualizes the Arctic Sea Ice extent from 1980 to 2020\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/QWGyLPj\">Animation with Highcharts: The Arctic Sea Ice extent from 1980 to 2020<\/a> by mustapha mekhatria<br \/>\n(<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>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.<br \/>\nWithout 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&#8217;s interest is maintained as a result of the data being displayed continuously.<\/p>\n<p>The advantage of leveraging chart animations to enhance the audience experience is clear, so let\u2019s progress to creating animated interactive charts with Highcharts.<br \/>\nThe demo above is created using the option <code>defer<\/code> under the <code>animation<\/code> option. To enable, you simply add the <code>defer<\/code>option for each chart required to animate. Be sure to space the line\u2019s rendering time (1000 milliseconds) to avoid having two or more series rendered at the same time or in the wrong order:<\/p>\n<pre>series: [\r\n    {\r\n      showInLegend: false,\r\n      animation: {\r\n        defer: period\r\n      }\r\n    },\r\n    {\r\n      showInLegend: false,\r\n      animation: {\r\n        defer: period * 2\r\n      }\r\n    },\r\n    ...<\/pre>\n<p>To get the progress time effect for each line, you can add set a value to the <code>animation<\/code> option under <code>plotOptions<\/code>:<\/p>\n<pre>  plotOptions: {\r\n    series: {\r\n      color: \"#ABB2B9\",\r\n      marker: {\r\n        enabled: false\r\n      },\r\n      label: {\r\n        connectorAllowed: false\r\n      },\r\n      animation:{\r\n        duration:1200\r\n      }\r\n    }\r\n  },<\/pre>\n<p>That is it, simple and effective :).<br \/>\nAnimations are an eloquent solution to visualize data and help the audience gain a deeper insight.<br \/>\nFeel free to share your experience with the animated chart using the comment sections below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to learn how to plot animation with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":20610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[699],"class_list":["post-20590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20590"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20590\/revisions"}],"predecessor-version":[{"id":29338,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20590\/revisions\/29338"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20610"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20590"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}