@mui/x-charts-premium 9.0.1 → 9.0.3

package/CandlestickChart/CandlestickChart.js

@@ -437,6 +437,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -511,6 +512,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -572,6 +574,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -634,6 +637,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -695,6 +699,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -756,6 +761,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -821,6 +827,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -886,6 +893,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -947,6 +955,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
       maxEnd: _propTypes.default.number,
@@ -1027,6 +1036,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1100,6 +1110,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1160,6 +1171,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1221,6 +1233,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1281,6 +1294,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1341,6 +1355,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1405,6 +1420,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1469,6 +1485,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),
@@ -1529,6 +1546,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
+    valueGetter: _propTypes.default.func,
     width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     zoom: _propTypes.default.oneOfType([_propTypes.default.shape({
       filterMode: _propTypes.default.oneOf(['discard', 'keep']),

package/CandlestickChart/CandlestickChart.mjs

@@ -429,6 +429,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -503,6 +504,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -564,6 +566,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -626,6 +629,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -687,6 +691,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -748,6 +753,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -813,6 +819,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -878,6 +885,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -939,6 +947,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
@@ -1019,6 +1028,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1092,6 +1102,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1152,6 +1163,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1213,6 +1225,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1273,6 +1286,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1333,6 +1347,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1397,6 +1412,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1461,6 +1477,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),
@@ -1521,6 +1538,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
+    valueGetter: PropTypes.func,
     width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     zoom: PropTypes.oneOfType([PropTypes.shape({
       filterMode: PropTypes.oneOf(['discard', 'keep']),

package/CandlestickChart/CandlestickPlot.js

@@ -11,8 +11,7 @@ var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
 var _useOHLCSeries = require("../hooks/useOHLCSeries");
 var _useCandlestickPlotData = require("./useCandlestickPlotData");
-var _useWebGLResizeObserver = require("../utils/webgl/useWebGLResizeObserver");
-var _ChartsWebGLLayer = require("../ChartsWebGLLayer/ChartsWebGLLayer");
+var _ChartsWebGLContext = require("../ChartsWebGLLayer/ChartsWebGLContext");
 var _checkCandlestickScaleErrors = require("./checkCandlestickScaleErrors");
 var _CandlestickWebGLProgram = require("./CandlestickWebGLProgram");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,26 +19,29 @@ function CandlestickPlot() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CandlestickWebGLPlot, {});
 }
 function CandlestickWebGLPlot() {
-  const gl = (0, _ChartsWebGLLayer.useWebGLContext)();
+  const layer = (0, _ChartsWebGLContext.useWebGLLayer)();
   const series = (0, _useOHLCSeries.useOHLCSeriesContext)();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
   const isHidden = !seriesToDisplay || seriesToDisplay.hidden;
   React.useEffect(() => {
-    if (gl && isHidden) {
-      gl.clearColor(0, 0, 0, 0);
-      gl.clear(gl.COLOR_BUFFER_BIT);
+    if (layer && isHidden) {
+      layer.requestRender();
     }
-  }, [gl, isHidden]);
-  if (!gl || isHidden) {
+  }, [layer, isHidden]);
+  if (!layer || isHidden) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CandlestickWebGLPlotImpl, {
-    gl: gl,
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
     series: seriesToDisplay
   });
 }
 function CandlestickWebGLPlotImpl({
   gl,
+  registerDraw,
+  requestRender,
   series
 }) {
   const drawingArea = (0, _internals.useDrawingArea)();
@@ -48,7 +50,16 @@ function CandlestickWebGLPlotImpl({
   (0, _checkCandlestickScaleErrors.checkCandlestickScaleErrors)(series.id, xScale);
   const [program, setProgram] = React.useState(null);
   const dataLength = series.data.length;
-  const renderScheduledRef = React.useRef(false);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      program?.render(dataLength);
+    };
+  }, [program, dataLength]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
   React.useEffect(() => {
     const prog = new _CandlestickWebGLProgram.CandlestickWebGLProgram(gl);
     setProgram(prog);
@@ -56,34 +67,19 @@ function CandlestickWebGLPlotImpl({
       prog.dispose();
     };
   }, [gl]);
-  const render = React.useCallback(() => {
-    renderScheduledRef.current = false;
-    program?.render(dataLength);
-  }, [program, dataLength]);
-  const scheduleRender = React.useCallback(() => {
-    renderScheduledRef.current = true;
-  }, []);
-
-  // On resize render directly to avoid a frame where the canvas is blank
-  (0, _useWebGLResizeObserver.useWebGLResizeObserver)(render);
   React.useEffect(() => {
     program?.setResolution(drawingArea.width, drawingArea.height);
-    scheduleRender();
-  }, [drawingArea.height, drawingArea.width, gl, scheduleRender, program]);
+    requestRender();
+  }, [drawingArea.height, drawingArea.width, gl, requestRender, program]);
   const candleWidth = xScale.bandwidth();
   React.useEffect(() => {
     program?.setCandleWidth(candleWidth);
-    scheduleRender();
-  }, [candleWidth, gl, program, scheduleRender]);
+    requestRender();
+  }, [candleWidth, gl, program, requestRender]);
   const plotData = (0, _useCandlestickPlotData.useCandlestickPlotData)(drawingArea, series, xScale, yScale);
   React.useEffect(() => {
     program?.plot(plotData);
-    scheduleRender();
-  }, [gl, plotData, program, scheduleRender]);
-  React.useEffect(() => {
-    if (renderScheduledRef.current) {
-      render();
-    }
-  });
+    requestRender();
+  }, [gl, plotData, program, requestRender]);
   return null;
 }

