Cómo usar dos ejes Y en el gráfico.js v2?

Question

Cómo usar dos ejes Y en el gráfico.js v2?

Estoy tratando de crear un gráfico de líneas con dos conjuntos de datos, cada uno con su propia escala / eje Y (uno a la izquierda, uno a la derecha del gráfico) utilizando Chart.js.

Este es mi código (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
      }
    ]
  }
});

Sin embargo, el segundo eje no es visible y el segundo conjunto de datos todavía se escala exactamente como el primero (0 a 100 en lugar de 0 a 1). ¿Qué necesito cambiar?

28

javascript browser graph chart.js

Author: just.me, 2016-06-28

Source

1 answers

score 79 · Accepted Answer

Para ChartJs 2.x solo se necesitan hacer un par de cambios (parece que has intentado combinar 2.x opciones con las opciones multi-ejes de mi horquilla?),

El campo yAxes debe estar en un objeto scales
el yAxis es referenciado por id no name.
Para los pasos de escala/tamaño solo necesita envolver estas opciones en un objeto ticks.
No hay necesidad de {[4] } esto está cubierto por position

Ejemplo:

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
        }
      }]
    }
  }
});

Ejemplo de violín