Login
  • AI
  • Graph Chart.js

Chart.js

 

Chart.js is a free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the following 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?

Chart.js is easy to use.

First, add a link to the providing CDN (Content Delivery Network):

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

Then, add a to where you want to draw the chart:

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
to where you want to draw the chart:
The canvas element must have a unique id.
That's all!
Typical Scatter Chart Syntax:
const myChart = new Chart("myChart", {
  type: "scatter",
  data: {},
  options: {}
});
Typical Line Chart Syntax:
 
const myChart = new Chart("myChart", {
  type: "line",
  data: {},
  options: {}
});
 
Typical Bar Chart Syntax:
const myChart = new Chart("myChart", {
  type: "bar",
  data: {},
  options: {}
});
 

Scatter Plots

House Prices vs. Size

 

Source Code

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

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:

borderColor: "rgba(0,0,0,0)",

Graph Chart.js
Login
ADS CODE