[charts-premium] Stabilize candle stick charts (#22666)

alexfauquette · web-flow · commit 37ef74fce592 · 2026-06-10T12:12:22.000+02:00
diff --git a/docs/data/charts/candlestick/BasicCandlestick.js b/docs/data/charts/candlestick/BasicCandlestick.js
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/BasicCandlestick.tsx b/docs/data/charts/candlestick/BasicCandlestick.tsx
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/CandlestickComposition.js b/docs/data/charts/candlestick/CandlestickComposition.js
@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import useId from '@mui/utils/useId';
 import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 import { LinePlot } from '@mui/x-charts-premium/LineChart';
 import { BarPlot } from '@mui/x-charts-premium/BarChart';
 import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis';
diff --git a/docs/data/charts/candlestick/CandlestickComposition.tsx b/docs/data/charts/candlestick/CandlestickComposition.tsx
@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material/styles';
 import Stack from '@mui/material/Stack';
 import useId from '@mui/utils/useId';
 import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 import { LinePlot } from '@mui/x-charts-premium/LineChart';
 import { BarPlot } from '@mui/x-charts-premium/BarChart';
 import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis';
diff --git a/docs/data/charts/candlestick/CandlestickOverview.js b/docs/data/charts/candlestick/CandlestickOverview.js
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import useId from '@mui/utils/useId';
 import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 import { LinePlot } from '@mui/x-charts-premium/LineChart';
 import { BarPlot } from '@mui/x-charts-premium/BarChart';
 import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis';
diff --git a/docs/data/charts/candlestick/CandlestickOverview.tsx b/docs/data/charts/candlestick/CandlestickOverview.tsx
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import useId from '@mui/utils/useId';
 import { ChartsClipPath } from '@mui/x-charts-premium/ChartsClipPath';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 import { LinePlot } from '@mui/x-charts-premium/LineChart';
 import { BarPlot } from '@mui/x-charts-premium/BarChart';
 import { ChartsXAxis } from '@mui/x-charts-premium/ChartsXAxis';
diff --git a/docs/data/charts/candlestick/CandlestickValueFormatter.js b/docs/data/charts/candlestick/CandlestickValueFormatter.js
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/CandlestickValueFormatter.tsx b/docs/data/charts/candlestick/CandlestickValueFormatter.tsx
@@ -1,5 +1,5 @@
 import {
-  Unstable_CandlestickChart as CandlestickChart,
+  CandlestickChart as CandlestickChart,
   type CandlestickChartProps,
 } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
diff --git a/docs/data/charts/candlestick/ColorCandlestick.js b/docs/data/charts/candlestick/ColorCandlestick.js
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/ColorCandlestick.tsx b/docs/data/charts/candlestick/ColorCandlestick.tsx
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/CustomizedCandlestick.js b/docs/data/charts/candlestick/CustomizedCandlestick.js
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 
 import sp500 from '../dataset/sp500-intraday.json';
 
diff --git a/docs/data/charts/candlestick/CustomizedCandlestick.tsx b/docs/data/charts/candlestick/CustomizedCandlestick.tsx
@@ -1,5 +1,5 @@
 import {
-  Unstable_CandlestickChart as CandlestickChart,
+  CandlestickChart as CandlestickChart,
   type CandlestickChartProps,
 } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
diff --git a/docs/data/charts/candlestick/DatasetCandlestick.js b/docs/data/charts/candlestick/DatasetCandlestick.js
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 import GOOGL from '../dataset/GOOGL.json';
 
 const dataset = GOOGL.map((entry) => ({
diff --git a/docs/data/charts/candlestick/DatasetCandlestick.tsx b/docs/data/charts/candlestick/DatasetCandlestick.tsx
@@ -1,4 +1,4 @@
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 import GOOGL from '../dataset/GOOGL.json';
 
 const dataset = GOOGL.map((entry) => ({
diff --git a/docs/data/charts/candlestick/candlestick.md b/docs/data/charts/candlestick/candlestick.md
@@ -4,15 +4,10 @@ productId: x-charts
 components: CandlestickChart, CandlestickPlot
 ---
 
-# Charts - Candlestick [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan') 🧪
+# Charts - Candlestick [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
 
 <p class="description">A candlestick chart is used to visualize price movement over time.</p>
 
-:::error
-This feature is in preview.
-It is not yet ready for production use, and its API, visuals, and behavior may change in future minor or patch releases.
-:::
-
 ## Overview
 
 A candlestick chart provides a visual overview of how a price changes over time, commonly used in financial contexts like stock market analysis.
diff --git a/docs/data/charts/composition/Layering.js b/docs/data/charts/composition/Layering.js
@@ -9,7 +9,7 @@ import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
 import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
 import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 
 const ohlcData = [
   [100, 110, 95, 105],
diff --git a/docs/data/charts/composition/Layering.tsx b/docs/data/charts/composition/Layering.tsx
@@ -9,7 +9,7 @@ import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
 import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
 import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
 import { ChartsWebGLLayer } from '@mui/x-charts-premium/ChartsWebGLLayer';
-import { Unstable_CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickPlot as CandlestickPlot } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
 
 const ohlcData: OHLCValueType[] = [
diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.js b/docs/data/charts/zoom-and-pan/ZoomSliderPreview.js
@@ -8,7 +8,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
 import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
 import { BarChartPremium } from '@mui/x-charts-premium/BarChartPremium';
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 
 import {
   dateAxisFormatter,
diff --git a/docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx b/docs/data/charts/zoom-and-pan/ZoomSliderPreview.tsx
@@ -18,7 +18,7 @@ import {
   BarChartPremium,
   BarChartPremiumProps,
 } from '@mui/x-charts-premium/BarChartPremium';
-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
+import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';
 import { OHLCValueType } from '@mui/x-charts-premium/models';
 import {
   dateAxisFormatter,
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -700,7 +700,6 @@ const pages: MuiPage[] = [
           {
             pathname: '/x/react-charts/candlestick',
             plan: 'premium',
-            unstable: true,
           },
           {
             pathname: '/x/react-charts/radial-bars',
diff --git a/docs/pages/x/api/charts/candlestick-chart.json b/docs/pages/x/api/charts/candlestick-chart.json
@@ -240,6 +240,6 @@
   "muiName": "MuiCandlestickChart",
   "filename": "/packages/x-charts-premium/src/CandlestickChart/CandlestickChart.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/candlestick/\">Charts - Candlestick <a href=\"/x/introduction/licensing/#premium-plan\" title=\"Premium plan\"><span class=\"plan-premium\"></span></a> 🧪</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/candlestick/\">Charts - Candlestick <a href=\"/x/introduction/licensing/#premium-plan\" title=\"Premium plan\"><span class=\"plan-premium\"></span></a></a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/x/api/charts/candlestick-plot.json b/docs/pages/x/api/charts/candlestick-plot.json
@@ -9,6 +9,6 @@
   "muiName": "MuiCandlestickPlot",
   "filename": "/packages/x-charts-premium/src/CandlestickChart/CandlestickPlot.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/x/react-charts/candlestick/\">Charts - Candlestick <a href=\"/x/introduction/licensing/#premium-plan\" title=\"Premium plan\"><span class=\"plan-premium\"></span></a> 🧪</a></li></ul>",
+  "demos": "<ul><li><a href=\"/x/react-charts/candlestick/\">Charts - Candlestick <a href=\"/x/introduction/licensing/#premium-plan\" title=\"Premium plan\"><span class=\"plan-premium\"></span></a></a></li></ul>",
   "cssComponent": false
 }
diff --git a/packages/x-charts-premium/src/CandlestickChart/index.ts b/packages/x-charts-premium/src/CandlestickChart/index.ts
@@ -1,11 +1,24 @@
+import { CandlestickChart } from './CandlestickChart';
+import { CandlestickPlot } from './CandlestickPlot';
+
+/**
+ * @deprecated candlestick chart is now stable, import `ChartsCandlestickChart` instead
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Unstable_CandlestickChart = CandlestickChart;
+
+/**
+ * @deprecated candlestick plot is now stable, import `ChartsCandlestickPlot` instead
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Unstable_CandlestickPlot = CandlestickPlot;
+
 export {
-  CandlestickChart as Unstable_CandlestickChart,
+  CandlestickChart,
   type CandlestickChartProps,
   type CandlestickChartSlots,
   type CandlestickChartSlotProps,
   type OHLCSeries,
 } from './CandlestickChart';
-export {
-  CandlestickPlot as Unstable_CandlestickPlot,
-  type CandlestickPlotProps,
-} from './CandlestickPlot';
+
+export { CandlestickPlot, type CandlestickPlotProps } from './CandlestickPlot';
diff --git a/scripts/x-charts-premium.exports.json b/scripts/x-charts-premium.exports.json
@@ -87,9 +87,11 @@
   { "name": "bluePalette", "kind": "Variable" },
   { "name": "bluePaletteDark", "kind": "Variable" },
   { "name": "bluePaletteLight", "kind": "Variable" },
+  { "name": "CandlestickChart", "kind": "Variable" },
   { "name": "CandlestickChartProps", "kind": "Interface" },
   { "name": "CandlestickChartSlotProps", "kind": "Interface" },
   { "name": "CandlestickChartSlots", "kind": "Interface" },
+  { "name": "CandlestickPlot", "kind": "Function" },
   { "name": "CandlestickPlotProps", "kind": "Interface" },
   { "name": "CartesianChartSeriesType", "kind": "TypeAlias" },
   { "name": "CategoryAxis", "kind": "TypeAlias" },
@@ -702,7 +704,7 @@
   { "name": "ToolbarPropsOverrides", "kind": "Interface" },
   { "name": "TooltipPropsOverrides", "kind": "Interface" },
   { "name": "Unstable_CandlestickChart", "kind": "Variable" },
-  { "name": "Unstable_CandlestickPlot", "kind": "Function" },
+  { "name": "Unstable_CandlestickPlot", "kind": "Variable" },
   { "name": "Unstable_ChartsGeoDataProviderPremium", "kind": "Function" },
   { "name": "Unstable_ChartsRadialDataProvider", "kind": "Function" },
   { "name": "Unstable_ChartsRadialGrid", "kind": "Function" },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';`
	`1`	`+import { CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';`
`2`	`2`
`3`	`3`	`import sp500 from '../dataset/sp500-intraday.json';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Unstable_CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';`
	`1`	`+import { CandlestickChart as CandlestickChart } from '@mui/x-charts-premium/CandlestickChart';`
`2`	`2`	`import { OHLCValueType } from '@mui/x-charts-premium/models';`
`3`	`3`	`import sp500 from '../dataset/sp500-intraday.json';`
`4`	`4`