withBarValueLabel not displaying in correct positions in BarChart

[namakshenas]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/charts

What framework do you use?

Other, I will specify in the bug description

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Hi,

I'm trying to use the withBarValueLabel property of BarChart. The value labels are not placed correctly. Here is the snapshot of the issue:

Here is the working example in @mantine/charts:

<BarChart
          h={300}
          data={[
            { dmu: 'dmu1', 'Efficiency score': 100, Status: 'Efficient', color: '#32CD32' },
            { dmu: 'dmu2', 'Efficiency score': 78, Status: 'InEfficient', color: '#FFA500' },
            { dmu: 'dmu3', 'Efficiency score': 100, Status: 'Efficient', color: '#32CD32' },
            { dmu: 'dmu4', 'Efficiency score': 100, Status: 'Efficient', color: '#32CD32' },
            { dmu: 'dmu5', 'Efficiency score': 89, Status: 'InEfficient', color: '#FFA500' },
            { dmu: 'dmu6', 'Efficiency score': 95, Status: 'InEfficient', color: '#FFA500' },
          ]}
          withBarValueLabel
          orientation="vertical"
          gridAxis="y"
          barProps={{ radius: 5 }}
          dataKey="dmu"
          series={[{ name: 'Efficiency score' }]}
          tickLine="none"
/>

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• [ ] I would be willing to implement a fix for this issue

[fsd-niraj]

I'd like to work on this. Please assign if not picked up.

[rtivital]

You are welcome to submit a PR with a fix

[fsd-niraj]

Please let me know if this looks good? I'll quickly raise my PR.

[namakshenas]

Please let me know if this looks good? I'll quickly raise my PR.

Thanks. But they should be aligned right, where just after each bar ends in the right hand side.

[fsd-niraj]

How about this?

[namakshenas]

How about this?

Looks great. But consider another scenario: what if the user chooses the bar width to be thin. In that case, the values should be placed outside of the bar.

[fsd-niraj]

Hey, Let me know if this looks good to you.

[namakshenas]

Hey, Let me know if this looks good to you.

Well done! I think you can now suggest your PR.

[fsd-niraj]

PR: https://github.com/mantinedev/mantine/pull/7011

[fsd-niraj]

Hey, I saw that the test case failed, is it still mergeable? I don't see any other problem than linting and prettier.

[rtivital]

To merge the PR, all tests must pass. To continue working on your PR, add more commits to the same branch and push them. You can run tests locally with npm test command.

[fsd-niraj]

Hey @rtivital , heres my new PR, please check. https://github.com/mantinedev/mantine/pull/7042