Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<head>
​
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
​
</head>
​
<body>
<div>
  <canvas id="myChart1"></canvas> 
  <canvas id="myChart2"></canvas>
</div>
​
​
​
<script>
  const ctx = document.getElementById('myChart1');
  // eslint-disable-next-line no-new, no-undef
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['جابر', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# عدد اراء',
        data: [14, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      plugins: {
        tooltip: {
          rtl: true,
          boxPadding: 40,
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
​
  const data = {
  datasets: [{
    label: 'First Dataset',
    data: [{
      x: 20,
      y: 30,
      r: 15
    }, {
      x: 40,
      y: 10,
      r: 10
    }],
    backgroundColor: 'rgb(255, 99, 132)'
  }]
};
const ctx2= document.getElementById('myChart2');
​
  // eslint-disable-next-line no-new
  new Chart(ctx2, {
    type: 'bubble',
    data: data,
    options: {
      plugins: {
        tooltip: {
          rtl: true,
          boxPadding: 40,
        }
      }
    }
});
​
​
</script>
​
​
</body>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
shahabhmpro
0viewers