Chartjs-Make non-zero value as mid-point for horizontal bar chart?

by

1👍

✅

As indicated in my comment above, adopting your workaround and using tick format you can transform tick values to their original values:

var origData = [1, 3, 7, 8, 10];
var origin = 5;
var chartData = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(0, 20, 250, 0.6)',
    borderColor: 'rgba(0, 20, 250, 0.9)',
    data: origData.map(function(value) { return value-origin; }),
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
      	color: 'red',
        type: 'category',
      }],
      xAxes: [{
        gridLines:{
          color: "black",
          borderDash: [5, 10],
          zeroLineColor:"red"
        },
        ticks: {
        	min: -5,
          max: 5,
          callback: function(value, index, values) {
            return value+origin;
          }
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>

Leave a comment