How to use Chart.js | 11 Chart.js Examples

Nov. 10, 2020, 3:30 p.m.

JavaScript · 13 min read

How to use Chart.js | 11 Chart.js Examples

Last Modified: March 31, 2021, 10:51 a.m.

What is Chart.js?

Chart.js is an open-source data visualization library.

HTML5 charts using JavaScript render animated charts with interactive legends and data points.

How do you use Chart.js?

Built using JavaScript, Chart.js requires the use of the HTML <canvas> element and a JS function to instantiate the chart.

Datasets, labels, background colors, and other configurations are then added to the function as needed.

What is covered in this Chart.js tutorial?

We will cover the following topics:

Chart.js Installation
- npm
- bower
- CDN
Chart.js Integration
- Chart.js HTML
- Chart.js JS
Chart.js Charts
- Line
- Radar
- Doughnut
- Pie
- Polar area
- Bubble
- Scatter
- Area
- Mixed
Chart.js Configurations
- Chart title
- Chart legends
- Chart padding

Chart.js Installation - How to install Chart.js

Install Chart.js via npm or bower.

Or use the CDN to added the minified Chart.js scripts.

Chart.js npm

How to install Chart.js with npm

npm install chart.js --save

Install chart.js in the command prompt using npm.

Chart.js Bower

How to install Chart.js with bower

bower install chart.js --save

Or install Chart.js in the command prompt using bower.

Chart.js CDN

How to use the Chart.js CDN

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    ...
  
  
  </body>
</html>

While the documentation recommends installing Chart.js in the command prompt, add the Chart.js CDN to the <head> element for light-weight development.

The examples below use the CDN.

Integration - How to add Chart.js to an HTML document

Chart.js requires HTML and JavaScript code.

The HTML code places the chart in the document using the <canvas> element while the JavaScript function instantiates the chart.

How to add the Chart.js <canvas> element

How to display Chart.js in an HTML template

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>
  
  
  </body>
</html>

Chart.js requires a <canvas> element containing the unique id of the chart for the data to render in the HTML template.

This is the only HTML code required.

How to instantiate Chart.js

How to add the Chart.js JavaScript function

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Integration</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            
        });
    </script>

  
  
  </body>
</html>

Then create the script that creates the chart.

The type, data, and configuration options will be added within the function.

Charts - 11 Chart.js Examples

There are nine types of charts offered by Chart.js.

Each is customizable and can be combined on a mixed chart.

Chart.js Line Chart Example

How to make a Chart.js line chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Line Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
       var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [86,114,106,106,107,111,133],
                label: "Total",
                borderColor: "#3e95cd",
                backgroundColor: "#7bb6dd",
                fill: false,
              }, { 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "#3cba9f",
                backgroundColor: "#71d1bd",
                fill: false,
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "#ffa500",
                backgroundColor:"#ffc04d",
                fill: false,
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "#c45850",
                backgroundColor:"#d78f89",
                fill: false,
              }
            ]
          },
        });
    </script>

  
  
  </body>
</html>

Specify the type of chart as 'line', then add the dataset properties below.

Add individual data sets with y-axis datapoints, a label, borderColor, backgroundColor, and fill properties.

Chart.js Line chart

Chart.js Filled Line Chart Example

How to make a Chart.js line chart with background colors

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Filled Line Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
       var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [86,114,106,106,107,111,133],
                label: "Total",
                borderColor: "rgb(62,149,205)",
                backgroundColor: "rgb(62,149,205,0.1)",
              }, { 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "rgb(60,186,159)",
                backgroundColor: "rgb(60,186,159,0.1)",
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "rgb(255,165,0)",
                backgroundColor:"rgb(255,165,0,0.1)",
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "rgb(196,88,80)",
                backgroundColor:"rgb(196,88,80,0.1)",
              }
            ]
          },
        });
    </script>

  
  
  </body>
</html>

