To enhance my chart, I am interested in adding multiple Y Axes based on the examples provided below: script 1 script 2
Although I attempted to modify the code as shown below, it seems to not be functioning properly.
function rdnum() {
return Math.floor(Math.random() * 100);
}
var config = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: []
},
options: {
scales: {
yAxes: []
}
}
}
var i = 0;
var x;
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, config);
addNewYAxe = function() {
x = Date.now();
let newDataset = {
label: 'test' + '_' + i,
data: [],
yAxisID: "left" + x,
fill: false
};
for (let index = 0; index < 6; ++index) {
newDataset.data.push(rdnum());
}
chart.data.datasets[i] = newDataset;
console.log(chart.data.datasets);
let y = {};
chart.options.scales.yAxes[i] = y;
let y2 = chart.options.scales.yAxes[i];
y2.display = true;
y2.type = "linear";
y2.id = "left" + x;
y2.position = "right";
i++;
console.log(chart.options.scales.yAxes);
chart.update();
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addNewYAxe()">add new Y axe</button>
<canvas id="chartJSContainer" width="600" height="400"></canvas>In order to dynamically insert specific data sets and Y axis using a button, where each click adds a new dataset and Y axis to the chart, I have tried merging two example codes together but encountered errors.