Equal distance grouped bar chart irrespective of scale - chart.js

Question

I have a requirement that need to show up data in bar graph using chart.js like below, enter image description here

Here, irrespective of x-axis date, the bars should be aligned in equal distance and the date format is same as in the image.

let chartStatus = Chart.getChart(this.WEIGHTS_CHART);
if (chartStatus != undefined) {
  chartStatus!.destroy();
}

const weightsChart = new Chart(this.WEIGHTS_CHART, {
  type: 'bar',
  data: {
    labels: this.objWeights.map(x => x.date),
    datasets: [
      {
        label: "Weight",
        backgroundColor: "#0072bc",
        data: this.objWeights.map(x => x.weightValue)
      },
      {
        label: "BMI",
        backgroundColor: "#84b5e4",
        data: this.objWeights.map(x => x.bmi)
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'MMM DD, YYYY'
          }
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});
}

with the above code, I'm getting output like this enter image description here . Can someone help me

I want like this (https://i.stack.imgur.com/5Aiwj.png)

but with above code, I'm getting like this (https://i.stack.imgur.com/GkMGO.png)

score 0 · Answer 1 · answered Mar 30 '22 at 05:38

Make your x-axis of type: 'timeseries' instead of type: 'time'.

Time Series Axis: The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.

scales: {
  x: {
    type: 'timeseries',
    time: {
      ...

Equal distance grouped bar chart irrespective of scale - chart.js

1 Answers1