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:
- Referencing the ZingChart library
- Placing your chart on your HTML page
- Adding data and rendering your chart
- 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!
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.
<!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.
<!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.
<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.
Let's go over what exactly is happening above.
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.
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.
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.
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:
iddataheightwidth
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.
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:
-
line3d- Gives your plotted lines a 3D aspect -
vline- Turns your graph vertical instead of horizontal
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:
-
segmented- Separates data points by connected straight lines -
spline- Separates data points by connected curved lines -
stepped- Separates data points by vertical and horizontal lines resembling steps -
jumped- Separates data points by only the horizontal portion of a stepped line
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. For some inspiration on charts that have already been created, visit ZingChart's 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.
Top comments (0)