CODEWITHSUNDEEP
chart.js
ScottM
ScottM

Reputation: 187

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

In Chart.js 2.x, is there any way to do a horizontal bar chart so that the mid-point where bars go left or right is not zero?

I have data that is all 1-10 values, but I want to have the bars go left for values < 5 and right for values > 5

I've done a workaround by changing the values to -5 to 5, but then the x axis shows -5 to 5 and the tooltips show the 'converted' values... neither of which do I want.

Is what I want to do possible?

Thanks,

Scott

Upvotes: 0

Views: 817

Answers (1)

beaver
beaver

Reputation: 17647

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>

Upvotes: 1

Related Questions