如何在chart.js中获得多个y轴？

Question

I have tried the following to display two y axis on one line chart. However, the charts don't seem to appear once I implement this.

var options = {
                type: "line",
                data: {
                    labels: timelist,
                    datasets: [
                        {label: "Ambient Temp", data: temp_amb_data, backgroundColor: "rgba(75, 192, 192, 0.2)", borderWidth: 1, borderColor: "rgba(75, 192, 192, 1)",id='left-y-axis'},
                        {label: "Ambient Humidity", data:amb_hum_data, backgroundColor: "rgba(255, 99, 132, 0.2)", borderWidth: 1, borderColor: "rgba(255, 99, 132, 1)",id='right-y-axis'},
                        {label: "Booth Temp", data: temp_col, backgroundColor: "rgba(153, 102, 255, 0.2)", borderWidth: 1, borderColor: "rgba(153, 102, 255, 1)",id='left-y-axis'},
                        {label: "Booth Humidity", data: hum_data, backgroundColor: "rgba(255, 159, 64, 0.2)", borderWidth: 1, borderColor: "rgba(255, 159, 64, 1)",id='right-y-axis'}
                    ]
                },
                options: {
                    legend:{position:'right'},
                    animation: {tension: {duration: 1000, easing: "linear", from: 1, to: 0, loop: true}},
                    scales: {yAxes:[{ id:'left-y-axis',type='linear',position:'left'},{id:'right-y-axis',type='linear',position:'right'}]}
                }
            };

            var ctx = document.getElementById("myChart").getContext("2d");
            var chart = new Chart(ctx, options);

Where am I going wrong?

Answer 1

The issues I see on your snippet are:

1. You are missing a few settings on your Chart.js configuration.
2. The provided JSON is not valid.
3. Additionally, it is not easy to reproduce the error. Try providing a Codepen example.

I have created this Codepen snippet with a Chart and two Y axes: https://codepen.io/adelriosantiago/pen/wvGxeGB

See the second Y axis inside options.scales.yAxes . Can you try it with your dataset data and see if it fits your needs? If it doesn't please fork the Codepen and provide the link.

In the second CodePen you provided the only issue found is the invalid Chart.JS configuration. Specifically the key yAxisId which should be yAxisID . Small but important difference. The fixed Codepen is here: https://codepen.io/adelriosantiago/pen/MWyqWdr (I added a negative value on the second axis to easily differentiate min and max )