How to animate SVG path on charts

In this article, I will show you how to add animation to static Highcharts charts.

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.

Let’s get started.

Create a basic interactive chart

Let’s 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.

The static chart looks like the following:

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.

Improving the chart’s design

To make a compelling chart, it is important to consider how the chart’s 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’s speed is higher. I have also added zones to show the difference between technologies with generation on series.

The chart below is a design update of the previous chart:

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 g1 class name, 2G will get the g2 class name and so on…

Add some CSS styles to make the chart animated

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:

.g1 {
  stroke-dasharray: 12;
  stroke-dashoffset: 100;
  animation: dash 8s linear infinite;
}

.g2 {
  stroke-dasharray: 11;
  stroke-dashoffset: 100;
  animation: dash 5s linear infinite;
}

.g3 {
  stroke-dasharray: 10;
  stroke-dashoffset: 100;
  animation: dash 3.5s linear infinite;
}

.g4 {
  stroke-dasharray: 9;
  stroke-dashoffset: 100;
  animation: dash 2s linear infinite;
}

.g5 {
  stroke-dasharray: 8;
  stroke-dashoffset: 100;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

As you can see, g1 className has 8 seconds of duration, and g5 has only 1 second of duration to make the animation faster because the download speed is faster.

The final result of the changes is in the following chart:

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.

Feel free to come up with your own animated charts and share your experience in the comment section below.