Jules
Pricing
Developers
API DocumentationChart EditorChangelogAPI Status
Chart EditorSubscription management

How to Create a Curved Line Graph with Chart.js?

Posted on 
August 28, 2020

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.

Tagged:
No items found.
Francois-Guillaume Ribreau
CEO

Featured Posts

Case Studies and Customer Success Stories
Yao Care - a Taiwanese medical app integration of Image-Charts
Automate!
How to Use Google Sheets Formulas to Generate QR Code?
Learn
Create Chart with One URL
Learn
How to Share Charts on Slack?

Tags

Automation
Charting
Emailing
Graph-viz
Integration
Mobile App
QR Code
SDK

Create and send charts in email with Image-Charts

Get started
More Posts

You Might Also Like

Nov 23, 2020
 in 
Case Studies and Customer Success Stories

Yao Care - a Taiwanese medical app integration of Image-Charts

Sep 9, 2020
 in 
Learn

How Can You Export Image Charts with Excel?

Sep 9, 2020
 in 

Zapier, Slack and Teams. What Are They and How Do They Work?

Don't let your customer wait.
Get Started

Chart API

Chart.js ChartsBar ChartsLine ChartsScatter ChartsPie ChartsPolar ChartsRadar ChartsBubble ChartsGraph Viz ChartsQR Codes generator

Product

PricingDocumentationSubscription managementChart EditorChange logStatus PageOn Premise

SDKs

JavaScript/NodeJS
PHP
Python
Java
Ruby
C#

Integrations

Zapier integrationMake integrationIntegromat integration

Company

About usBlogOpen SourceSecurity & CompliancePrivacyTermsSupport

Newsletter - Changelog

If you'd like more update regarding Image-Charts in your inbox please do join the newsletter
Subscribe
No spam
Unsubscribe anytime
The most used static chart API in the world