Change grid line width for one specific line for bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Change grid line width for one specific line for bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>line chart with ChartJS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w  w  w.  java2  s  .c o m
Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        var originalScaleDraw = this.scale.draw;
        this.scale.draw = function() {
            originalScaleDraw.apply(this, arguments);
           this.ctx.save();
           this.ctx.beginPath();
           this.ctx.lineWidth = this.gridLineWidth * 5;
           this.ctx.strokeStyle = "rgba(120,120,220,1)";
                this.ctx.moveTo(Math.round(this.xScalePaddingLeft), this.calculateY(60));
                this.ctx.lineTo(this.width, this.calculateY(60));
                this.ctx.stroke();
                this.ctx.closePath();
           this.ctx.restore();
        }
    }
});
var data = {
  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
  datasets: [
    {
      label: "My First dataset",
      fillColor: "rgba(220,120,120,1)",
      strokeColor: "rgba(220,120,120,1)",
      pointColor: "rgba(220,120,120,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,120,120,1)",
      data: [5, 5, 9, 81, 56, 55, 40]
    }
  ]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).BarAlt(data);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="300" width="800"></canvas>  
   </body>
</html>

Related Tutorials