How to Create a Line Chart Using JavaScript
Tags: javascript, design, charts, graphs
Published: 2019-08-23 19:16:53

---
title: How to Create a Line Chart Using JavaScript
published: true
description: This is a step by step tutorial on how to create a line chart using JavaScript.
tags: #javascript #design #charts #graphs
cover_image: https://thepracticaldev.s3.amazonaws.com/i/554b584ea4kt2qysieoo.jpg
---
A line chart or graph is a highly efficient way to display data points connected by lines. Highly versatile, line charts come in three different types: simple line charts, 3-D line charts, and vertical line charts.
In this article, I will show you how to create different types of line charts and how to style them using the free JavaScript library, 'ZingChart'.

The steps you will use to create a fully functioning line chart are as follows:
1. Referencing the ZingChart library
2. Placing your chart on your HTML page
3. Adding data and rendering your chart
4. Basic customization of your chart

##Before I begin
Before beginning my tutorial, I highly recommend signing up for ZingChart's 'Studio' free web-app.

This will allow you to create charts in a sandbox-like environment provided by ZingChart. It also has pre-made templates for the majority of their chart types so you never need to start from scratch.

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

##1. Referencing the ZingChart library
If you do not have much knowledge of HTML layouts, I have provided a template below with the ZingChart library referenced.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingChart: My Bar Chart</title>
    <script src="<https://cdn.zingchart.com/zingchart.min.js>"></script>
  </head>
  <body>

  </body>
</html>
```

To reference the ZingChart library, include the code snippet shown above within the `head` section of your HTML.

You can also download the ZingChart library or use a package manager, like NPM.

##2. Placing your chart on your HTML page
Before you integrate any data to your line chart, you will need to reference the chart within the `body` of your code.

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

Create a `div` tag within the `body` of your HTML and give it an `id` that is set to your charts name. In terms of the HTML needed for your chart, you are done!

##3. Adding data and rendering your chart
This is where some knowledge of JavaScript will be required.

The next step will be including `script` tags where all your JavaScript will live. When adding the `script` tag, ensure it is placed after the `div` that renders the chart.

```html
<script>
  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]} 
     ]
  };
 
  zingchart.render({ 
    id: 'myChart', 
    data: myConfig, 
    height: "100%", 
    width: "100%" 
  });
</script>
```

Try adding the above code within the `script` tag in the `body` of your HTML. If you run this in your browser, you will have a fully functioning line chart!

Check out this [demo here](https://app.zingsoft.com/demos/embed/Z4KY0TKN).

Let's go over what exactly is happening above.

```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]}
  ]
};
```

I set up a variable or `var` called `myConfig`. All of the properties within this object will tell ZingChart how to render the chart.

```javascript
var myConfig = {
  "type":"line",    //Tells ZingChart the type of chart to use**
  "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]}
  ]
};
```

The first property within the object you created should be the `type` property. ZingChart has over 35 chart types you can use for the `type` property, but for the purpose of building a line chart, you will want to give type a value of `line`. Reference snippet above.

```javascript
var myConfig = {
  "type":"line",
  "series":[        //Creates a series of data
    {"values":[20,40,25,50,15,45,33,34]},  //Values for blue line
    {"values":[5,30,21,18,59,50,28,33]},   //Values for red line
    {"values":[30,5,18,21,33,41,29,15]}    //Values for green line
  ]
};
```

The next property you will want to include is the `series` property. This property will take in an array of objects as its value. When creating your own `values`, make sure to stick to the formatting shown above. This only needs to be done if you want to include multiple lines within a single chart.

The last thing you will want to do is tell ZingChart to render your chart on the page.

```javascript
zingchart.render({    //Render method to show chart on page
  id: 'myChart',     //Reference the id used in your <div> tag
  data: myConfig,    //Reference the myConfig object created before
  height: "100%",    //Sets height for chart
  width: "100%"      //Sets width for chart
});
```

This can be done by calling the `zingchart.render` method. The four main attributes this method takes in as arguments are:
1. `id`
2. `data`
3. `height`
4. `width`

Reference the comments in the code snippet above to learn what each of these arguments will do for that chart.

##4. Basic customization of your line chart
Now that you have a fully functioning line chart showing in your dom, I will go over a few easy customizations you can implement to change the look and feel of your line chart. For a deeper look into the customizations available, read [ZingChart's docs](https://www.zingchart.com/docs/chart-types/line#further-customization-and-styling).

Earlier, I briefly talked about using the `type` property and giving it a value of `line`. A few other values you can give `type` are:
1. `line3d` - Gives your plotted lines a 3D aspect
2. `vline` - Turns your graph vertical instead of horizontal

```javascript
var myConfig = {
  "type": "line",
  "plot": {
    "aspect": "segmented"
  },
  "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]}
  ]
};
```

If you include a property called `plot` and give it a property called `aspect`, you further give your plotted lines a different look. `aspect` can take in these values:
1. `segmented` - Separates data points by connected straight lines
2. `spline` - Separates data points by connected curved lines
3. `stepped` - Separates data points by vertical and horizontal lines resembling steps
4. `jumped` - Separates data points by only the horizontal portion of a stepped line

```javascript
var myConfig = {
  "type": "line",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "line-color":"#6666FF",        //Hexadecimal or RGB value
      "line-style":"dashed",         //'solid' | 'dashed'
      "line-width":5                 //In pixels
    }
  ]
};
```

To further change the styling of the lines themselves, you can directly add properties to the object holding the `values` property. Reference example above.

ZingChart has tons of customization options available. To learn more about line charts, visit [ZingChart's docs](https://www.zingchart.com/docs/chart-types/line). For some inspiration on charts that have already been created, visit [ZingChart's gallery](https://www.zingchart.com/gallery). Feel free to hit 'edit' on any of the demos and save them in your Studio account!

---

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.