Make bar chart in a certain section of chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Make bar chart in a certain section of chart

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://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

.myChartWrapper {/*  w ww. j  av  a2  s  .c  o m*/
   font-family: Helvetica;
   color: #999;
   background-color: #eee;
   display: inline-block;
   padding: 20px;
}
.myChartWrapper > * {
   display: block;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(254, 133, 92, 1)",
        highlightFill: "rgba(100,100,100,1)",
        data: [8000, 5000, 3000, 5000, 9000, 8000, 6000]
    }]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data, {
    scaleOverride: true,
    barValueSpacing : 30,
    scaleSteps: 5,
    scaleStepWidth: 2000,
    scaleStartValue: 0,
});
    });

      </script> 
   </head> 
   <body> 
      <div class="myChartWrapper">
          VISITS 
         <br>
         <br> 
         <canvas id="myChart" width="800" height="400"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials