Chart JS Bar Chart

Bar chart demo

by Sayantan Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<div class="container">
  <canvas id="myChart" width="300" height="220"></canvas>
</div>

CSS

.container {
   width: 300px;
   height: 220px;
   margin: 20px auto;
}

canvas {
  background-color: #fff;
}

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',

  options: {
    legend: {
      display: false,
    },
    "hover": {
      "animationDuration": 0
    },
    "animation": {
      "duration": 1,
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.data[index];
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        },
        ticks: {
          fontSize: 12,
          fontColor: 'lightgrey',

        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          display: false,
          scaleShowLabels: false
        },
        ticks: {
          beginAtZero: true,
          fontSize: 15,
          fontColor: 'lightgrey',
          maxTicksLimit: 5,
          padding: 95,
          display: false,

        }
      }]
    },

  },
  data: {
    labels: ['Your Territory', 'Region', 'Nation'],
    datasets: [{
      data: [11, 9, 17],
      backgroundColor: [
        '#053595',
        '#DDC9A5',
        '#00AEEF',

      ],

      borderWidth: 1,

      borderWidth: 2
    }]
  }
});