{"id":22819,"date":"2022-11-11T08:48:17","date_gmt":"2022-11-11T08:48:17","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22819"},"modified":"2026-01-13T11:25:55","modified_gmt":"2026-01-13T11:25:55","slug":"how-to-animate-svg-path-on-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/how-to-animate-svg-path-on-charts\/","title":{"rendered":"How to animate SVG path on charts"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>In this article, I will show you how to add animation to static Highcharts charts.<\/p>\n<p>Adding animation to a chart can be useful, for example, to visualize more information about the data flow between some points. Also, animated charts can point users to a particular aspect of information from the data on the chart.<\/p>\n<p>Let\u2019s get started.<\/p>\n<h2>Create a basic interactive chart<\/h2>\n<p>Let\u2019s get started with creating a basic chart. The data source is cellular network download speed in years acquired from articles published on Wikipedia. The chart below displays the download speed in Mbit\/s of cellular network technologies within a year of their development.<\/p>\n<p>The static chart looks like the following:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 480px; border: none;\" title=\"A line chart displays the download speed in Mbit\/s of cellular network technologies within a year of their development\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/animated-flow-static\"><\/iframe><\/p>\n<p>The chart looks good but could be much better with an animation that displays a flow of data, for example, the speed of the internet.<\/p>\n<h2>Improving the chart\u2019s design<\/h2>\n<p>To make a compelling chart, it is important to consider how the chart\u2019s elements are designed. I have decided to add plot lines that represent years of mobile phone generation. With animation, the line will be animated faster if the technology&#8217;s speed is higher. I have also added zones to show the difference between technologies with generation on series.<\/p>\n<p>The chart below is a design update of the previous chart:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 480px; border: none;\" title=\"A line chart displays the download speed in Mbit\/s of cellular network technologies within a year of their development\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/animated-flow-improved\"><\/iframe><\/p>\n<p>To add a flow animation to the chart, I have to add classes to specific elements, for example, adding class names according to the generations of each technology. 1G zone will get the <code>g1<\/code> class name, 2G will get the <code>g2<\/code> class name and so on\u2026<\/p>\n<h2>Add some CSS styles to make the chart animated<\/h2>\n<p>The third and final step is to make the chart an animated chart. To make the magic happen, I add some CSS rules. Referring to classes added to the proper element earlier, I add the following CSS code:<\/p>\n<pre>.g1 {\r\n  stroke-dasharray: 12;\r\n  stroke-dashoffset: 100;\r\n  animation: dash 8s linear infinite;\r\n}\r\n\r\n.g2 {\r\n  stroke-dasharray: 11;\r\n  stroke-dashoffset: 100;\r\n  animation: dash 5s linear infinite;\r\n}\r\n\r\n.g3 {\r\n  stroke-dasharray: 10;\r\n  stroke-dashoffset: 100;\r\n  animation: dash 3.5s linear infinite;\r\n}\r\n\r\n.g4 {\r\n  stroke-dasharray: 9;\r\n  stroke-dashoffset: 100;\r\n  animation: dash 2s linear infinite;\r\n}\r\n\r\n.g5 {\r\n  stroke-dasharray: 8;\r\n  stroke-dashoffset: 100;\r\n  animation: dash 1s linear infinite;\r\n}\r\n\r\n@keyframes dash {\r\n  from {\r\n    stroke-dashoffset: 100;\r\n  }\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}<\/pre>\n<p>As you can see, <code>g1<\/code> className has 8 seconds of duration, and <code>g5<\/code> has only 1 second of duration to make the animation faster because the download speed is faster.<\/p>\n<p>The final result of the changes is in the following chart:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 470px; border: none;\" title=\"A line chart displays the download speed in Mbit\/s of cellular network technologies within a year of their development\" src=\"https:\/\/assets.highcharts.com\/demos\/samples\/embed\/highcharts\/blog\/animated-flow-final\"><\/iframe><\/p>\n<p>Now you have an idea about how you can create an animated flow on the chart. You can try adding this animation to every chart type.<\/p>\n<p>Feel free to come up with your own animated charts and share your experience in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A step-by-step tutorial to create an animated line chart using CSS with Highcharts.<\/p>\n","protected":false},"author":271,"featured_media":22908,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[969],"class_list":["post-22819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22819","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\/271"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22819"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22819\/revisions"}],"predecessor-version":[{"id":29372,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22819\/revisions\/29372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22908"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22819"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}