package/CandlestickChart/CandlestickPlot.mjs

@@ -5,8 +5,7 @@ import { useDrawingArea } from '@mui/x-charts/internals';
 import { useXScale, useYScale } from '@mui/x-charts/hooks';
 import { useOHLCSeriesContext } from "../hooks/useOHLCSeries.mjs";
 import { useCandlestickPlotData } from "./useCandlestickPlotData.mjs";
-import { useWebGLResizeObserver } from "../utils/webgl/useWebGLResizeObserver.mjs";
-import { useWebGLContext } from "../ChartsWebGLLayer/ChartsWebGLLayer.mjs";
+import { useWebGLLayer } from "../ChartsWebGLLayer/ChartsWebGLContext.mjs";
 import { checkCandlestickScaleErrors } from "./checkCandlestickScaleErrors.mjs";
 import { CandlestickWebGLProgram } from "./CandlestickWebGLProgram.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,26 +13,29 @@ export function CandlestickPlot() {
   return /*#__PURE__*/_jsx(CandlestickWebGLPlot, {});
 }
 function CandlestickWebGLPlot() {
-  const gl = useWebGLContext();
+  const layer = useWebGLLayer();
   const series = useOHLCSeriesContext();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
   const isHidden = !seriesToDisplay || seriesToDisplay.hidden;
   React.useEffect(() => {
-    if (gl && isHidden) {
-      gl.clearColor(0, 0, 0, 0);
-      gl.clear(gl.COLOR_BUFFER_BIT);
+    if (layer && isHidden) {
+      layer.requestRender();
     }
-  }, [gl, isHidden]);
-  if (!gl || isHidden) {
+  }, [layer, isHidden]);
+  if (!layer || isHidden) {
     return null;
   }
   return /*#__PURE__*/_jsx(CandlestickWebGLPlotImpl, {
-    gl: gl,
+    gl: layer.gl,
+    registerDraw: layer.registerDraw,
+    requestRender: layer.requestRender,
     series: seriesToDisplay
   });
 }
 function CandlestickWebGLPlotImpl({
   gl,
+  registerDraw,
+  requestRender,
   series
 }) {
   const drawingArea = useDrawingArea();
@@ -42,7 +44,16 @@ function CandlestickWebGLPlotImpl({
   checkCandlestickScaleErrors(series.id, xScale);
   const [program, setProgram] = React.useState(null);
   const dataLength = series.data.length;
-  const renderScheduledRef = React.useRef(false);
+  const drawRef = React.useRef(null);
+  React.useEffect(() => {
+    drawRef.current = () => {
+      program?.render(dataLength);
+    };
+  }, [program, dataLength]);
+  React.useEffect(() => {
+    const unregister = registerDraw(drawRef);
+    return unregister;
+  }, [registerDraw]);
   React.useEffect(() => {
     const prog = new CandlestickWebGLProgram(gl);
     setProgram(prog);
@@ -50,34 +61,19 @@ function CandlestickWebGLPlotImpl({
       prog.dispose();
     };
   }, [gl]);
-  const render = React.useCallback(() => {
-    renderScheduledRef.current = false;
-    program?.render(dataLength);
-  }, [program, dataLength]);
-  const scheduleRender = React.useCallback(() => {
-    renderScheduledRef.current = true;
-  }, []);
-
-  // On resize render directly to avoid a frame where the canvas is blank
-  useWebGLResizeObserver(render);
   React.useEffect(() => {
     program?.setResolution(drawingArea.width, drawingArea.height);
-    scheduleRender();
-  }, [drawingArea.height, drawingArea.width, gl, scheduleRender, program]);
+    requestRender();
+  }, [drawingArea.height, drawingArea.width, gl, requestRender, program]);
   const candleWidth = xScale.bandwidth();
   React.useEffect(() => {
     program?.setCandleWidth(candleWidth);
-    scheduleRender();
-  }, [candleWidth, gl, program, scheduleRender]);
+    requestRender();
+  }, [candleWidth, gl, program, requestRender]);
   const plotData = useCandlestickPlotData(drawingArea, series, xScale, yScale);
   React.useEffect(() => {
     program?.plot(plotData);
-    scheduleRender();
-  }, [gl, plotData, program, scheduleRender]);
-  React.useEffect(() => {
-    if (renderScheduledRef.current) {
-      render();
-    }
-  });
+    requestRender();
+  }, [gl, plotData, program, requestRender]);
   return null;
 }

