Mantine LineChart Breaks with Custom Colors in Theme

[sam-cuboh]

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.12.2

What package has an issue?

@mantine/charts

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

Using the Mantine LineChart breaks when you are using custom colors (a theme with the MantineProvider). In the code sandbox below, the chart renders when the theme is removed. However it also renders fine with the theme when using a mantine BarChart. So it seems like there is a bug where the LineChart isn't able to read in the theme colors/variables properly.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-cmyfvt

Possible fix

No response

Self-service

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

[Kenzo-Wada]

I was unable to run the sandbox environment you provided, can you please fix it?

[sam-cuboh]

I was unable to run the sandbox environment you provided, can you please fix it?

hi! that is the problem i'm facing. if you remove the theme, from the mantine provider it will work. Also if you switch the chart from a line chart to a bar chart it will also work. I have removed the "theme" now for you though

[Kenzo-Wada]

@sam-cuboh

I see, I understand completely!

I also figured out the cause of the bug: each of the theme's colors must be passed an array of 10 values!

eg.) from your code,

const theme = createTheme({
    // Color overrides
    colors: {
      blue: [
        colors.blue.x1,
        colors.blue.x1,
        colors.blue.x2,
        colors.blue.x3,
        colors.blue.x4,
        colors.blue.x5,
        colors.blue.x6,
        colors.blue.x7,
        colors.blue.x8,
        colors.blue.x9,
        colors.blue.x10,
      ],

[sam-cuboh]

@Kenzo-Wada ahh okay i will add other values thank you! But I am curious/confused why it would work for the BarChart with missing values.