Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="col1"></div>

JavaScript

var col1 = new CanvasJS.Chart('col1', {
  animationEnabled: true,
  axisY2: {
    title: 'Test',
    reversed: true
  },
  axisY: {
  	reversed: true
  },
  axisX2: {
    interval: 1,
    labelFontSize: 0
  },
  data: [{
    type: 'bar',
    axisYType: 'primary',
    axisXType: 'secondary',
    color: '#014D65',
    indexLabel: '{y}',
    dataPoints: [
      {y: 3, label: 'Sweden'},
      {y: 7, label: 'Taiwan'},
      {y: 5, label: 'Russia'},
      {y: 9, label: 'Spain'},
      {y: 7, label: 'Brazil'},
      {y: 7, label: 'India'},
      {y: 9, label: 'Italy'},
      {y: 8, label: 'Australia'},
      {y: 11, label: 'Canada'},
      {y: 15, label: 'South Korea'},
      {y: 12, label: 'Netherlands'},
      {y: 15, label: 'Switzerland'},
      {y: 25, label: 'Britain'},
      {y: 28, label: 'Germany'},
      {y: 29, label: 'France'},
      {y: 52, label: 'Japan'},
      {y: 103, label: 'China'},
      {y: 134, label: 'US'}
    ]
  }]
});
col1.render();