Chartjs-Chart.js – Multiple JSON data object array [{x: Date, y: count}….] representing each dataset of the chart

by

2👍

✅

This behaviour is happening because chart.js automatically adds the labels if they are not there and doesnt care about ordering, you have 2 ways of fixing it, providing a labels array with all the labels in correct order already:

var ctx = document.getElementById("myChart").getContext("2d");

const colors = {
  green: {
    fill: 'rgb(0,128,0,0.2)',
    stroke: 'green',
  },
  grey: {
    fill: 'rgb(128,128,128, 0.2)',
    stroke: 'grey',
  },
  red: {
    fill: 'rgba(255, 0, 0, 0.2)',
    stroke: 'red',
  }
};

const data1 = [{
    x: "2030-08-03",
    y: 8
  },
  {
    x: "2030-08-04",
    y: 1
  },
  {
    x: "2030-08-08",
    y: 2
  },
  {
    x: "2030-08-09",
    y: 10
  },
  {
    x: "2030-08-10",
    y: 2
  },
  {
    x: "2030-08-12",
    y: 34
  }
];
const data2 = [{
    x: "2030-08-09",
    y: 1
  },
  {
    x: "2030-08-12",
    y: 12
  },
  {
    x: "2030-08-13",
    y: 3
  },
  {
    x: "2030-08-15",
    y: 3
  }
];
const data3 = [{
    x: "2030-08-06",
    y: 1
  },
  {
    x: "2030-08-09",
    y: 12
  },
  {
    x: "2030-08-10",
    y: 3
  },
  {
    x: "2030-08-12",
    y: 3
  },
];


const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["2030-08-03", "2030-08-04", "2030-08-06", "2030-08-08", "2030-08-09", "2030-08-10", "2030-08-12", "2030-08-13", "2030-08-15"],
    datasets: [{
        label: "Data1",
        fill: true,
        backgroundColor: colors.green.fill,
        pointBackgroundColor: colors.green.stroke,
        borderColor: colors.green.stroke,
        pointHighlightStroke: colors.green.stroke,
        borderCapStyle: 'butt',
        data: data1,
      },
      {
        label: "Data2",
        fill: true,
        backgroundColor: colors.grey.fill,
        pointBackgroundColor: colors.grey.stroke,
        borderColor: colors.grey.stroke,
        pointHighlightStroke: colors.grey.stroke,
        data: data2,
      },
      {
        label: "Data3",
        fill: true,
        backgroundColor: colors.red.fill,
        pointBackgroundColor: colors.red.stroke,
        borderColor: colors.red.stroke,
        pointHighlightStroke: colors.red.stroke,
        data: data3,
      }
    ]
  },
  options: {
    plugins: {
      responsive: true,
      legend: {
        display: true,
        position: 'bottom',
      },
      title: {
        display: true,
        text: 'Status',
        padding: {
          top: 20,
          bottom: 15
        },
        font: {
          weight: "bold",
          size: 25
        }
      }
    },
    layout: {
      padding: {
        left: 20,
        right: 0,
        top: 0,
        bottom: 25
      }
    },
    scales: {
      x: {
        ticks: {
          align: "center"
        }
      },
      y: {
        stacked: true,
        title: {
          display: true,
          text: "Count",
          font: {
            weight: "bold",
            size: 20
          }
        }
      },
    },
    parsing: {
      xAxisKey: 'x',
      yAxisKey: 'y'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>

Codepen: https://codepen.io/leelenaleee/pen/gOWNXKm?editors=1010

Or you can use a time axis:

var ctx = document.getElementById("myChart").getContext("2d");

const colors = {
  green: {
    fill: 'rgb(0,128,0,0.2)',
    stroke: 'green',
  },
  grey: {
    fill: 'rgb(128,128,128, 0.2)',
    stroke: 'grey',
  },
  red: {
    fill: 'rgba(255, 0, 0, 0.2)',
    stroke: 'red',
  }
};

const data1 = [{
    x: "2030-08-03",
    y: 8
  },
  {
    x: "2030-08-04",
    y: 1
  },
  {
    x: "2030-08-08",
    y: 2
  },
  {
    x: "2030-08-09",
    y: 10
  },
  {
    x: "2030-08-10",
    y: 2
  },
  {
    x: "2030-08-12",
    y: 34
  }
];
const data2 = [{
    x: "2030-08-09",
    y: 1
  },
  {
    x: "2030-08-12",
    y: 12
  },
  {
    x: "2030-08-13",
    y: 3
  },
  {
    x: "2030-08-15",
    y: 3
  }
];
const data3 = [{
    x: "2030-08-06",
    y: 1
  },
  {
    x: "2030-08-09",
    y: 12
  },
  {
    x: "2030-08-10",
    y: 3
  },
  {
    x: "2030-08-12",
    y: 3
  },
];


const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        label: "Data1",
        fill: true,
        backgroundColor: colors.green.fill,
        pointBackgroundColor: colors.green.stroke,
        borderColor: colors.green.stroke,
        pointHighlightStroke: colors.green.stroke,
        borderCapStyle: 'butt',
        data: data1,
      },
      {
        label: "Data2",
        fill: true,
        backgroundColor: colors.grey.fill,
        pointBackgroundColor: colors.grey.stroke,
        borderColor: colors.grey.stroke,
        pointHighlightStroke: colors.grey.stroke,
        data: data2,
      },
      {
        label: "Data3",
        fill: true,
        backgroundColor: colors.red.fill,
        pointBackgroundColor: colors.red.stroke,
        borderColor: colors.red.stroke,
        pointHighlightStroke: colors.red.stroke,
        data: data3,
      }
    ]
  },
  options: {
    plugins: {
      responsive: true,
      legend: {
        display: true,
        position: 'bottom',
      },
      title: {
        display: true,
        text: 'Status',
        padding: {
          top: 20,
          bottom: 15
        },
        font: {
          weight: "bold",
          size: 25
        }
      }
    },
    layout: {
      padding: {
        left: 20,
        right: 0,
        top: 0,
        bottom: 25
      }
    },
    scales: {
      x: {
        type: 'time',
        ticks: {
          align: "center"
        }
      },
      y: {
        stacked: true,
        title: {
          display: true,
          text: "Count",
          font: {
            weight: "bold",
            size: 20
          }
        }
      },
    },
    parsing: {
      xAxisKey: 'x',
      yAxisKey: 'y'
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>

Codepen: https://codepen.io/leelenaleee/pen/GRmbOxN?editors=1010

Leave a comment