Chart.js bar chart barWidth - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js bar chart barWidth

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-2.1.3.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w w.j  av a2s .co m
$(document).ready(function () {
    var a = [1, 2, 3];
    var data = {
        labels: ["A", "B", "C"],
        datasets: [{
            label: "My dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: a
        }]
    };
Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.options.barValueSpacing = this.chart.width / 5;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});
    var ctx = $("#myChart2").get(0).getContext("2d");
    var myLineChart = new Chart(ctx).Bar(data, {
        responsive: true
    });
    var ctx = $("#myChart1").get(0).getContext("2d");
    var myLineChart = new Chart(ctx).BarAlt(data, {
        responsive: true
    });
});
    });

      </script> 
   </head> 
   <body> 
      <canvas id="myChart1"></canvas> 
      <canvas id="myChart2"></canvas>  
   </body>
</html>

Related Tutorials