package/CandlestickChart/CandlestickWebGLProgram.js

@@ -127,9 +127,6 @@ class CandlestickWebGLProgram {
     this.gl.bindVertexArray(null);
   }
   render(dataLength) {
-    // Clear and draw
-    this.gl.clearColor(0, 0, 0, 0.0);
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
     this.gl.useProgram(this.wickProgram);
     (0, _utils.logWebGLErrors)(this.gl);
     this.gl.bindVertexArray(this.wickVao);

package/CandlestickChart/CandlestickWebGLProgram.mjs

@@ -121,9 +121,6 @@ export class CandlestickWebGLProgram {
     this.gl.bindVertexArray(null);
   }
   render(dataLength) {
-    // Clear and draw
-    this.gl.clearColor(0, 0, 0, 0.0);
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
     this.gl.useProgram(this.wickProgram);
     logWebGLErrors(this.gl);
     this.gl.bindVertexArray(this.wickVao);

package/CandlestickChart/seriesConfig/getSeriesWithDefaultValues.d.mts

@@ -11,6 +11,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'oh
     dataIndex: number;
     field: import("../../index.mjs").OHLCField;
   }) => string | null;
+  valueGetter?: (item: import("@mui/x-charts/internals").DatasetElementType<unknown>) => import("../../index.mjs").OHLCValueType | null;
   datasetKeys?: {
     open: string;
     high: string;

package/CandlestickChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -11,6 +11,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'oh
     dataIndex: number;
     field: import("../../index.js").OHLCField;
   }) => string | null;
+  valueGetter?: (item: import("@mui/x-charts/internals").DatasetElementType<unknown>) => import("../../index.js").OHLCValueType | null;
   datasetKeys?: {
     open: string;
     high: string;

package/CandlestickChart/seriesConfig/seriesProcessor.js

@@ -27,21 +27,19 @@ Either provide a data property to the series or use the dataset prop.` : (0, _fo
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: OHLC series with id='${id}' has incomplete datasetKeys.
 Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : (0, _formatErrorMessage2.default)(204, id, missingKeys.map(key => `"${key}"`).join(', ')));
     }
-    completedSeries[id] = (0, _extends2.default)({}, series[id], {
-      valueFormatter: series[id].valueFormatter ?? candlestickValueFormatter,
-      hidden: !isItemVisible?.({
-        type: 'ohlc',
-        seriesId: id
-      }),
-      data: datasetKeys ? dataset.map(data => {
-        const open = data[datasetKeys.open];
-        const high = data[datasetKeys.high];
-        const low = data[datasetKeys.low];
-        const close = data[datasetKeys.close];
+    let data;
+    if (seriesData.valueGetter) {
+      data = dataset.map(d => seriesData.valueGetter(d));
+    } else if (datasetKeys) {
+      data = dataset.map(d => {
+        const open = d[datasetKeys.open];
+        const high = d[datasetKeys.high];
+        const low = d[datasetKeys.low];
+        const close = d[datasetKeys.close];
         if (typeof open !== 'number' || typeof high !== 'number' || typeof low !== 'number' || typeof close !== 'number') {
           if (process.env.NODE_ENV !== 'production') {
             for (const key of ['open', 'high', 'low', 'close']) {
-              if (data[datasetKeys[key]] !== null && typeof data[datasetKeys[key]] !== 'number') {
+              if (d[datasetKeys[key]] !== null && typeof d[datasetKeys[key]] !== 'number') {
                 (0, _warning.warnOnce)([`MUI X Charts: Your dataset key "${key}" is used for plotting a candlestick, but contains non-numerical elements.`, 'Candlestick charts only support numbers.']);
               }
             }
@@ -49,7 +47,17 @@ Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : (0,
           return null;
         }
         return [open, high, low, close];
-      }) : series[id].data
+      });
+    } else {
+      data = series[id].data;
+    }
+    completedSeries[id] = (0, _extends2.default)({}, series[id], {
+      valueFormatter: series[id].valueFormatter ?? candlestickValueFormatter,
+      hidden: !isItemVisible?.({
+        type: 'ohlc',
+        seriesId: id
+      }),
+      data
     });
   }
   return {

package/CandlestickChart/seriesConfig/seriesProcessor.mjs

@@ -20,21 +20,19 @@ Either provide a data property to the series or use the dataset prop.` : _format
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: OHLC series with id='${id}' has incomplete datasetKeys.
 Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : _formatErrorMessage(204, id, missingKeys.map(key => `"${key}"`).join(', ')));
     }
