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>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
</head>
<body>
​
  <canvas id="trendChart" width="500" height="300">
  
</body>
</html>
 
​
 
window.onload = function(){
new Chart(document.getElementById('trendChart'), {
      type: 'bar',
      data: {
        title: {
          display: false
        },
        labels: ["April '16", "May '16", "June '16", "Forecast"] ,
        datasets: [{
          label: 'Dataset 1',
          data: [18739460, 33056135, 36562034, 0],
          yAxisID: 'common',
          backgroundColor: '#ff0000'
​
        }, {
            label: 'Dataset 2',
            data: [0, 0, 0, 40479392],
            yAxisID: 'trend',
            backgroundColor: '#9ac3ea'
​
          }]
      },
      options: {
        scales: {
          yAxes: [{
            id: 'common',
            ticks: {
              beginAtZero: true,
            }
          }, {
            position: 'right',
            id: 'trend',
            scaleLabel: {
              display: true,
              labelString: 'Forecast'
            },
            gridLines:{
              display:false
            },
            ticks: {
              beginAtZero: true,
            }
          }],
          xAxes: [{
            ticks: {
            }
          }]
        },
        legend: {
          display: false
        }
      }
    });
};
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers