Modify bar width in Chartjs bar charts - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Modify bar width in Chartjs bar charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/9368c6079d989527dcd2072b6f18780b53e3113c/Chart.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from   w  w w .j a va2 s  .  com*/
var _data = {
    labels: ["01-01",
        "01-04",
        "01-15",
        "02-03",
        "03-25",
        "04-03",
        "04-14",
        "05-27",
        "05-27",
        "08-03"],
    datasets: [{
        data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
        label: "female",
        borderColor: "rgba(197,23,1,0.8)",
        backgroundColor: "rgba(197,23,1,0.4)",
        hoverBackgroundColor: "rgba(197,23,1,1)",
        borderWidth: 1,
        pointBorderColor: "rgba(197,23,1,1)",
        pointBackgroundColor: "rgba(255,255,255,0.8)",
        pointBorderWidth: 1.5,
        tension: -1,
        yAxisID: "y-axis-1",
    }, ],
};
var _options = {
    scales: {
        xAxes: [{
            categorySpacing: 0
        }],
        yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
        }]
    }
};
var myBar = new Chart(document.getElementById("barChart").getContext("2d"), {
    type: "bar",
    data: _data,
    options: _options
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="barChart" width="700" height="400"></canvas>  
   </body>
</html>

Related Tutorials