CODEWITHSUNDEEP
chart.js
JaredOzzy
JaredOzzy

Reputation: 221

Chart.js with 2 y-axis

I am trying to get my simple chart to have the same y axis display on both sides, i can't seem to get this right without adding another graph.

is it possible to get it working with just 1 graph?

data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'My First dataset',
        data: [0, 10, 5, 2, 10, 15, 5],
        pointBorderWidth: 2,
        yAxisID: 'A'

    },{
        // This dataset appears on the second axis
        yAxisID: 'B',
    }]
},

// Configuration options go here
options: {
  scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
        id: 'B',
        position: 'right',
        gridLines: {
            zeroLineColor:'#131c2b'
        }   
    },{
        id: 'A',
        position: 'left',
        gridLines: {
            zeroLineColor:'#131c2b'
        }   
    },]
  }
}

Upvotes: 0

Views: 250

Answers (1)

HeadhunterKev
HeadhunterKev

Reputation: 1788

I got it working by updating the right yAxis min and max values. Right now it only gets updated at the beginning, so it's not responsive. You have to call updateOptions() everytime you change your chart (e.g. when you hide datasets)...

Here is my code (JSBin)

function updateOptions() {
  chart.options.scales.yAxes[1].ticks = {
    min: chart.scales.A.ticksAsNumbers[chart.scales.A.ticksAsNumbers.length-1],
    max: chart.scales.A.ticksAsNumbers[0]
  }
  chart.update()
}

Upvotes: 2

Related Questions