How to plot multiple value for one X-axis chart.js - chart.js

Question

I have implemented Charts JS library in one of my web apps and am having an issue. Right now i need to add multiple y values to one single x-axis point. however did not come to solution.
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
var config = {
type: 'line',
data: {
labels: [['01', '11' ,'2018'],
['01', '11' ,'2018'],
['01', '11' ,'2018'],
['01','11','2018'], '02','02','02','02','02','05','05','05','05','06','06','06','06','07','07','07','07','07','07','07','07','08','08','08','08','08','08','08','08','09','09','09','09',['20','02','2019'],['20','02','2019'],'21','21','21','21',['06','03'],['06','03'] ,'','','','' ,
],
datasets: [{
label: "My First dataset",
data: [35.48 ,35.50 ,35.5 ,35.49 ,35.49 ,35.50 ,35.50 ,35.49 ,35.45 ,35.38 ,35.42 ,35.4 ,35.49 ,35.50 ,35.49 ,35.49 ,35.49 ,35.49 ,35.50 ,35.50 ,35.48 ,35.47 ,35.48 ,35.47 ,35.49 ,35.50 ,35.50 ,35.49 ,35.48 ,35.47 ,35.48 ,35.47 ,35.50 ,35.49 ,35.49 ,35.50 ,37 ,37 ,38 ,39 ,40 ,51 ,28 ,29 ],
}]
},
options: {
scales: {
xAxes:[{
ticks: {
autoSkip: false,
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<canvas id="myChart"></canvas>

Answer 1

You can add multiple datasets which will plot a separate line on the graph.
Here is your example.
function newDate() {
return moment().add(days, 'd');
}
var config = {
type: 'line',
data: {
labels: [
["01", "11", "2018"],
['01', '11', '2018'],
['01', '11', '2018'],
['01', '11', '2018'], , '02', '02', '02', '02', '05', '05', '05', '05', '06', '06', '06', '06', '07', '07', '07', '07', '07', '07', '07', '07', '08', '08', '08', '08', '08', '08', '08', '08', '09', '09', '09', '09', ['20', '02', '2019'],
['20', '02', '2019'], '21', '21', '21', '21', ['06', '03'],
['06', '03'], '', '', '', '', '', '', '', '', '', '', '', '', '', ''
],
datasets: [{
label: "My First dataset",
data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29],
},
{
label: "My second dataset",
data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29].map(a => a + 20),
}
]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<canvas id="myChart"></canvas>