Time X axis week rendering wrong on bar charts, correct on line charts with same data

[violuke]

Expected behavior

I'd expect the bar on a bar chart to be in the same place as the dot on a line chart for the same dataset and axis config. In my example below, the bar chart has bars showing in the wrong month., for example, the below screenshot shows a March figure plotted in April.

Current behavior

They're not in the same place.

Reproducible sample

https://jsfiddle.net/fje5wrav/3/

Optional extra steps/info to reproduce

This should explain the issue I think, but please let me know if not.

Also, interestingly, I noticed that re-using the chart_options object in both charts makes them both wrong! See this block and try the other option.

var chart_options2 = Object.assign({}, chart_options);
// todo: Try commenting the line above and using the below instead, I give the wrong result too in that case!
//var chart_options2 = chart_options;

Possible solution

No response

Context

No response

chart.js version

v3.7.1

Browser name and version

Firefox (Dev edition v99) and Chrome

Link to your project

No response

[kurkle]

In bar charts, the scale and grid are offset by default. Using same offset settings for both chart types gives same results: https://jsfiddle.net/zb0rfgdq/1/

[violuke]

Thanks, I can confirm this did the trick in our live use-case too 👍

[filipecarneiro]

That didn't work in this example (Chart.js v4.4.3). Any suggestion?

  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'month'
        },
        offset: true,
        grid: {
           offset: false
        }
      },
      y: {
        type: "linear",
        position: "left",
        beginAtZero: true
      }
    }
  }

Dates are all "end of month". It works well if changed to day 1...

  type: 'bar',
  data: {
    datasets: [{
        data: [
                {
          "x": "2024-01-31",
          "y": 6304.32
        },
        {
          "x": "2024-02-28",
          "y": 2292.48
        },
        {
          "x": "2024-03-31",
          "y": 6877.44
        }]
      }
    ]
  },

JSFiddle code example