Tengo dos ejes y en mi gráfico de dispersión de charts.js, y todos mis datos se muestran correctamente.

Sin embargo, mientras se muestra la etiqueta del primer eje y, no se muestra la etiqueta del segundo eje y.

Aquí está mi código:

window.laChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: allDatasets
    },
    options: {
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: X_AXIS_LABEL
                },
                ticks: {
                min: 0,
                max: 18,
                stepSize: 1,

                // Format the x-axis values
                callback: function(value, index, values) {
                    return value;// + ".000";
                }

                },
                gridLines: {
                    display: false
                }
            }],
            yAxes: [
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100
                },
                position: "left",
                id: "y-axis-1",
                type: "linear"
            },
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    suggestedMax: 10
                },
                position: "right",
                id: "y-axis-2",
                type: "linear"
            },
            {
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
                    callback: function(value, index) {
                    if (index === 1) { // This is the middle tick.
                        return Y1_AXIS_LABEL;
                    }
                    else {
                        return '';
                    }
                }
            }
        }]
    }
}

Y aquí hay una captura de pantalla en la que falta la segunda etiqueta del eje y:

enter image description here

¿Cómo hago que aparezca la etiqueta del segundo eje y?

SOLUCIÓN

La respuesta de LeeLenalee funcionó, pero me dejó con labelString rotados. Adapté su respuesta para resolver este problema con este código final:

yAxes: [
    {
    ticks: {
        beginAtZero: true,
        min: 0,
        max: 100
    },
    scaleLabel: {
        display: false,
        labelString: Y1_AXIS_LABEL
    },
    position: "left",
    id: "y-axis-1",
    type: "linear"
    },
    {
    ticks: {
        beginAtZero: true,
        min: 0
    },
    scaleLabel: {
        display: false,
        labelString: Y2_AXIS_LABEL
    },
    position: "right",
    id: "y-axis-2",
    type: "linear"
    },
    // Change the orientation of the first y-axis label.
    {
    gridLines: {
        display: false
    },
    ticks: {
        maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
        callback: function(value, index) {
        if (index === 1) { // This is the middle tick.
            return Y1_AXIS_LABEL;
        }
        else {
            return '';
        }
        }
    },
    position: "left"
    },
    // Change the orientation of the second y-axis label.
    {
    gridLines: {
        display: false
    },
    ticks: {
        maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
        callback: function(value, index) {
        if (index === 1) { // This is the middle tick.
            return Y2_AXIS_LABEL;
        }
        else {
            return '';
        }
        }
    },
    position: "right"
    }
]

Captura de pantalla final:

Final screenshot

0
ban-geoengineering 20 ene. 2021 a las 16:13

1 respuesta

La mejor respuesta

Lo que hizo fue implementar una nueva báscula como reemplazo de la etiqueta de la báscula, esta no es la forma en que debe hacerlo porque la báscula solo estará a la izquierda. Tienes que usar la etiqueta de escala como lo hiciste con el eje X para ambos ejes y de esta manera:

 yAxes: [
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100
                },
                scaleLabel: {
                    display: true,
                    labelString: Y1_AXIS_LABEL
                },
                position: "left",
                id: "y-axis-1",
                type: "linear"
            },
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    suggestedMax: 10
                },
                scaleLabel: {
                    display: true,
                    labelString: Y2_AXIS_LABEL
                },
                position: "right",
                id: "y-axis-2",
                type: "linear"
            }]
1
ban-geoengineering 21 ene. 2021 a las 22:07