How to plot multiple value for one X-axis 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>

Your question's title says multiple values for X Axis and description says that you want to add multiple values for Y axis. Please clarify. — Laxmikant Dange
I need to be shown according to the picture. @LaxmikantDange — mam

Laxmikant Dange Laxmikant Dange · Accepted Answer · 2019-04-01T11:54:31

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>

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

1 Answers