Chartjs-CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index

0👍

Yes, you can add ticks for xAxes, implement the callback and convert your resulting label to anything you want

var ctx = $("#graphTest").get(0).getContext("2d");
var MyScale = Chart.Scale.extend({

});

var options = {
  barShowStroke: false,
  scaleBeginAtZero: false,
  scaleOverride: true,
  scaleSteps: 20,
  scaleStepWidth: 2,
  scaleStartValue: -20,
  responsive: true,
  barBeginAtOrigin: true,
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {
                    callback: function(label, index, labels) {
                        return label < 0 ? label * -1 : label;
                    }
                },
      scaleLabel: {
        display: true,
        labelString: 'Nb Fail/Success'
      }
    }],
    yAxes: [{
      stacked: true
    }]
  }
};

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      data: [-65, 59, 80, -81, 56, 55, 40],
    },

    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      data: [10, -11, -98, 81, -34, -50, -20],
    }
  ]
};


var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: data,
  options: options
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>

Leave a comment