Chart.js Tutorial — How To Make Gradient Line Chart
Chart.js is a JavaScript library that allows you to create beautiful charts to represent different types of statistics. It is based on HTML5 canvas and it is responsive, light-weight, customizable and easy to use.
Types of charts that comes with Chart.js:
- Line chart
- Bar chart
- Radar chart
- Polar area chart
- Pie chart
- Doughnut chart
- Bubble chart
In this tutorial, you will learn how to create the line chart with gradient colors and animation.
You can access to following examples trough Codepen collection or trough Github repo.
Installing Chart.js
The most simple way to start using this library is to add CDN link into your web page.
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.jsYou can also install it via npm:
npm install chart.js --saveOr via bower:
bower install chart.js --saveFor more information about setup, take a look at official guide about getting started.
Basic line chart setup
Inside your .html file place this code where you want to display chart. You can give it any id you want.
<canvas id="myChart"></canvas>Now inside your .js file write next:
var ctx = document.getElementById('myChart').getContext("2d")var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColor: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 4,
data: [100, 120, 150, 170, 180, 170, 160]
}]
},
options: {
legend: {
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}}],
xAxes: [{
gridLines: {
zeroLineColor: "transparent"},
ticks: {
padding: 20,
fontColor: "rgba(0,0,0,0.5)",
fontStyle: "bold"
}
}]
}
}
});
note: I added a little bit of CSS but that is optional for this tutorial.
Result:
Live example:
Customizing Line Chart
Now let’s make this chart more interesting by making line stroke and points in gradient color. To do this, we have to create a new variable that will store the gradient color.
Below this line of code:
var ctx = document.getElementById('myChart').getContext("2d");Write next:
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);gradientStroke.addColorStop(0, "#80b6f4");gradientStroke.addColorStop(1, "#f49080");
The createLinearGradient(x0, y0, x1, y1) method creates a linear gradient object. It has four arguments: (x0,y0) is the start point and (x1,y1) is the end point of the gradient.
The addColorStop() method adds the colors and their position (0–1) in the gradient object.
Now let’s use this gradientStroke variable instead of hex colors.
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStrokeResult:
Live example:
You can add more than two colors, add more addColorStop() with different positions between 0–1.
gradientStroke.addColorStop(0, "#80b6f4");gradientStroke.addColorStop(0.2, "#94d973");gradientStroke.addColorStop(0.5, "#fad874");gradientStroke.addColorStop(1, "#f49080");
Result:
There is an option to fill in this chart area instead of showing only line stroke. First, let’s add the single color background.
Replace this line of code:
fill: falsewith
fill: true,
backgroundColor: "rgba(244, 144, 128, 0.8)"Result:
That was easy. Now let’s create backgroundColor that will have the same gradient like line stroke.
Declare the new variable that will store the background color. We will use the same colors as we used for agradientStroke variable but with opacity. Otherwise, there won’t be a visible difference between line stroke and filled area.
To convert HEX colors to RGBA I use this hex2rgba online converter.
var gradientFill = ctx.createLinearGradient(500, 0, 100, 0);gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");
Instead of rgba() color
backgroundColor: "rgba(244, 144, 128, 0.8)"Lets use new gradientFill variable
backgroundColor: gradientFillResult:
Live example:
Chart.js library also provides simple animations that you can easily apply to your chart. In this tutorial, we will cover the basic animations.
Inside options:{} add
animation: {
easing: "easeInOutBack"
}More available easing options:
Live example:
For more information visit official guide about animation configuration.
Extras
Gradient Line Chart without points, only with filled area.
Gradient Line Chart without labels on x/y axis.
Gradient Line Chart without line stroke, only points.
For more information about customizing, take a look at these useful resources:
- Chart.js official documentation
- Chart.js GitHub repo
chartjstag on Stack Overflow#chartjschannel on Vanila.io chat
If you liked this tutorial and found it useful, please recommend ❤ and share with your friends!
Feel free to write about your favorite library for creating charts in the comments bellow!
