How to Animate a Line Chart in Under 60 Seconds
Tags: javascript, chart, dataviz, graph
Published: 2019-07-18 22:52:28

---
title: How to Animate a Line Chart in Under 60 Seconds
published: true
description: This is the first post in ZingChart's Stopwatch Features series. Learn how to animate a line chart in under 60 seconds!
tags: #Javascript #chart #dataviz #graph
cover_image: https://firebasestorage.googleapis.com/v0/b/zingchart-marketing.appspot.com/o/Blog%20Assets%2Fanimate%20a%20line%20chart%20in%2060%20seconds%2FHow%20to%20Animate%20a%20Line%20Chart.jpg?alt=media&token=baa7266d-f892-493a-841b-8603e9cd553f
---

---
This is the first post in ZingChart's Stopwatch Features series. Over the course of this series, explain many of ZingChart's features that can be quickly implemented to make your charts dynamic, interactive and animated.

Watch the short video below see how quickly and easily adding animation to a line chart can be. For a step-by-step summary, scroll past the video.

[![How to Animate a Line Chart in Under 60 Seconds Tutorial](https://firebasestorage.googleapis.com/v0/b/zingchart-marketing.appspot.com/o/Blog%20Assets%2Fanimate%20a%20line%20chart%20in%2060%20seconds%2FAnimate%20Line%20Chart%20Youtube%20copy.jpg?alt=media&token=c69472c4-4835-46c7-9364-4e747090788f)](https://www.youtube.com/watch?v=1Zss2FIacr0)


As a quick guide, here are the points I will go over to animate your line chart:
1. Create a basic HTML layout that will render your chart
2. Add an object within your JavaScript to contain your data, properties and animations
3. Call ZingChart to render the chart to your page

While you can certainly use your own data and design, for the purpose of this demo, I will use the chart below with 3 plot groupings.

![ZingChart Line Chart](https://firebasestorage.googleapis.com/v0/b/zingchart-marketing.appspot.com/o/Blog%20Assets%2Fanimate%20a%20line%20chart%20in%2060%20seconds%2FLinechartexample.png?alt=media&token=a483cf42-6952-4b27-80c0-22957a983ae9 "Logo Title Text 1")

## Before I get started…

I highly recommend signing up for ZingChart's free web-app, the 'ZingSoft Studio'.

This will give you full access to the ZingChart library in a sandbox-like environment. The Studio will allow you to create fully functional charts and grids while adding your animations at the same time.

[Check out the Studio and start charting!](https://app.zingsoft.com/signup)

## 1. Creating Your Layout

To start, you will need to create a basic HTML layout. Feel free to copy the one below.

```html
<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <title>Line Chart Animation Demo</title>
   <script src="<https://cdn.zingchart.com/zingchart.min.js>">
</script>
   </head>
   <body>
      <div id='myChart'></div>
   </body>
</html>
```

Notice I have already included the `script` tag which references ZingChart's CDN as well as the `div` to render the chart.

## 2. Adding Your JavaScript
Once you have finished setting up your HTML, you will want to add your JavaScript.

Either create a `script` tag below where you set up your chart `div` or reference a new JavaScript file. While I will only be scratching the surface of what ZingChart can do, the only two JavaScript components you will add to animate your chart are a variable and a render method.

### Creating Your Variable
You will start by creating and naming a variable as an object within a JavaScript file or `script` tag. Within this object, you will want to include 3 main properties: `type`, `series`, and `plot`. Reference the format below.

```javascript
var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
   }
};
```

The `type` property specifies what type of chart you are looking to utilize. ZingChart has over 35 chart types, but for this post, I will be going over line charts, hence the `type` property has a property value of `line`.

The `series` property is where you will store your data, change the line colors, add hover effects and many more customizations you can read about here. Notice the formatting of the `series` property. To add multiple plotted lines, I made `series` an array with multiple objects as its properties.

If you save this file and open your HTML in your browser, you will see you have a fully functional line chart.

### Adding Animations

To animate your now rendered chart, it is as simple as adding a few more properties to your `plot` object.

The first thing you will want to do is give your `plot` object a property called `animation`. `animation` will be an object that takes in all the ZingChart properties used to animate your chart.

The first property you will add to `animation` is `effect`. This can either take in a string or a number as a value. For the purpose of this demo, I will use numbers. Your JavaScript should look like the code below but try switching out the values with any number between 1 and 13. I have provided the animations for  values 1 - 13 below.

```javascript
var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect":1
      }
   }
};
```

* 1 = Fade in
* 2 = Expand vertical from center
* 3 = Expand from top
* 4 = Expand from bottom
* 5 = Expand left to right
* 6 = Expand from right to left
* 7 = Expand horizontal from center
* 8 = Slide from left
* 9 = Slide from right
* 10 = Slide from top
* 11 = Slide from bottom
* 12 = Unfold horizontal
* 13 = Unfold vertical

The next property you can add to `animation` is `sequence`. This property can take in values between 1 and 3.

`sequence` decides what order the lines on the chart will be animated. I encourage you to try out different property values between 1 and 3 to get a better idea as to how they affect the animation itself.

```javascript
var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1
      }
   }
};
```

* 1 = Lines appear by plot group
* 2 = Lines appear by node group
* 3 = Lines appear by individual node

Lastly, `speed` is the property that will determine the overall speed of the animation. Try using values between 1 and 100.

```javascript
var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};
```

## 3. Rendering Your Chart

The last piece of JavaScript you will need to add is the `zingchart.render()` method.

Once that is added, your full JavaScript file should look like this:

```javascript
var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};
zingchart.render({
   id: 'myChart',
   data: myConfig,
   height: "100%",
   width: "100%"
});
```

As far as animation goes, you are done!

There are many different combinations of `effect`, `sequence` and `speed` that you can take advantage of. I encourage you to play around with various combinations to see what best fits your needs. There are also [many other properties](https://www.zingchart.com/docs/events/plot) you can include within the `plot` object to add interactivity to your chart. You can play around with this demo [here](https://app.zingsoft.com/demos/embed/Z4KY0TKN).




---

A pioneer in the world of data visualization, ZingChart is a powerful JavaScript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.