-    completedSeries[id] = _extends({}, series[id], {
-      valueFormatter: series[id].valueFormatter ?? candlestickValueFormatter,
-      hidden: !isItemVisible?.({
-        type: 'ohlc',
-        seriesId: id
-      }),
-      data: datasetKeys ? dataset.map(data => {
-        const open = data[datasetKeys.open];
-        const high = data[datasetKeys.high];
-        const low = data[datasetKeys.low];
-        const close = data[datasetKeys.close];
+    let data;
+    if (seriesData.valueGetter) {
+      data = dataset.map(d => seriesData.valueGetter(d));
+    } else if (datasetKeys) {
+      data = dataset.map(d => {
+        const open = d[datasetKeys.open];
+        const high = d[datasetKeys.high];
+        const low = d[datasetKeys.low];
+        const close = d[datasetKeys.close];
         if (typeof open !== 'number' || typeof high !== 'number' || typeof low !== 'number' || typeof close !== 'number') {
           if (process.env.NODE_ENV !== 'production') {
             for (const key of ['open', 'high', 'low', 'close']) {
-              if (data[datasetKeys[key]] !== null && typeof data[datasetKeys[key]] !== 'number') {
+              if (d[datasetKeys[key]] !== null && typeof d[datasetKeys[key]] !== 'number') {
                 warnOnce([`MUI X Charts: Your dataset key "${key}" is used for plotting a candlestick, but contains non-numerical elements.`, 'Candlestick charts only support numbers.']);
               }
             }
@@ -42,7 +40,17 @@ Properties ${missingKeys.map(key => `"${key}"`).join(', ')} are missing.` : _for
           return null;
         }
         return [open, high, low, close];
-      }) : series[id].data
+      });
+    } else {
+      data = series[id].data;
+    }
+    completedSeries[id] = _extends({}, series[id], {
+      valueFormatter: series[id].valueFormatter ?? candlestickValueFormatter,
+      hidden: !isItemVisible?.({
+        type: 'ohlc',
+        seriesId: id
+      }),
+      data
     });
   }
   return {

package/ChartsDataProviderPremium/ChartsDataProviderPremium.js

@@ -19,8 +19,8 @@ var _useChartsDataProviderPremiumProps = require("./useChartsDataProviderPremium
 var _seriesConfig2 = require("../CandlestickChart/seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc3NTYwNjQwMDAwMA==",
-  version: "9.0.1",
+  releaseDate: "MTc3NzI0ODAwMDAwMA==",
+  version: "9.0.3",
   name: 'x-charts-premium'
 };
 const defaultSeriesConfigPremium = exports.defaultSeriesConfigPremium = (0, _extends2.default)({}, _internals2.defaultSeriesConfigPro, {

package/ChartsDataProviderPremium/ChartsDataProviderPremium.mjs

@@ -13,8 +13,8 @@ import { useChartsDataProviderPremiumProps } from "./useChartsDataProviderPremiu
 import { ohlcSeriesConfig } from "../CandlestickChart/seriesConfig/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3NTYwNjQwMDAwMA==",
-  version: "9.0.1",
+  releaseDate: "MTc3NzI0ODAwMDAwMA==",
+  version: "9.0.3",
   name: 'x-charts-premium'
 };
 export const defaultSeriesConfigPremium = _extends({}, defaultSeriesConfigPro, {

package/ChartsRadialDataProvider/index.d.mts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialDataProvider';

package/ChartsRadialDataProvider/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsRadialDataProvider';