[Chartjs]-Lift the bar up from the bottom in bar type chart

by

1👍

✅

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>

1👍

If you need a fixed offset then @WhiteHat’s answer is probably easiest. If you need to set the bottom per bar then you should look at changing to a Box & Whisker type chart with this chart.js plugin.

Turn the borders off to hide the whiskers. Set your data as [[startValue, startValue, endValue, endValue], …]

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'boxplot',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: '# of Votes',
          data: [
            [1, 1, 12, 12],
            [2, 2, 8, 8],
            [3, 3, 10, 10]
          ],
          backgroundColor: 'orange',
          borderColor: 'transparent',
          borderWidth: 0
        }]
      },
      options: {
        legend: {
          display: false
        },
        tooltips: {
          enabled: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://unpkg.com/chartjs-chart-box-and-violin-plot@2.1.0/build/Chart.BoxPlot.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment