CODEWITHSUNDEEP
chart.js
Meradin
Meradin

Reputation: 51

ChartJS:align zeros on chart with multi axes

How to align zeros on chart with multi axes, if there are both positive and negative values in dataset?

I want zeroes to be on the same line.

I dont like this: Graph image

link to jsfiddle

new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [-10, 96, 84, 76, 69]
    }, {
      label: 'B',
      yAxisID: 'B',
      data: [-2, 3, 5, 2, 3]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',

      }]
    }
  }
});

actualy, The example on the official web page has the same problem. Looks so messy.

Upvotes: 5

Views: 5223

Answers (2)

Richard Wheeldon
Richard Wheeldon

Reputation: 1106

The answer above is great if you know the ranges in advance and can specify min and max for each ticks object in advance. If, like me, you're trying to produce the effect with generated data, you'll need something that computes these values for you. The following does this without recourse to hard-coded values. It does generate ugly max / min values - but there's another fix for that: Hide min and max values from y Axis in Chart.js. It may also generate less than ideal spacing in which case a simple fudge factor applied to the min and max values may be used.

function scaleDataAxesToUnifyZeroes (datasets, options) {
  let axes = options.scales.yAxes
  // Determine overall max/min values for each dataset
  datasets.forEach(function (line) {
    let axis = line.yAxisID ? axes.filter(ax => ax.id === line.yAxisID)[0] : axes[0]
    axis.min_value = Math.min(...line.data, axis.min_value || 0)
    axis.max_value = Math.max(...line.data, axis.max_value || 0)
  })
  // Which gives the overall range of each axis
  axes.forEach(axis => {
    axis.range = axis.max_value - axis.min_value
    // Express the min / max values as a fraction of the overall range
    axis.min_ratio = axis.min_value / axis.range
    axis.max_ratio = axis.max_value / axis.range
  })
  // Find the largest of these ratios
  let largest = axes.reduce((a, b) => ({
    min_ratio: Math.min(a.min_ratio, b.min_ratio),
    max_ratio: Math.max(a.max_ratio, b.max_ratio)
  }))
  // Then scale each axis accordingly
  axes.forEach(axis => {
    axis.ticks = axis.ticks || { }
    axis.ticks.min = largest.min_ratio * axis.range
    axis.ticks.max = largest.max_ratio * axis.range
  })
}

Upvotes: 6

Jeff
Jeff

Reputation: 1062

You can do this by setting the ticks option on your axes to control the max, min, and stepSize. To make the zeros align, you need to make the axes symmetric. stepSize is optional if you want the gridlines to be aligned as well.

In your example:

yAxes: [{
    id: 'A',
    type: 'linear',
    position: 'left',
    ticks : {
        max: 100,
        min: -50,
        stepSize: 50
    }
  }, {
    id: 'B',
    type: 'linear',
    position: 'right',
    ticks : {
        max: 6,
        min: -3,
        stepSize: 3 
    }
  }]

See updated fiddle: https://jsfiddle.net/x885kpe1/1/

Upvotes: 2

Related Questions