Specify the backgroundColor for each dataset and either delete fill:false or change it to fill:true to add a background color to each line area.

However, be aware colors do get muddy as they overlap.

We also recommend using the RGB color format for the backgroundColor to specify opacity.

Chart.js Filled Line Chart

Chart.js Bar Chart Example

How to make a Chart.js bar chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Bar Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [86,114,106,106,107,111,133],
                label: "Total",
                borderColor: "rgb(62,149,205)",
                backgroundColor: "rgb(62,149,205,0.1)",
                borderWidth:2
              }, { 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "rgb(60,186,159)",
                backgroundColor: "rgb(60,186,159,0.1)",
                borderWidth:2
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "rgb(255,165,0)",
                backgroundColor:"rgb(255,165,0,0.1)",
                borderWidth:2
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "rgb(196,88,80)",
                backgroundColor:"rgb(196,88,80,0.1)",
                borderWidth:2
              }
            ]
          },
        });
    </script>

  
  
  </body>
</html>

Declare type:"bar", then add the x-axis labels and the datasets.

The background color of the bars will default to gray if no backgroundColor is given.

Chart.js Filled Bar Chart

Chart.js Stacked Bar Chart Example

How to make a Chart.js stacked bar chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Stacked Bar Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "#3cba9f",
                backgroundColor: "#71d1bd",
                borderWidth:2
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "#ffa500",
                backgroundColor:"#ffc04d",
                borderWidth:2
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "#c45850",
                backgroundColor:"#d78f89",
                borderWidth:2
              }
            ]
          },
          options: {
            scales: {
               xAxes: [{ 
                stacked: true    
               }],
               yAxes: [{
                stacked:true
               }],
             }
           },
        });
    </script>

  
  
  </body>
</html>

Instead of having a Totals dataset, present the data as a stacked bar chart.

The scales option with both xAxes and yAxes set to stacked:true needs to be added for this to work.

Chart.js Stacked bar Chart

Chart.js Radar Chart Example

How to make a Chart.js radar chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Radar Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'radar',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [86,114,106,106,107,111,133],
                label: "Total",
                borderColor: "#3e95cd",
                backgroundColor: "rgb(62,149,205,0.1)",
                borderWidth:2,
               
              }, { 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "#3cba9f",
                backgroundColor: "rgb(60,186,159,0.1)",
                borderWidth:2,
                
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "#ffa500",
                backgroundColor:"rgb(255,165,0,0.1)",
                borderWidth:2,
                
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "#c45850",
                backgroundColor:"rgb(196,88,80,0.1)",
                borderWidth:2,
                
              }
            ]
          },
          options: {
             scales: {
               xAxes: [{ 
                  display: false,
               }],
             }
           },
        });
    </script>

  
  
  </body>
</html>

If you choose to display a radar chart, set the XAxes and YAxes to display: false, as they is not needed to read this chart.

Chart.js radar chart example

Chart.js Doughnut Chart Example

How to make a Chart.js doughnut chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Doughnut Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Accepted","Pending", "Rejected"],
            datasets: [{ 
                data: [70,10,6],
                borderColor:[
                  "#3cba9f",
                  "#ffa500",
                  "#c45850",
                ],
                backgroundColor: [
                  "rgb(60,186,159,0.1)",
                  "rgb(255,165,0,0.1)",
                  "rgb(196,88,80,0.1)",
                ],
                borderWidth:2,
              }]
          },
        options: {
          scales: {
            xAxes: [{ 
               display: false,
            }],
            yAxes: [{
               display: false,
            }],
          }
        },

      });
    </script>

  
  
  </body>
</html>

The doughnut chart works similarly to the radar chart.

The axes are not required for this chart.

Chart.js Doughnut Chart Example

Chart.js Pie Chart Example

