horizontal bars creation - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

horizontal bars creation

Demo Code

ResultView the demo in separate window 

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

canvas {//from w  ww .  ja v  a 2 s.com
   background-color: #ffffff;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var elem = document.getElementById('chartJSContainer').getContext('2d');
new Chart(elem, {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1"],
    datasets: [{
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
    }],
  },
  options: {
    legend: {
      display: false,
      labels: {
        padding: 20,
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
          // lineWidth: 0,
          drawTicks: false,
          drawBorder: false,
          // zeroLineWidth: 1,
        },
      }],
      yAxes: [{
        barPercentage: 1, // I've also tried all from [0.90, 1]
        categoryPercentage: 1, // I've also tried all from [0.90, 1]
        ticks: {
          padding: 25,
        },
      }]
    },
  }
});
    }

      </script> 
   </head> 
   <body>  
      <canvas id="chartJSContainer" width="600" height="400"></canvas>   
   </body>
</html>

Related Tutorials