javascriptreactjschartschart.js

Combining multiple datasets in chartjs

Currently I have 2 points in my line chart's dataset as seen in the screenshot. Now I want to add 4th dataset like in the screenshot, its the non-linear dataset.

But 4th non-linear dataset is a calculated dataset and it has around ~200-400 points.

But the thing is, first datasets (2 point datasets) are get cut-off because I have only 2 points. What I would like to achieve is, I want to spread 2 points dataset across the chart and have 2 ticks on x-axis which is first and end date.

here is example; https://stackblitz.com/edit/vitejs-vite-utbcv1?file=src%2FLineChart.tsx

this is currently an example;
enter image description here

and this is what I want to achieve (non-linear is the big dataset)
enter image description here

Solution

  • Your data doesn't have to be arrays of values, but can also be array of {x, y} pairs. In order to see the original labels (months), you can use a ticks callback.

    const ctx = document.getElementById('myChart').getContext('2d');

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

const demo = [20, 50, 22, 50, 65, 59, 80, 81, 56, 55, 20, 40]

const indexedData = demo.map((value, index) => ({
  x: index,
  y: value
}));

const data = {
  labels: labels,
  datasets: [{
      label: '2-point Series',
      data: [{
        x: 0,
        y: 50
      }, {
        x: demo.length - 1,
        y: 75
      }],
      borderColor: 'rgb(192, 18, 75)',
      tension: 0.4,
    },
    {
      label: '200-400 point Series',
      data: indexedData,
      borderColor: 'rgb(75, 192, 10)',
      tension: 0.4,
    }
  ]
};

new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'linear',
        ticks: {
          callback: function(value, index, values) {
            return labels[index];
          },
        }
      },
      y: {
        min: 0,
        beginAtZero: true,
        max: 100,
      }
    },
    plugins: {
      legend: {
        position: 'top',
      },
    }
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

<canvas id="myChart"></canvas>