0๐
โ
I have been able to resolve it.
In case someone needs help later, here is the code to auto create multi-yaxis line chart in chartjs
var colors = [
"#2E8B57",
"#f0ad4e",
"#DEB887",
"#A9A9A9",
"#FAEBD7",
"#DCDCDC",
"#E9967A",
"#F5DEB3",
"#9ACD32",
"#4272b7",
"#0078ff",
"#0003d2",
"#4272b7",
"#0065d0",
"#c0d6e4",
"#d001cf",
"#d2d0d1",
"#337465",
"#0a4168",
"#79e381",
"#cedee9",
"#149491",
"#e8bbc0",
"#cf3523",
"#e12241",
"#110055",
"#899ec1",
"#f2daf5",
"#6a6a92",
"#899ec1",
"#c7ecf4",
"#ffd78b",
"#595fed",
"#487de4",
"#5abbf1",
"#71d1d7",
"#a1e4d3",
"#554468",
"#db4264",
"#ef6389",
"#ff92b5",
"#fee398",
"#4e93aa",
"#dae6ea",
"#90b5c1",
"#468499",
"#330033",
"#d3ffce",
"#149491",
"#d2d0d1",
];
var axis = [
'A',
'B'
];
var axisID = 0;
this.liner = 0;
this.lineChartData = {}; //declare an object
this.lineChartData.labels = []; //add 'labels' element to object (X axis)
this.lineChartData.datasets = []; //add 'datasets' array element to object
for (let line = 0; line < 2; line++) {
this.liner = line + 1;
this.y = [];
this.lineChartData.datasets.push({}); //create a new line dataset
this.dataset = this.lineChartData.datasets[line];
// this.dataset.fillColor = "rgba(0,0,0,0)";
// this.dataset.strokeColor = "rgba(200,200,200,1)";
this.dataset.label = "Sensor" + this.liner;
this.dataset.fill = true;
this.dataset.lineTension = 0.5;
this.dataset.yAxisID = axis[axisID];
this.dataset.backgroundColor = "rgba(153,255,51,0.4)";
this.dataset.borderColor = colors[line];
this.dataset.pointHoverBackgroundColor = "rgba(153,255,51,0.4)";
this.dataset.pointHoverBorderColor = "rgba(59, 89, 152, 1)";
this.dataset.spanGaps = false;
this.dataset.data = []; //contains the 'Y; axis data
for (const item of this.data) {
this.y.push(item.data[this.liner]); //push some data aka generate 4 distinct separate lines
if (line === 0)
this.lineChartData.labels.push(item.date); //adds x axis labels
} //for x
this.lineChartData.datasets[line].data = this.y; //send new line data to dataset
if (axisID == 1) {
axisID = 0;
} else {
axisID++;
}
} //for line
// ctx = document.getElementById("Chart1").getContext("2d");
// myLineChart = new Chart(ctx).Line(lineChartData);
console.log(this.lineChartData);
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'line',
data: this.lineChartData,
options: {
responsive: false,
animation: {
duration: 0,
},
elements: {
line: {
borderWidth: 1,
},
point: {
radius: 5,
},
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: "Time",
},
}],
yAxes: [{
position: "left",
id: "A"
}, {
position: "right",
id: "B"
}],
},
},
});
Source:stackexchange.com