Come utilizzare due assi Y in Chart.js v2?

Question

Sto cercando di creare un grafico a linee con due set di dati, ciascuno con la propria scala Y/asse (uno a sinistra, uno a destra del grafico) utilizzando Chart.js.

Questo è il mio codice (jsfiddle):

var canvas = document.getElementById('chart'); 
new Chart(canvas, { 
    type: 'line', 
    data: { 
    labels: [ '1', '2', '3', '4', '5' ], 
    datasets: [ 
     { 
     label: 'A', 
     yAxesGroup: 'A', 
     data: [ 100, 96, 84, 76, 69 ] 
     }, 
     { 
     label: 'B', 
     yAxesGroup: 'B', 
     data: [ 1, 1, 1, 1, 0 ] 
     } 
    ] 
    }, 
    options: { 
    yAxes: [ 
     { 
     name: 'A', 
     type: 'linear', 
     position: 'left', 
     scalePositionLeft: true 
     }, 
     { 
     name: 'B', 
     type: 'linear', 
     position: 'right', 
     scalePositionLeft: false, 
     min: 0, 
     max: 1 
     } 
    ] 
    } 
}); 

Tuttavia, il secondo asse non è visibile e il secondo set di dati è ancora scalata esattamente come prima (da 0 a 100 invece di 0 a 1). Cosa devo cambiare?

Answer 1

Per ChartJs 2.x solo un paio di modifiche devono essere fatte (Sembra che si è tentato di combinare opzioni 2.x con le opzioni multi-assi dal mio forchetta?),

• Il yAxes campo deve essere in un oggetto scales
• il yAxis è referenziato da id non nome.
• Per gli step/le dimensioni della scala è sufficiente racchiudere queste opzioni in un oggetto ticks.
• Non c'è bisogno di scalePositionLeft questo è coperto da position

Esempio:

var canvas = document.getElementById('chart'); 
new Chart(canvas, { 
    type: 'line', 
    data: { 
    labels: ['1', '2', '3', '4', '5'], 
    datasets: [{ 
     label: 'A', 
     yAxisID: 'A', 
     data: [100, 96, 84, 76, 69] 
    }, { 
     label: 'B', 
     yAxisID: 'B', 
     data: [1, 1, 1, 1, 0] 
    }] 
    }, 
    options: { 
    scales: { 
     yAxes: [{ 
     id: 'A', 
     type: 'linear', 
     position: 'left', 
     }, { 
     id: 'B', 
     type: 'linear', 
     position: 'right', 
     ticks: { 
      max: 1, 
      min: 0 
     } 
     }] 
    } 
    } 
}); 

fiddle example