Chart.js 2.7.0 Grouped Horizontal Bar Chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Chart.js 2.7.0 Grouped Horizontal Bar Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>bar chart with ChartJS - JSFiddle</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
      <style id="compiled-css" type="text/css">

html {//from   w w  w. j  a va 2 s .  c o  m
   overflow: hidden;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
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);
    }

      </script> 
   </head> 
   <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>
</html>

Related Tutorials