How to make a Chart.js pie chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Pie Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ["Accepted","Pending", "Rejected"],
            datasets: [{ 
                data: [70,10,6],
                borderColor:[
                  "#3cba9f",
                  "#ffa500",
                  "#c45850",
                ],
                backgroundColor: [
                  "rgb(60,186,159,0.1)",
                  "rgb(255,165,0,0.1)",
                  "rgb(196,88,80,0.1)",
                ],
                borderWidth:2,
              }]
          },
        options: {
          scales: {
            xAxes: [{ 
               display: false,
            }],
            yAxes: [{
               display: false,
            }],
          }
        },
      });

    </script>

  
  
  </body>
</html>

The pie chart works similarly to the doughnut chart, it just renders without a hole in the center.

Chart.js Pie Chart Example

Chart.js Polar Area Chart Example

How to make a Chart.js polar area chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Polar Area Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ["Accepted","Pending", "Rejected"],
            datasets: [{ 
                data: [70,10,6],
                borderColor:[
                  "#3cba9f",
                  "#ffa500",
                  "#c45850",
                ],
                backgroundColor: [
                  "rgb(60,186,159,0.1)",
                  "rgb(255,165,0,0.1)",
                  "rgb(196,88,80,0.1)",
                ],
                borderWidth:2,
              }]
          },
        options: {
          scales: {
            xAxes: [{ 
               display: false,
            }],
            yAxes: [{
               display: false,
            }],
          }
        },
      });

    </script>

  
  
  </body>
</html>

The polar area charts require the same dataset formatting as the doughnut and pie charts.

Chart.js Polar Area Chart Example

Chart.js Bubble Chart Example

How to make a Chart.js bubble chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Bubble Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bubble',
          data: {
            datasets: [{ 
                data: [
                  {x: 17, y: 3, r:11},
                ],
                label: "Blue Team",
                borderColor: "#3e95cd",
                backgroundColor: "rgb(62,149,205,0.1)",
                borderWidth:2,
               
              }, { 
                data: [
                  {x: 10, y: 3, r:20},
                ],
                label: "Green Team",
                borderColor: "#3cba9f",
                backgroundColor: "rgb(60,186,159,0.1)",
                borderWidth:2,
                
              }, { 
                data: [
                {x: 4, y: 4, r:30},
                ],
                label: "Yellow Team",
                borderColor: "#ffa500",
                backgroundColor:"rgb(255,165,0,0.1)",
                borderWidth:2,
                
              }, { 
                data: [
                {x: 14, y: 0, r:9}
                ],
                label: "Red Team",
                borderColor: "#c45850",
                backgroundColor:"rgb(196,88,80,0.1)",
                borderWidth:2,
              }
            ]
          },
          options: {
            scales: {
              xAxes: [{ 
                scaleLabel: {
                  display: true,
                  labelString: '# of wins'
                }
              }],
              yAxes: [{
                scaleLabel: {
                  display: true,
                  labelString: '# of games'
                }
              }],
            }
          },
        });

    </script>

  
  
  </body>
</html>

For bubble charts, a set of x and y coordinates required in the dataset.

To create the radius of the bubbles, add a third coordinate r.

Chart.js Bubble Chart Example

Chart.js Scatter Chart Example

How to make a Chart.js scatter chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Scatter Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'scatter',
          data: {
            datasets: [{ 
                data: [
                  {x: 17, y: 3},
                ],
                label: "Blue Team",
                borderColor: "#3e95cd",
                backgroundColor: "rgb(62,149,205,0.1)",
                borderWidth:2,
               
              }, { 
                data: [
                  {x: 10, y: 3},
                ],
                label: "Green Team",
                borderColor: "#3cba9f",
                backgroundColor: "rgb(60,186,159,0.1)",
                borderWidth:2,
                
              }, { 
                data: [
                {x: 4, y: 4},
                ],
                label: "Yellow Team",
                borderColor: "#ffa500",
                backgroundColor:"rgb(255,165,0,0.1)",
                borderWidth:2,
                
              }, { 
                data: [
                {x: 14, y: 0}
                ],
                label: "Red Team",
                borderColor: "#c45850",
                backgroundColor:"rgb(196,88,80,0.1)",
                borderWidth:2,
              }
            ]
          },
          options: {
            scales: {
              xAxes: [{ 
                scaleLabel: {
                  display: true,
                  labelString: '# of wins'
                }
              }],
              yAxes: [{
                scaleLabel: {
                  display: true,
                  labelString: '# of games'
                }
              }],
            }
          },
        });

    </script>

  
  
  </body>
