How to create multiple x-axis datasets labels by using chart.js

Question

I'm using chart.js to draw line charts. and currently there is a need is to draw 3 different lines. they have same y-axis dataset, but the x-axis datasets are different. like:

y-axis datasets: [2,4,6,8,10]
x-axis1 datasets: [1,2,3,4,5]
x-axis2 datasets: [5,6,7,8,9]
x-axis3 datasets: [8,9,10,12,14]

I want the x-axis range is 1 to 14. and display them by each datasets real value.

however, I investigated and just found the way to use different x-axis labels by xAxisID, but in this way, the x-axis2 and x-axis3 are still using 1,2,3,4,5 as x-axis dataset.

Does anyone know how can I achieve this?

user_2358409 · Answer

This can be done by defining datasets.data as an array of objects having an x and y property each.

data: [
  { 'x': 1, 'y': 2 },
  { 'x': 2, 'y': 4 },
  { 'x': 3, 'y': 6 },
  { 'x': 4, 'y': 8 },
  { 'x': 5, 'y': 10 }
]

You can use Array.map() to easily convert your data. Please take a look at below runnable code and see how it works.

const y = [2, 4, 6, 8, 10];
const x1 = [1, 2, 3, 4, 5];
const x2 = [5, 6, 7, 8, 9];
const x3 = [8, 9, 10, 12, 14];

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'A',
      data: y.map((v, i) => ({ x: x1[i], y: v })),
      borderColor: 'rgb(255, 0, 0)',
      backgroundColor: 'rgba(255, 0, 0, 0.2)'
    },
    {
      label: 'B',
      data: y.map((v, i) => ({ x: x2[i], y: v })),
      borderColor: 'rgb(0, 255, 0)',
      backgroundColor: 'rgba(0, 255, 0, 0.2)'
    },
    {
      label: 'C',
      data: y.map((v, i) => ({ x: x3[i], y: v })),
      borderColor: 'rgb(0, 0, 255)',
      backgroundColor: 'rgba(0, 0, 255, 0.2)'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'linear',
        suggestedMin: 1,
        suggestedMax: 14,
        ticks: {
          stepSize: 1
        }
      },
      y: {
        beginAtZero: true
      }
    }
  },
});

How to create multiple x-axis datasets labels by using chart.js

1 Answers