Set and use Multiple bar width in Chart.js bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Set and use Multiple bar width in Chart.js bar chart

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js Varying Dataset Bar Widths - Horizontal Bar</title> 
      <style>

#container {/* w  ww .  j a v a  2  s. com*/
   width: 800px;
   height: 400px;
}


      </style> 
   </head> 
   <body translate="no"> 
      <div id="container"> 
         <canvas id="myChart" width="800" height="400"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script>
      var data = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [
    {
      label: "d1",
      backgroundColor: "rgba(182,127,0,1)",
      borderColor: "rgba(117,61,41,1)",
      borderWidth: 1,
      data: [42, 78, 64, 90, 97],
      stack: "s1"
    },
    {
      label: "d2",
      backgroundColor: "rgba(71,161,65,1)",
      borderColor: "rgba(36,93,56,1)",
      borderWidth: 1,
      data: [27, 63, 46, 64, 43],
      stack: "s1"
    },
    {
      label: "d3",
      backgroundColor: "rgba(255,141,106,1)",
      borderColor: "rgba(99,60,32,1)",
      borderWidth: 1,
      data: [18, 50, 23, 83, 35],
      stack: "s1"
    },
    {
      label: "d4",
      backgroundColor: "rgba(160,160,160,1)",
      borderColor: "rgba(60,60,60,1)",
      borderWidth: 1,
      data: [152, 141, 170, 194, 128],
      yAxisID: 'y-axis-2',
    }
  ]
};
var options = {
  scales: {
    yAxes: [{
      categoryPercentage: 0.6,
      barPercentage: 1,
    }, {
      id: 'y-axis-2',
      type: 'category',
      display: false,
      position: 'left',
      categoryPercentage: 0.6,
      barPercentage: 1,
      barThickness: 10,
      gridLines: {
        offsetGridLines: true
      }
    }],
  },
  legend: {
    display: false
  }
};
var barChart = new Chart($("#myChart"), {
  type: 'horizontalBar',
  data: data,
  options: options
});
    
      </script>  
   </body>
</html>

Related Tutorials