[charts] Improve default color contrast in dark mode

[alexfauquette]

I'm not sold on the color contrast in dark mode https://deploy-preview-13859--material-ui-x.netlify.app/x/react-charts/zoom-and-pan/#zooming-options, both series looks hard to separate.

Originally posted by @oliviertassinari in https://github.com/mui/mui-x/issues/13859#issuecomment-2234480917

I agree on this point, but to change default colors we should wait for v8

Search keywords:

[JCQuintas]

@alexfauquette we can change the colors on the docs though, without changing the default values on the Lib

[alexfauquette]

It would implies to have in each demo a prop colors={nextDefaultColors}

I'm not a big fan. Even if the colors are not perfect the demos should represent what the user will get

[JCQuintas]

Ah, nvm then, I thought we had a way to override the entire theme 😅

[alexfauquette]

We could support defaultProps on the container, and then update it. But how many users will spend their time wondering why their charts are not like the ones in the documentation 🙈

If I copy the code of a demo and want to see the same result. Not having to figure out they internally have a custom theme that modifies colors

[oliviertassinari]

I feel like the issue is with the palette itself, I struggle with the contrast of https://mui.com/x/react-charts/zoom-and-pan/#zooming-options in dark mode too.

To illustrate it, I feel like there are opportunities to make the make color feel more contrasting and still balances when shown next to each other. For example, on my Apple XHR screen. This makes the first 3 colors feel more balanced when on a pie charts, light and dark mode.

diff --git a/packages/x-charts/src/colorPalettes/colorPalettes.ts b/packages/x-charts/src/colorPalettes/colorPalettes.ts
index e22801d29..da65aacad 100644
--- a/packages/x-charts/src/colorPalettes/colorPalettes.ts
+++ b/packages/x-charts/src/colorPalettes/colorPalettes.ts
@@ -4,13 +4,13 @@ export type ChartsColorPalette = string[] | ChartsColorPaletteCallback;
 export const blueberryTwilightPaletteLight = [
   '#02B2AF',
-  '#2E96FF',
-  '#B800D8',
+  '#148AFF',
+  '#BF00E0',
   '#60009B',
   '#2731C8',
   '#03008D',
 ];
 export const blueberryTwilightPaletteDark = [
-  '#02B2AF',
+  '#5BD399',
   '#72CCFF',
   '#DA00FF',
   '#9001CB',

https://mui.com/x/react-charts/styling/#color-palette

I suspect we should leave it like this for now, and have a designer tweak all the values at once.

[flaviendelangle]

Ah, nvm then, I thought we had a way to override the entire theme

If we don't have a way to do it, it would be nice to add one, overriding the colors on all the charts in my app seems to be something I would like :+1:

[oliviertassinari]

From https://www.notion.so/mui-org/2024-React-Summit-Trip-report-2a247a488bac4c97995c81fa710df586?pvs=4#3282d07658bc460ca0a5de72b1f78de9

Using Highchart but it feels like the UI is outdated, it feels like it hasn't changed for a long time, it’s 10 years old. We had to customize it.

There could be some value in having design bandwidth focused on this, e.g. #9980

Benchmark

• Charts.js: One default color palette https://www.chartjs.org/docs/latest/general/colors.html#default-color-palette
• Recharts: No default color in the npm package, but one shared between the demos of the docs.
• Tremor: https://www.tremor.so/docs/visualizations/bar-chart are pretty much the color palette of Tailwind CSS
• Nivo: https://nivo.rocks/guides/colors/ a bunch of options, it's close to too many
• ApexCharts: https://apexcharts.com/docs/themes/ a bunch of options, it's close to too many

---

I suspect that the ideal would be to have in the long run:

• A few palettes, having 10 feels too many
• Then:
  1. (default) A palette that feels like Joy UI (name to be defined) colors (maybe even using the Joy UI colors directly), e.g. Radix color https://www.radix-ui.com/colors of @colmtuite
  2. A palette that feels like Material UI colors (maybe even using the Material UI colors directly)
  3. MUI X Charts color palettes optimized for specific chart use cases. High contrast, etc. Maybe exposed using both Joy UI colors and Material UI colors.

[alexfauquette]

We already have 3 palettes thanks to @noraleonte :)

I think "blueberry" is made for material, and "cheerfull-fiesta" is for joy 😉

https://mui.com/x/react-charts/styling/#color-palette

[noraleonte]

@alexfauquette Would it make sense to take another look at the color palettes now that we have more types of charts than we had when we first created them?