Fynd Academy

Chart.js is a free JavaScript library for creating HTML-based charts. It is one of the simplest visualization libraries and comes with many built-in chart types, including:

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

How to Use Chart.js

Add a link to the Chart.js CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>‍

Add a <canvas> element to your HTML where you want to draw the chart:

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

Typical Syntax

Bar Chart:

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

‍

Line Chart:

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

‍

Bar Charts

Source Code:

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: {...}
});

‍

Horizontal Bar Chart:

type: "horizontalBar",

Pie Charts

Example:

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,
      text: "World Wide Wine Production"
    }
  }
});

‍

Doughnut Charts

Example:

type: "doughnut",

‍

Scatter Plots

House Prices vs. Size:

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: "rgba(0,0,255,1)",
      data: xyValues
    }]
  },
  options: {...}
});

Line Graphs

House Prices vs. Size:

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: [{
      backgroundColor: "rgba(0,0,255,1.0)",
      borderColor: "rgba(0,0,255,0.1)",
      data: yValues
    }]
  },
  options: {...}
});

‍

Multiple Lines:

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

‍

Linear Graphs

Source Code:

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: {...}
});

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

Function Graphs:

generateData("Math.sin(x)", 0, 10, 0.5);

‍

Take a look into your desired course