</html>

X and Y properties are also required for a scatter chart.

Chart.js Scatter Chart Example

Chart.js Mixed Chart Example

How to make a Chart.js mixed chart with bar and line datasets

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Mixed Chart</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{ 
                data: [86,114,106,106,107,111,133],
                label: "Total",
                borderColor: "#3e95cd",
                backgroundColor: "rgb(62,149,205)",
                borderWidth:2,
                type: 'line',
                fill:false
              }, { 
                data: [70,90,44,60,83,90,100],
                label: "Accepted",
                borderColor: "#3cba9f",
                backgroundColor: "#3cba9f",
                borderWidth:2
              }, { 
                data: [10,21,60,44,17,21,17],
                label: "Pending",
                borderColor: "#ffa500",
                backgroundColor:"#ffa500",
                borderWidth:2,
              }, { 
                data: [6,3,2,2,7,0,16],
                label: "Rejected",
                borderColor: "#c45850",
                backgroundColor:"#c45850",
                borderWidth:2
              }
            ]
          },
        });

    </script>

  
  
  </body>
</html>

A mixed chart combines multiple Chart.js chart types on one graph. A common combination is line and bar chart datasets.

Change the dataset by adding type to the dataset.

Chart.js Mixed Chart Example

How to customize Chart.js - Chart.js Configurations

The title, legends, padding, and colors are all configurable Chart.js properties. Most are declared under options.

Chart.js title

How to customize the Chart.js title

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Title</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'scatter',
          data: {
            ...
          },
          options: {
            title: {
              display: true,
              text: 'Leads over Time',
            },
          },

        });
    </script>

  
  
  </body>
</html>

The title is added under options as a string.

Chart.js title

Chart.js legend

How to place the Chart.js legend top center

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Legend Center</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'scatter',
          data: {
            ...
          },
          options: {
            legend: {
              display:true,
              position:'left',
              align:'start'
            },
          },
        });
    </script>

  
  
  </body>
</html>

The position sets the horizontal location while align determines the vertical location of the legend.

By default, the legend is displayed at the top, center of the canvas.

Positions are either 'top', 'bottom', 'left', or 'right'. Align can be 'start','center', or 'end'.

Chart.js layout

How to add padding to the Chart

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Padding</title>
    <!--Chart.js JS CDN--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 
  </head>
  <body>

    <div>
	<canvas id="myChart"></canvas>
    </div>

    <script>
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            ...
          },
          options: {
              layout: {
                 padding: {
                    left: 50,
                    right: 30,
                    top: 3,
                    bottom: 2
                 }
              }
           },
        });
    </script>

  
  
  </body>
</html>

The padding is added to the chart within layout.

Related Projects

Django Powered Blog for Affiliate Marketing

By James

A Django powered blog and product showcase for affiliate marketing from Building a Django Web App course. Pre-built Django …

React Chatbot for Lead Generation

By Jaysha

A basic React chatbot component with a pre-built component to handle posting. Built using Lucas Bassetti's React Simple …

JavaScript

2 Comments

Michael7 April 9, 2021, 10:16 a.m.

This is very clear and useful, unlike other articles, including the official one, that are incomplete and full of bafflegab. I am wondering if you intend to update this article to version 3 of Chart.js?

Jaysha replying to Michael7 April 9, 2021, 2:07 p.m.

I didn't realize version 3 was available. I'll be sure to update the article. Thanks for the suggestion!