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>
  
  <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>
  
  
</body>
</html>
 
var data = {
        labels: ["Brazil", "China", "India", "Russia", "South Africa", "United Kingdom", "United States"],
        datasets: [ 
  { 
            label: "GDP per capita (current US$)",
    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 ]
  }
  ]
};
var options = { 
                    defaultFontSize: 2,
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                            borderColor: 'rgb(0, 255, 0)',
                            borderSkipped: 'bottom'
                        }
                    },
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Wealth in BRIC vs US/UK'
                    }
                };
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});
Output

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

Dismiss x
public
Bin info
voltdatalabpro
0viewers