Lift the bar up from the bottom in bar type chart

I want to lift the bar up from the x axis by specifying the padding in-between. I tried to explore almost all properties but could not find a way to do so. I am using chart.js as the library.

Area marked in red box

Chart Image

enter image description here

Note: i am not able to insert the image using stackoverflow tool hence adding the direct url

I tried to provide the border width to the bottom of bar and set its color to transparent but that too did not work.

Answer

you could use a stacked bar chart.

use the first series as the offset from the axis, with a transparent color.

then reduce the actual data by the offset, so the bar height will end on the proper value.

see following working snippet…

$(document).ready(function() {
  var offset = [200, 200, 200, 200];
  var data = [7900, 5400, 4300, 4300];
  var ctx = document.getElementById('bar-chart');
  var data = {
    labels: ['June 9', 'June 11', 'June 13', 'June 15'],
    datasets: [{
      data: offset,
      backgroundColor: 'transparent'
    }, {
      data: data.map(function (value, index) {
        return value - offset[index];
      }),
      backgroundColor: 'orange'
    }]
  }
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      },
      scales: {
        yAxes: [{
          stacked: true
        }]
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

Leave a Reply

Your email address will not be published. Required fields are marked *