CODEWITHSUNDEEP
javascriptwebchart.js
Septimus
Septimus

Reputation: 25

Charts.js how to have 2 different size y-axis

So I have 2 datasets, and I would like to have one y-axis to be bigger and one smaller if you know what I mean. The Return Procent datas are somewhere between 20-100, but price can be small like 0.06 or something. And it makes the chart useless. How can I make two different size y-axis?

var ctx = document.getElementById('skinsChart').getContext('2d');
var skinsChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [ < ? php echo $date; ? > ],
    datasets: [{
      label: 'Return Procent',
      data: ["65.7", "63.7", "69.7", "62.7"],
      borderColor: 'rgb(0,0,0)',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,0.2)'
    }, {
      label: 'Price',
      data: ["0.07", "0.08", "0.06", "0.07"],
      borderColor: 'rgb(255,0,0)',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,0.2)'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        beginAtZero: false
      }]
    },
    elements: {
      point: {
        radius: 0
      }
    }
  }
});

Upvotes: 1

Views: 92

Answers (1)

uminder
uminder

Reputation: 26190

You need to define multiple y-axes as explained in chapter Create Multiple Axis from the Chart.js documentation.

Please take a look at your amended code and see how it works.

var ctx = document.getElementById('skinsChart').getContext('2d');
var skinsChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Return Procent',
      data: ["65.7", "63.7", "69.7", "62.7"],
      borderColor: 'rgb(0,0,0)',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,0.2)',
      yAxisID: 'yLeft'
    }, {
      label: 'Price',
      data: ["0.07", "0.08", "0.06", "0.07"],
      borderColor: 'rgb(255,0,0)',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,0.2)',
      yAxisID: 'yRight'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'yLeft',
      },
      {
        id: 'yRight',
        position: 'right',
      }]
    },
    elements: {
      point: {
        radius: 0
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="skinsChart" height="100"></canvas>

Upvotes: 1

Related Questions