Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>This is a bar chart with ChartJS</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
  
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  
  <h5 style="font-family:Roboto">Source: World Bank</h5>
  
</body>
</html>
 
body {
          padding: 0px 20px 10px 30px;
          font-family: 'Roboto', sans-serif;
        }
        
        p {
            line-height: 1.4em;
            }
            
        h5 {
          border-top: 1px solid #000;
          display: inline;
          font-weight: 400;
        }
 
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Brazil", "China", "India", "Russia", "South Africa", "United Kingdom", "United States"],
        datasets: [ 
  { 
            label: "GDP per capita",
    backgroundColor: "rgba(204, 0, 0, .4)",
            borderColor: "#c00",
            borderWidth: 2,
            hoverBackgroundColor: "#59597F",         
            data: [11726.8, 7590.0, 1581.5, 12735.9, 6483.9, 46297.0, 54629.5 ]
  }
  ]
    },
    options: { 
          animation: {
          duration: 3000
                      },
          
          scales: {
              yAxes: [{
              display: true,                
              ticks: {
                beginAtZero: true,
                fontFamily: 'Roboto',
                fontSize: 14,
                fontColor: '#ababab',
                callback: function(value) { return value/1000 + ',000' + '$'; },
                },
               
                    }],
                xAxes: [{
                gridLines: {
                display: false
            },
                ticks: {
                fontFamily: "Roboto",
                fontSize: 14, 
            },     
        }],    
    },
               title: {
                display: true,
                text: 'Wealth in BRIC vs US/UK',
                fontFamily: 'Roboto',
                fontSize: 20,
                     },
                responsive: true,
}
});
Output

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

Dismiss x
public
Bin info
voltdatalabpro
0viewers