Customize a column chart in chartjs - Javascript Chart.js

Javascript examples for Chart.js:Column Chart

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

Description

Customize a column chart in chartjs

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Tyler McNew</title> 
   </head> 
   <body translate="no"> 
      <canvas id="myChart" width="800" height="800" padding-right="20px"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
      <script>
            var data = {/*ww  w. ja v a 2  s  . co m*/
        labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        datasets: [{
          label: "My First dataset",
          fillColor: "rgba(51,190,139,1)",
          strokeColor: "rgba(51,190,139,1)",
          highlightFill: "rgba(51,190,139,1)",
          highlightStroke: "rgba(51,190,139,1)",
          data: [1000, 1250, 750, 1160, 500, 1500, 850],
        }]
      };
    var options = {
         scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 150,
        scaleStartValue : 0,
         responsive: true,
        barValueSpacing: 40,
        animation: false,
        scaleLabel:
        function(label){return  ' ?' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
    };
      var ctx = document.getElementById("myChart").getContext("2d");
      var myBarChart = new Chart(ctx).Bar(data, options,{
      });
      </script>  
   </body>
</html>

Related Tutorials