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.

You can also install it via npm:

npm install chart.js --save

Or via bower:

bower install chart.js --save

For 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.


Basic Line Chart — Chart.js

Live example:

Basic Line Chart — Chart.js (codepen)

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: gradientStroke


Gradient Line Chart — Chart.js

Live example:

Gradient Line Chart — Chart.js (codepen)

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");


Gradient Line Chart with more colors — Chart.js

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: false


fill: true,
backgroundColor: "rgba(244, 144, 128, 0.8)"


Line Chart with Gradient Line and Filled Area (single color) — Chart.js

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: gradientFill


Line Chart with Gradient Line and Filled Area (gradient) — Chart.js

Live example:

Line Chart with Gradient Line and Filled Area (gradient) — Chart.js (codepen)

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:

Available easing options — Chart.js

Live example:

Line Chart with Gradient Line and Filled Area + Animation — Chart.js (codepen)

For more information visit official guide about animation configuration.


Gradient Line Chart without points, only with filled area.

Gradient Line Chart without points, only with filled area — Chart.js (codepen)

Gradient Line Chart without labels on x/y axis.

Gradient Line Chart without labels on x/y axis — Chart.js (codepen)

Gradient Line Chart without line stroke, only points.

Gradient Line Chart without line stroke, only points — Chart.js (codepen)

For more information about customizing, take a look at these useful resources:

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!

About the author

Hi, my name is Jelena and thank you for reading this post!

I am 23 yo Co-founder & Web Developer at I learn new stuff every day and here I will share all my experiences and thoughts with you.

You can also find me on Twitter and Instagram. :)

Download Chrome Extension or visit