[charts-premium] Allow color customization in Candlestick chart by JCQuintas · Pull Request #21838 · mui/mui-x

JCQuintas · 2026-03-24T18:47:58Z

Summary

Add upColor and downColor properties to the candlestick series type for customizing candle body colors
Add a default candlestickPalette with green/red colors for bullish/bearish candles (with light/dark mode support)
Use the color processor in getColor.ts so tooltip, legend, and WebGL rendering share the same color logic
Simplify useCandlestickPlotData by reusing the color processor instead of duplicating color logic
Add ColorCandlestick demo with documentation

…color customization

…tomization - Add candlestickPalette with MUI success/error colors as defaults - Set default colorGetter in getSeriesWithDefaultValues using palette colors - Simplify getColor processor and useCandlestickPlotData to use colorGetter - Add ColorCandlestick and ColorGetterCandlestick demos

mui-bot · 2026-03-24T18:49:32Z

Deploy preview: https://deploy-preview-21838--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/candlestick/candlestick.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+26B^(+0.01%)	🔺+7B^(+0.01%)
@mui/x-charts-pro	🔺+26B^(+0.01%)	🔺+8B^(+0.01%)
@mui/x-charts-premium	🔺+245B^(+0.05%)	🔺+136B^(+0.09%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c17391a

codspeed-hq · 2026-03-24T19:13:34Z

Merging this PR will not alter performance

✅ 14 untouched benchmarks

_{Comparing JCQuintas:color-candlesticks (c17391a) with master (77be213)¹}

No successful run was found on master (e56abc3) during the generation of this report, so 77be213 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

alexfauquette · 2026-03-24T20:29:17Z


+### Color
+
+The `colors` prop accepts an array where the first value is used for bullish candles (close ≥ open) and the second for bearish candles (close < open).


Any specific reason to use an array instead of named properties for the colors?

The API from tradingview looks more friendly. Maybe with only upColor and downColor to start

https://tradingview.github.io/lightweight-charts/docs/api/interfaces/CandlestickStyleOptions

It used bullishColor/bearishColor previously, but it felt like parting away from the colors property.

Both work though, it was just preference.

/** * The color of the candle body when the close price is greater than or equal to the open price (bullish). * Falls back to the first color from the `colors` palette. */ bullishColor?: string; /** * The color of the candle body when the close price is less than the open price (bearish). * Falls back to the second color from the `colors` palette. */ bearishColor?: string;

It used bullishColor/bearishColor

Yes but in an internal only

Both work though, it was just preference.

Not exactly. The named colors can be refined. The array will be harder.

For now it works because we only have up and down. But with more customization, it will lead to poor DX.

Probably something like: The 2 first colors are for up and down, and the 2 seconds are up and down but only for the wick.

A new joiner on the project seeing this array of colors will have a WTF moment

By the way about naming, I prefer up/down to bullish/bearish. Every body get it without having to have some financial background

alexfauquette · 2026-03-25T10:39:39Z

+  const paletteColors = React.useMemo(() => {
+    if (!colors) {
+      return null;
+    }
+    return typeof colors === 'function' ? colors(theme.palette.mode) : colors;
+  }, [colors, theme.palette.mode]);


This will not work with composition.

Since we only have one candle stick series, what about having in series

colors: Colors | (mode: 'light'|'dark') => Colors with type Colors = { up: string; down: string; upWick?: string; downWick?: string }

With that, no need to document the colorGetter that looks over complicated compared to the potential use-cases

…ndlesticks

alexfauquette · 2026-03-30T14:43:02Z

+import { type ChartsColorPaletteCallback } from '@mui/x-charts/colorPalettes';
+
+export const candlestickPaletteLight = ['#2e7d32', '#d32f2f'];
+export const candlestickPaletteDark = ['#66bb6a', '#f44336'];
+
+export const candlestickPalette: ChartsColorPaletteCallback = (mode) =>
+  mode === 'dark' ? candlestickPaletteDark : candlestickPaletteLight;


knip would fail this file telling that palette light is the only one used

Suggested change

import { type ChartsColorPaletteCallback } from '@mui/x-charts/colorPalettes';

export const candlestickPaletteLight = ['#2e7d32', '#d32f2f'];

export const candlestickPaletteDark = ['#66bb6a', '#f44336'];

export const candlestickPalette: ChartsColorPaletteCallback = (mode) =>

mode === 'dark' ? candlestickPaletteDark : candlestickPaletteLight;

export const candlestickPaletteLight = ['#2e7d32', '#d32f2f'];

alexfauquette · 2026-03-30T14:44:09Z

  label?: string | ((location: 'tooltip' | 'legend') => string);
+  /**
+   * The color of the candle body when the close price is greater than or equal to the open price.
+   * @default Candlestick palette up color


Either we hardcode the color or pass allow upColor to be a callback

Suggested change

* @default Candlestick palette up color

* @default "#2e7d32"

alexfauquette · 2026-03-31T09:11:38Z

+    upColor: seriesData.upColor ?? colors[0],
+    downColor: seriesData.downColor ?? colors[1],


That's because you try to reuse the colors props from the notion of palette.

I was writing a long explanation about solution, but it's easier to add a commit :)
Feel free to remove it if it's causing issues or if you disagree with the proposed API

My proposal is to have upColor and downColor accept a callback, but after processing those color are only string

The issue with having a centralised place for theming is the composition:

You can't reuse colors because it will conflict with the color palette for other series

Creating a dedicated props in the DataProvider for a single type of series feels weird

…21838) Co-authored-by: alex <alex.fauquette@gmail.com>

JCQuintas added 3 commits March 24, 2026 14:39

[charts] Add ColorCandlestick component and update documentation for …

d4950d9

…color customization

use colors/collorgetter

496a7d0

JCQuintas requested a review from alexfauquette as a code owner March 24, 2026 18:47

JCQuintas self-assigned this Mar 24, 2026

JCQuintas changed the title ~~[charts] Allow color customization in Candlestick chart~~ [charts-premium] Allow color customization in Candlestick chart Mar 24, 2026

JCQuintas added plan: Premium Impact at least one Premium user. scope: charts Changes related to the charts. new feature labels Mar 24, 2026

fix intensity

a016568

JCQuintas added 2 commits March 24, 2026 16:22

export candlestick pallete

b8f802e

fixes

7abe3d1

JCQuintas added type: new feature Expand the scope of the product to solve a new problem. and removed new feature labels Mar 24, 2026

exports

6bbb3cc

alexfauquette reviewed Mar 24, 2026

View reviewed changes

Comment thread packages/x-charts-premium/src/colorPalettes/complementary/candlestick.ts Outdated

alexfauquette self-requested a review March 25, 2026 10:10

alexfauquette reviewed Mar 25, 2026

View reviewed changes

JCQuintas added 3 commits March 26, 2026 13:49

fix comments

8312958

remove colorgetter demo

4e56dad

remove useless comment

9f19b02

JCQuintas requested a review from alexfauquette March 26, 2026 16:59

JCQuintas added 3 commits March 30, 2026 09:37

scripts

94da944

Merge commit 'b4fd36441201a948d40303b3d90eea577f9f4036' into color-ca…

356226d

…ndlesticks

Merge branch 'master' into color-candlesticks

91b9e46

alexfauquette reviewed Mar 30, 2026

View reviewed changes

changes

fdc81a2

Merge branch 'master' into color-candlesticks

d5182c2

alexfauquette reviewed Mar 31, 2026

View reviewed changes

allow dark/light mode

21ca622

alexfauquette approved these changes Mar 31, 2026

View reviewed changes

alexfauquette and others added 4 commits March 31, 2026 11:50

fix TS issue

9a737ef

docs:typescript

f082c6c

Merge branch 'master' into color-candlesticks

208b314

fix

c17391a

JCQuintas merged commit 3b0de35 into mui:master Mar 31, 2026
22 checks passed

JCQuintas deleted the color-candlesticks branch March 31, 2026 15:37

arminmeh pushed a commit to arminmeh/mui-x that referenced this pull request Apr 29, 2026

[charts-premium] Allow color customization in Candlestick chart (mui#…

6a0ac41

…21838) Co-authored-by: alex <alex.fauquette@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[charts-premium] Allow color customization in Candlestick chart#21838

[charts-premium] Allow color customization in Candlestick chart#21838
JCQuintas merged 20 commits intomui:masterfrom
JCQuintas:color-candlesticks

JCQuintas commented Mar 24, 2026 •

edited

Loading

Uh oh!

mui-bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

codspeed-hq Bot commented Mar 24, 2026 •

edited

Loading

Uh oh!

alexfauquette Mar 24, 2026

Uh oh!

JCQuintas Mar 24, 2026

Uh oh!

alexfauquette Mar 25, 2026

Uh oh!

alexfauquette Mar 25, 2026

Uh oh!

Uh oh!

alexfauquette Mar 25, 2026 •

edited

Loading

Uh oh!

alexfauquette Mar 30, 2026

Uh oh!

alexfauquette Mar 30, 2026

Uh oh!

alexfauquette Mar 31, 2026 •

edited

Loading

Uh oh!

alexfauquette Mar 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		### Color

		The `colors` prop accepts an array where the first value is used for bullish candles (close ≥ open) and the second for bearish candles (close < open).

		upColor: seriesData.upColor ?? colors[0],
		downColor: seriesData.downColor ?? colors[1],

Uh oh!

Conversation

JCQuintas commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

mui-bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq Bot commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

alexfauquette Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

JCQuintas Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexfauquette Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JCQuintas commented Mar 24, 2026 •

edited

Loading

mui-bot commented Mar 24, 2026 •

edited

Loading

codspeed-hq Bot commented Mar 24, 2026 •

edited

Loading

alexfauquette Mar 25, 2026 •

edited

Loading

alexfauquette Mar 31, 2026 •

edited

Loading