First grid cell is smaller than subsequent cells

[iliubinskii]

Expected behavior

First grid cell should be the same width as subsequent cells.

Current behavior

It is smaller than subsequent cells. See screenshot:

Reproducible sample

https://codesandbox.io/p/sandbox/react-chartjs-2-chart-js-issue-template-v4-forked-vrerpg

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

4.3.0

Browser name and version

No response

Link to your project

No response

[stockiNail]

@ilyub if think the dimensions of the grid could depend on the scale type and labels of it. Nevertheless going to the reproducible sample you provided, I don't see the behavior you described.

[iliubinskii]

[LeeLenaleee]

As @stockiNail answered, depending on your scale configuration the gaps between grid lines can differ but in your reproducible sample they are all the same distance, 30px

[iliubinskii]

LeeLenaleee, on your screenshot you have 1 bar per cell:

On my screenshot you can see multiple bars per cell:

Don't you see the difference between what I am showing and what you are showing? You can make browser window thinner until you see several bars per cell. Then you'll see what I see.

I hope it now clears up.

[stockiNail]

Thank you @ilyub because now I have understood better what you meant.

Have you tried to disable ticks auto skippng? I think this could address your need (using your code):

        options={{
          scales: {
            x: { ticks: {autoSkip: false}},
            y: {},
          },
        }}

[iliubinskii]

"autoSkip: false" is not an option when you have a lot of data:

[iliubinskii]

Possible solution would be to place cell border between bars (blue lines on screenshot), but I am unsure if it is actually better