title: How to create rounded bars for Bar Chart.js v2?
body: <p>Trying to <a href="https://stackoverflow.com/questions/31582555/how-to-put-rounded-corners-on-a-chart-js-bar-chart">round the bars on bar chart</a> as found in this post that works as displayed in the <a href="http://jsfiddle.net/0dzp3jxw/" rel="noreferrer">jsFiddle</a> provided. This is for version 1. </p>
  
  <p>In the chart that I am using, it fails to load for the reference to <code>extend</code> in <code>Chart.types.Bar.extend</code> crashes the script.</p>
  
  <p>If I use the default option, the chart loads no problems. I had to place the <code>Chart.types.Bar.extend</code> at the end for the default option to load correctly. Run and View this in Full Screen.</p>
  
  <p>I tried implementing this with my version of Chart.js 2.4.0.</p>
  
  <p>Chrome reports: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'extend' of undefined
    chart.js</p>
  </blockquote>
  
  <p>This code will not even run here. Why is this occurring? Could someone please assist me.</p>
  
  <p>This code works with an older version of Chart.js 1.0. Could anyone please further display how this could work with version Chart.js 2.0? Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
   var myBarChart1 = new Chart($('#appBarChart2_NoRound'), {
    type: 'bar',
    data: dataBar2,
    options: optionsBar
   });
    
    var ctx = $("#appBarChart2").getContext("2d");
  
     var myBarChart2 = new Chart(ctx).BarAlt(dataBarAlt2, {
    // 0 (flat) to 1 (more curvy)
    curvature: 1
   });
  });
  
  var dataBarAlt2 = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              fillColor: "#1A9BFC",
              strokeColor: "#1A9BFC",
              data: [65, 59, 80, 81, 56, 55, 40],
          }
      ]
  };
  
  var dataBar2 = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              backgroundColor: '#1A9BFC',
              borderColor:'#1A9BFC',
              borderWidth: 1,
              data: [65, 59, 80, 81, 56, 55, 40],
          }
      ]
  };
  
  var optionsBar =
    {
          scales: {
              xAxes: [{
                  stacked: true,
      barThickness: 20,
      gridLines:{
       display:false,
      }
  //    barPercentage:0.5,
              }],
              yAxes: [{
                  stacked: true,
      
  //    barPercentage:0.5,
              }]
          },
    legend: {
     display: false,
  //   position: 'left'
     }
      };
  
  
  Chart.types.Bar.extend({
      name: "BarAlt",
      initialize: function (data) {
          Chart.types.Bar.prototype.initialize.apply(this, arguments);
  
          if (this.options.curvature !== undefined &amp;&amp; this.options.curvature &lt;= 1) {
              var rectangleDraw = this.datasets[0].bars[0].draw;
              var self = this;
              var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;
  
              // override the rectangle draw with ours
              this.datasets.forEach(function (dataset) {
                  dataset.bars.forEach(function (bar) {
                      bar.draw = function () {
                          // draw the original bar a little down (so that our curve brings it to its original position)
                          var y = bar.y;
                          // the min is required so animation does not start from below the axes
                          bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                          // adjust the bar radius depending on how much of a curve we can draw
                          var barRadius = (bar.y - y);
                          rectangleDraw.apply(bar, arguments);
  
                          // draw a rounded rectangle on top
                          Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                          ctx.fill();
  
                          // restore the y value
                          bar.y = y;
                      }
                  })
              })
          }
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
  &lt;p&gt;Bar Chart - Working&lt;/p&gt;
  &lt;canvas id="appBarChart2_NoRound" height="100" &gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;p&gt;Rounded Bar Chart - Not Working&lt;/p&gt;
  &lt;canvas id="appBarChart2" height="100" &gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>