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

by

0👍

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>

Leave a comment