bar chart with ChartJS - JSFiddle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>
<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
   <div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;">
      <div id="canvas-holder" style="height: 100%; width: 500px;" oncontextmenu="return false;">
         <canvas id="myChart"></canvas>
      </div>
   </div>
</body>

CSS

html {
   overflow: hidden;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

var chart = {
   options: {
      scales: {
         yAxes: [{
            barPercentage: 1.0
         }],
      },
      tooltips: {
         mode: 'nearest', //<- set this
         callbacks: {
            label: function(tooltipItem, data) {
               console.log(tooltipItem);
               return data.datasets[tooltipItem.datasetIndex].label + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
            }
         }
      },
      responsive: true,
      maintainAspectRatio: false,
      animation: {
         onComplete: function(animation) {}
      }
   },
   type: 'horizontalBar',
   data: {
      labels: ['Topic1'],
      datasets: [{
         label: 'Something',
         borderColor: 'blue',
         borderWidth: 1,
         backgroundColor: Color('blue').alpha(0.5).rgbString(),
         data: [40],
         fill: false
      }, {
         label: 'Something else',
         borderColor: 'orange',
         borderWidth: 1,
         backgroundColor: Color('orange').alpha(0.5).rgbString(),
         data: [17],
         fill: false
      }]
   }
};

var myLiveChart = new Chart(ctx, chart);