In order to create a curved line graph with Chart.js, consider an example of two students A and B who have received marks for five courses.
In your project folder, create a file lg.html. Create a folder named “css” and add a file lg.css in it. Next, create a folder named “js” and add lg.js file. You will create line graph in this file.
line.html
Include Chart.js and jQuery files in your project. In the head, specify the lg.css file.
<link type="text/css" rel="stylesheet" href="css/lg.css" />
Create a div tag in the HTML body and assign a class chart-container to it. Now, create a canvas and name it with an id, such as lg-chartcanvas.
<div class="section__codeStyle">
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
</div>
Lastly, specify the lg.js javascript file. Overall, here’s how your lg.html file looks.
<!DOCTYPE html>
<html>
<head>
<title>How to Create a Curved Line Graph</title>
<link type="text/css" rel="stylesheet" href="css/lg.css" />
</head>
<body>
<div class="chart-container">
<canvas id="lg-chartcanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/line.js"></script>
</body>
</html>
lg.css
Next, you have to style your html page with CSS. This code is sets the width, height, and margin for class .chart-container. Add the following code in it.
.chart-container {
width: 70%;
height: 380px;
margin: 0 auto;
}
JavaScript
Now is the time to work on our main objective – create a curved line graph with Chart JS.
At first, you have to call the canvas by referencing its id lg-chartcanvas.
var getCanvas = $("#lg-chartcanvas");
Here you have many options to create the chart. For this purpose, you have to generate an opt object variable and modify a number of properties. For instance, you can change responsive to true in order to make your graph responsive.
For creating the line graph’s title, you have to change the following in the title data object.
- display – Change it to true so the title appears.
- position – Change it to top so the title is positioned at the graph’s top area.
- text – Change it to line graph.
- fontSize – Adjust the title’s font size with it
- fontColor – Adjust the title’s font color with it.
In order to add legend to the line graph, adjust the following property in legend.
- Display – Change it to true so it displays the legend.
- Position – Change it to bottom to specify the legend’s position.
- Label – Adjust the font color and size of the legend with it.
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 12,
fontColor: "#222"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#444",
fontSize: 14
}
}
};
Data
Create a coures variable for storing the marks of both students for 5 courses. An array labels will be used to initialize the name of the courses while coursesinfo is an array comprising two objects – showing each student’s marks.
Elements in the coursesinfo are made of the following properties.
- label – It shows a label when you hover the mouse on that point.
- data – An array storing the marks for each student.
- backgroundColor – Specifies hex value for line graph’s points.
- borderColor – Specifies color name in the form of hex value.
- fill – Set to false
- lineTension – This is the most important property, because this value determines whether the graph will be straight or curved. You can make it curved by setting it more than 0.
- radius – Specifies a point’s radius for each course’s marks.
You have to generate a variable chart for instantiating the chart class. Since the canvas and data object are stored in getCanvas, you can need to pass it. The data object has line for the type property, courses variable for the data property and opt for the options property.
Here’s the complete JavaScript code.
$(function(){
//call the line chart canvas from HTML
var getCanvas = $("#line-chartcanvas");
//data in courses
var courses = {
labels: ["Calculus", "Programming Paradigms", "Data Structures", "Introduction to Relational Databases", "Computer Graphics"],
coursesdata: [{
label: "Student A",
marks: [70, 83, 79, 87, 76],
backgroundColor: "green",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
},
{
label: "Student B",
marks: [80, 75, 60, 79, 72],
backgroundColor: "red",
borderColor: "lightblue",
fill: false,
lineTension: 0.4,
radius: 6
}]
};
//opt
var opt = {
responsive: true,
title: {
display: true,
position: "top",
text: "Line Chart",
fontSize: 16,
fontColor: "#444"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#555",
fontSize: 14
}
}
};
//create Chart class object
var chart = new Chart(getCanvas, {
type: "line",
marks: marks,
opt: opt
});
});
You can convert this curved line graph into a straight one by setting the value of lineTension to 0.
Final Thoughts
Now that you know how to create a curved line graph, it will help you improve your work quality. To learn more about creating charts, visit this website and send us a message. In order to read about how to combine a curved line with histogram, here’s a brief tutorial.
