Ejaz Ahmad
Digital Assets & Tools
Try Playground
Free ResourcesUI/UX ComponentsNewOnline ToolsWeb UtilitiesHostingTutorials & LMSNewPlaygrounds7 Live
Open Playground
← Plotly.jsGoogle Chart →
JS TutorialLesson #273

Chart.js

> Chart.js is an free JavaScript library for making HTML-based charts.

Chart.js is an free JavaScript library for making HTML-based charts. > It is one of the simplest visualization libraries for JavaScript, and > comes with the many built-in chart types: > Scatter Plot > Line Chart > Bar Chart > Pie Chart > Donut Chart > Bubble Chart > Area Chart > Radar Chart > Mixed Chart

Share

How to Use Chart.js?

Example

Example Code

html
Try it Yourself

Example

Example Code

html
Try it Yourself
id="myChart" style="width:100%;max-width:700px"

Typical Bar Chart Syntax:

Example Code

javascript
Try it Yourself
const myChart = new Chart("myChart", {

  type: "bar",

  data: {},

  options: {}

});

Bar Charts

Source Code

Example Code

javascript
Try it Yourself
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: {...}

});

Example

Example Code

javascript
Try it Yourself
const barColors = ["blue"];

Example

Example Code

javascript
Try it Yourself
const barColors = [

  "rgba(0,0,255,1.0)",

  "rgba(0,0,255,0.8)",

  "rgba(0,0,255,0.6)",

  "rgba(0,0,255,0.4)",

  "rgba(0,0,255,0.2)",

];

Horizontal Bars

Example Code

javascript
Try it Yourself
indexAxis: 'y',

Pie Charts

Example

Example Code

javascript
Try it Yourself
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

Example Code

javascript
Try it Yourself
type: "doughnut";

Scatter Plots

House Prices vs. Size

Source Code

Example Code

javascript
Try it Yourself
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

Source Code

Example Code

javascript
Try it Yourself
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:{...}

});

If you set the borderColor to zero, you can scatter plot the line graph:

Example

Example Code

javascript
Try it Yourself
borderColor: "rgba(0,0,0,0)",

Multiple Lines

Source Code

Example Code

javascript
Try it Yourself
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

Example Code

javascript
Try it Yourself
const xValues = [];

const yValues = [];

generateData("x * 2 + 7", 0, 10, 0.5);

const ctx = document.getElementById('myChart');

new Chart(ctx, {

  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

### Example

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

Interactive Code Examples

Example 1

html
Try it Yourself
JavaScript syntax and algorithm demonstration.
<script

src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0">

</script>

Example 2

html
Try it Yourself
JavaScript syntax and algorithm demonstration.
<canvas>

id="myChart" style="width:100%;max-width:700px"

</canvas>

Typical Bar Chart Syntax:

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
const myChart = new Chart("myChart", {

  type: "bar",

  data: {},

  options: {}

});

Source Code

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
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: {...}

});

Example 5

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
const barColors = ["blue"];

Example 6

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
const barColors = [

  "rgba(0,0,255,1.0)",

  "rgba(0,0,255,0.8)",

  "rgba(0,0,255,0.6)",

  "rgba(0,0,255,0.4)",

  "rgba(0,0,255,0.2)",

];
Previous: Plotly.jsNext: Google Chart