javascript - datasets - line color chart js

¿Cómo usar dos ejes Y en Chart.js v2?

Question

Intento crear un gráfico de líneas con dos conjuntos de datos, cada uno con su propia escala Y / eje (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 sigue escalado exactamente igual que el primero (de 0 a 100 en lugar de 0 a 1). ¿Qué necesito cambiar?

Answer 1

Para ChartJs 2.x, solo es necesario realizar un par de cambios (parece que ha intentado combinar las opciones 2.x con las opciones de ejes múltiples de mi fork),

• El campo yAxes debe estar en un objeto de scales
• el eje y no se hace referencia a yAxis.
• Para los pasos / tamaño de escala, solo necesita ajustar estas opciones en un objeto ticks .
• No necesita scalePositionLeft 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