Chart.js

❮ Previous Next ❯

Chart.js is a free JavaScript library used to create charts in HTML. It's a straightforward visualization tool for JavaScript, offering various built-in chart types.

Scatter Plot
Line Chart
Bar Chart
Pie Chart
Donut Chart
Bubble Chart
Area Chart
Radar Chart
Mixed Chart

How to Use Chart.js?

1. Add a link to the providing CDN (Content Delivery Network):

2. Add a <canvas> to where in the HTML you want to draw the chart:

The canvas element must have a unique id.

Typical Bar Chart Syntax:

const myChart = new Chart("myChart", {
  type: "bar",
  data: {},
  options: {}
});

Typical Line Chart Syntax:

const myChart = new Chart("myChart", {
  type: "line",
  data: {},
  options: {}
});

Bar Charts

Pie Charts

Doughnut Charts

Scatter Plots

House Prices vs. Size

Line Graphs

House Prices vs. Size

If you set the borderColor to zero, you can create ascatter plot instead of a line graph.

Multiple Lines

Linear Graphs

Function Graphs

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

<canvas id="myChart" style="width:100%;max-width:600px"></canvas>

<script>
const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    }
  }
});
</script>

</body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      const yValues = [55, 49, 44, 24, 15];
      const barColors = ["blue"];
      new Chart("myChart", {
        type: "bar",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      const yValues = [55, 49, 44, 24, 15];
      let barColors = "red";
      new Chart("myChart", {
        type: "bar",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          xlegend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      const yValues = [55, 49, 44, 24, 15];
      const barColors = ["rgba(255,0,0,1.0)", "rgba(255,0,0,0.8)", "rgba(255,0,0,0.6)", "rgba(255,0,0,0.4)", "rgba(255,0,0,0.2)"];
      new Chart("myChart", {
        type: "bar",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      var yValues = [55, 49, 44, 24, 15];
      var barColors = ["red", "green", "blue", "orange", "brown"];
      new Chart("myChart", {
        type: "horizontalBar",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          title: {
            display: true,
            text: "World Wine Production 2018"
          },
          scales: {
            xAxes: [{
              ticks: {
                min: 10,
                max: 60
              }
            }]
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      const yValues = [55, 49, 44, 24, 15];
      const barColors = ["#b91d47", "#00aba9", "#2b5797", "#e8c3b9", "#1e7145"];
      new Chart("myChart", {
        type: "pie",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          title: {
            display: true,
            text: "World Wide Wine Production 2018"
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
      const yValues = [55, 49, 44, 24, 15];
      const barColors = ["#b91d47", "#00aba9", "#2b5797", "#e8c3b9", "#1e7145"];
      new Chart("myChart", {
        type: "doughnut",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          title: {
            display: true,
            text: "World Wide Wine Production 2018"
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
    <script>
      const xyValues = [{
        x: 50,
        y: 7
      }, {
        x: 60,
        y: 8
      }, {
        x: 70,
        y: 8
      }, {
        x: 80,
        y: 9
      }, {
        x: 90,
        y: 9
      }, {
        x: 100,
        y: 9
      }, {
        x: 110,
        y: 10
      }, {
        x: 120,
        y: 11
      }, {
        x: 130,
        y: 14
      }, {
        x: 140,
        y: 14
      }, {
        x: 150,
        y: 15
      }];
      new Chart("myChart", {
        type: "scatter",
        data: {
          datasets: [{
            pointRadius: 4,
            pointBackgroundColor: "rgb(0,0,255)",
            data: xyValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              ticks: {
                min: 40,
                max: 160
              }
            }],
            yAxes: [{
              ticks: {
                min: 6,
                max: 16
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
      const yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(0,0,255,1.0)",
            borderColor: "rgba(0,0,255,0.1)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                min: 6,
                max: 16
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
      const yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(0,0,255,1)",
            borderColor: "rgba(0,0,0,0)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                min: 6,
                max: 16
              }
            }],
          }
        }
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            data: [860, 1140, 1060, 1060, 1070, 1110, 1330, 2210, 7830, 2478],
            borderColor: "red",
            fill: false
          }, {
            data: [1600, 1700, 1700, 1900, 2000, 2700, 4000, 5000, 6000, 7000],
            borderColor: "green",
            fill: false
          }, {
            data: [300, 700, 2000, 5000, 6000, 4000, 2000, 1000, 200, 100],
            borderColor: "blue",
            fill: false
          }]
        },
        options: {
          legend: {
            display: false
          }
        }
      });
    </script>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = [];
      const yValues = [];
      generateData("x * 2 + 7", 0, 10, 0.5);
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            pointRadius: 1,
            borderColor: "rgba(255,0,0,0.5)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          title: {
            display: true,
            text: "y = x * 2 + 7",
            fontSize: 16
          }
        }
      });

      function generateData(value, i1, i2, step = 1) {
        for (let x = i1; x <= i2; x += step) {
          xValues.push(x);
          yValues.push(eval(value));
        }
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <body>
    <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    <script>
      const xValues = [];
      const yValues = [];
      generateData("Math.sin(x)", 0, 10, 0.5);
      new Chart("myChart", {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            pointRadius: 2,
            borderColor: "rgba(0,0,255,0.5)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          title: {
            display: true,
            text: "y = sin(x)",
            fontSize: 16
          }
        }
      });

      function generateData(value, i1, i2, step = 1) {
        for (let x = i1; x <= i2; x += step) {
          yValues.push(eval(value));
          xValues.push(x);
        }
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics