Chartjs-Chart.js – Is it possible to have two y axis with positive values one above the other?

by

0👍

✅

You cant stack 2 yaxes above eachoter by default without creating your own axes, what you can do is make all your values negative of in your case the purple dataset and then use the callbacks of the tooltip and axis to make all values appear positive like so:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        backgroundColor: 'red',
        borderColor: 'red'
      },
      {
        label: '# of Votes inversed',
        data: [-12, -19, -3, -5, -2, -3],
        borderWidth: 1,
        backgroundColor: 'blue',
        borderColor: 'blue'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (tooltipItem) => (`${tooltipItem.dataset.label}: ${Math.abs(tooltipItem.formattedValue)}`)
        }
      }
    },
    scales: {
      y: {
        ticks: {
          callback: (val) => (Math.abs(val))
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>

Leave a comment