Chart.js - mixed chart types (line/bar) on time scale causing offset problems after migration to v3

Question

I'm using chart.js in my project where I'm having a daily-ticked time scale on the X axis and two linear scales on the Y axis. On one linear scale I'm rendering an usual line chart representing a chronological trend while rendering multiple stacked bar charts on the other linear scale, representing average stats for each day. Pre-v3 versions of chart.js were dictating to use a general chart type bar for this to work, and in my case it did even on a time scale. Only workaround I had to use to was to set the bar chart data to 12:00pm to have it centered on the day while also setting the barThickness manually, as it will default to 0 (?) on a time scale otherwise.

Now I've recently updated to v3.2.0 and adjusted my options and datasets according to the migration documentation. Rendering the charts I noticed that the scale ticks were offset by half a day, thus both charts being off. After some research I found out that it was due to the offset option for the scale being enabled as I was using a bar chart.

Manually turning off the offset option is to no avail either though. Besides the time scale not using up another day anymore, the ticks are still off by half a day.

Cutting out the bar chart dataset resets the ticks back to normal. Unfortunately there doesn't seem to be a way to apply the offset only to the bar charts. Does anyone have an idea how to deal with this?

I have now created a Codepen example for this.

    scales: {
        x: { // time scale 
            type: 'time',
            offset: false,
            time: {
                unit: 'day',
                displayFormats: {
                    day: 'iii, dd.MM'
                }
            },
            bounds: 'ticks',
            grid: {
                color: "#444",
                zeroLineColor: "#888",
                zeroLineWidth: 2
            },
            title: {
                display: true,
                text: 'Date'
            }
        },
        yT: { // line chart scale
            position: 'right',
            beginAtZero: false,
            grid: {
                color: "#444",
                zeroLineColor: "#888",
                zeroLineWidth: 2
            },
            ticks: {
                maxTicksLimit: 24,
                stepSize: 9000,
                callback: (duration) => String(duration / 3600) + 'h'
            }
        },
        yR: { // bar chart scale
            position: 'right',
            beginAtZero: false,
            grid: {
                color: "#444",
                zeroLineColor: "#888",
                zeroLineWidth: 2
            },
            ticks: {
                maxTicksLimit: 48,
                stepSize: 10800,
                callback: (duration) => String(duration / 3600) + 'h'
            },
            title: {
                display: true,
                text: 'Duration'
            },
            stacked: true
        }
    }

Answer 1

I opened an issue on GitHub where I was told that I also had to explicitly set the grid.offset option to false, and this fixed it for me.