@mui/x-charts-premium 9.0.3 → 9.1.0

package/CandlestickChart/useCandlestickPlotData.d.mts

@@ -5,10 +5,10 @@ import type { DefaultizedOHLCSeriesType } from "../models/index.mjs";
 export interface CandlestickPlotData {
   candleCenters: Float32Array;
   candleHeights: Float32Array;
-  candleColors: Float32Array;
+  candleColors: Uint8ClampedArray;
   wickCenters: Float32Array;
   wickHeights: Float32Array;
-  wickColors: Float32Array;
+  wickColors: Uint8ClampedArray;
 }
 export declare function useCandlestickPlotData(drawingArea: ChartDrawingArea, series: DefaultizedOHLCSeriesType, xScale: ScaleBand<{
   toString(): string;

package/CandlestickChart/useCandlestickPlotData.d.ts

@@ -5,10 +5,10 @@ import type { DefaultizedOHLCSeriesType } from "../models/index.js";
 export interface CandlestickPlotData {
   candleCenters: Float32Array;
   candleHeights: Float32Array;
-  candleColors: Float32Array;
+  candleColors: Uint8ClampedArray;
   wickCenters: Float32Array;
   wickHeights: Float32Array;
-  wickColors: Float32Array;
+  wickColors: Uint8ClampedArray;
 }
 export declare function useCandlestickPlotData(drawingArea: ChartDrawingArea, series: DefaultizedOHLCSeriesType, xScale: ScaleBand<{
   toString(): string;

package/CandlestickChart/useCandlestickPlotData.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -13,54 +14,37 @@ var _parseColor = require("../utils/webgl/parseColor");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
 const FADE_OPACITY = 0.3;
 const HIGHLIGHT_BRIGHTNESS = 1.2;
+function ensurePoolFloat32(pool, n) {
+  if (pool && pool.length >= n) {
+    return pool;
+  }
+  return new Float32Array(n);
+}
 function useCandlestickPlotData(drawingArea, series, xScale, yScale) {
   const theme = (0, _styles.useTheme)();
   const store = (0, _internals.useStore)();
   const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
   const wickColor = React.useMemo(() => (0, _parseColor.parseColor)(theme.palette.text.primary), [theme.palette.text.primary]);
   const colorGetter = React.useMemo(() => (0, _getColor.default)(series, undefined), [series]);
-  return React.useMemo(() => {
-    const candleCenters = new Float32Array(series.data.length * 2);
-    const candleHeights = new Float32Array(series.data.length);
-    // Two wicks per candle: upper (candle top → high) and lower (candle bottom → low)
-    const wickCenters = new Float32Array(series.data.length * 2 * 2);
-    const wickHeights = new Float32Array(series.data.length * 2);
-    const candleColors = new Float32Array(series.data.length * 4);
-    const wickColors = new Float32Array(series.data.length * 2 * 4);
-    const xDomain = xScale.domain();
+
+  /* Colors only change when the series, color getter, or highlight state changes.
+   * Cache them so zoom-only renders return the same Uint8ClampedArray refs and the
+   * GL upload short-circuit can skip re-uploading colors.
+   * `parseColor` returns bytes in [0, 255]. Uint8Clamped rounds + clamps automatically,
+   * so brightness multiplications can't overflow. */
+  const colors = React.useMemo(() => {
+    const candleColors = new Uint8ClampedArray(series.data.length * 4);
+    const wickColors = new Uint8ClampedArray(series.data.length * 2 * 4);
+    const [wickR, wickG, wickB, wickA] = wickColor;
     for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
       const datum = series.data[dataIndex];
       if (datum === null) {
-        // Set alpha to 0 to hide the candle and both wicks
-        candleColors[dataIndex * 4 + 3] = 0.0;
-        wickColors[dataIndex * 2 * 4 + 3] = 0.0;
-        wickColors[(dataIndex * 2 + 1) * 4 + 3] = 0.0;
+        /* Alpha 0 hides the candle and both wicks; src-alpha blending makes RGB irrelevant. */
+        candleColors[dataIndex * 4 + 3] = 0;
+        wickColors[dataIndex * 2 * 4 + 3] = 0;
+        wickColors[(dataIndex * 2 + 1) * 4 + 3] = 0;
         continue;
       }
-
-      // Can't return undefined because we're calling it with a value from the domain
-      const scaledX = xScale(xDomain[dataIndex]);
-      const [open, high, low, close] = datum;
-      const x = scaledX - drawingArea.left;
-      const scaledOpen = yScale(open);
-      const scaledClose = yScale(close);
-      const candleBottom = Math.min(scaledOpen, scaledClose) - drawingArea.top;
-      const candleTop = Math.max(scaledOpen, scaledClose) - drawingArea.top;
-      const wickBottom = yScale(low) - drawingArea.top;
-      const wickTop = yScale(high) - drawingArea.top;
-      candleCenters[dataIndex * 2] = x;
-      candleCenters[dataIndex * 2 + 1] = (candleTop + candleBottom) / 2;
-      candleHeights[dataIndex] = candleTop - candleBottom;
-
-      // We have two wicks per candle so that when a candle is faded the wick isn't visible behind the candle body.
-      const upperWickIndex = dataIndex * 2;
-      wickCenters[upperWickIndex * 2] = x;
-      wickCenters[upperWickIndex * 2 + 1] = (wickTop + candleBottom) / 2;
-      wickHeights[upperWickIndex] = wickTop - candleBottom;
-      const lowerWickIndex = dataIndex * 2 + 1;
-      wickCenters[lowerWickIndex * 2] = x;
-      wickCenters[lowerWickIndex * 2 + 1] = (candleTop + wickBottom) / 2;
-      wickHeights[lowerWickIndex] = candleTop - wickBottom;
       const candleColor = (0, _parseColor.parseColor)(colorGetter(dataIndex));
       candleColors[dataIndex * 4] = candleColor[0];
       candleColors[dataIndex * 4 + 1] = candleColor[1];
@@ -68,44 +52,120 @@ function useCandlestickPlotData(drawingArea, series, xScale, yScale) {
       candleColors[dataIndex * 4 + 3] = candleColor[3];
       for (let w = 0; w < 2; w += 1) {
         const wickIdx = (dataIndex * 2 + w) * 4;
-        wickColors[wickIdx] = wickColor[0];
-        wickColors[wickIdx + 1] = wickColor[1];
-        wickColors[wickIdx + 2] = wickColor[2];
-        wickColors[wickIdx + 3] = wickColor[3];
+        wickColors[wickIdx] = wickR;
+        wickColors[wickIdx + 1] = wickG;
+        wickColors[wickIdx + 2] = wickB;
+        wickColors[wickIdx + 3] = wickA;
       }
-      const identifier = {
+      const highlightState = getHighlightState({
         type: 'ohlc',
         seriesId: series.id,
         dataIndex
-      };
-      const highlightState = getHighlightState(identifier);
-      const highlighted = highlightState === 'highlighted';
-      const faded = highlightState === 'faded';
-      if (highlighted) {
-        // Mimics CSS's filter: brightness(1.2), which multiplies the RGB values by 1.2, without affecting the alpha channel
-        candleColors[dataIndex * 4] *= HIGHLIGHT_BRIGHTNESS;
-        candleColors[dataIndex * 4 + 1] *= HIGHLIGHT_BRIGHTNESS;
-        candleColors[dataIndex * 4 + 2] *= HIGHLIGHT_BRIGHTNESS;
+      });
+      if (highlightState === 'highlighted') {
+        /* Mimics CSS's filter: brightness(1.2): multiplies RGB by 1.2 without touching alpha. */
+        candleColors[dataIndex * 4] = candleColors[dataIndex * 4] * HIGHLIGHT_BRIGHTNESS;
+        candleColors[dataIndex * 4 + 1] = candleColors[dataIndex * 4 + 1] * HIGHLIGHT_BRIGHTNESS;
+        candleColors[dataIndex * 4 + 2] = candleColors[dataIndex * 4 + 2] * HIGHLIGHT_BRIGHTNESS;
         for (let w = 0; w < 2; w += 1) {
           const wickIdx = (dataIndex * 2 + w) * 4;
-          wickColors[wickIdx] *= HIGHLIGHT_BRIGHTNESS;
-          wickColors[wickIdx + 1] *= HIGHLIGHT_BRIGHTNESS;
-          wickColors[wickIdx + 2] *= HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx] = wickColors[wickIdx] * HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx + 1] = wickColors[wickIdx + 1] * HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx + 2] = wickColors[wickIdx + 2] * HIGHLIGHT_BRIGHTNESS;
         }
-      } else if (faded) {
-        candleColors[dataIndex * 4 + 3] *= FADE_OPACITY;
+      } else if (highlightState === 'faded') {
+        candleColors[dataIndex * 4 + 3] = candleColors[dataIndex * 4 + 3] * FADE_OPACITY;
         for (let w = 0; w < 2; w += 1) {
-          wickColors[(dataIndex * 2 + w) * 4 + 3] *= FADE_OPACITY;
+          const aIdx = (dataIndex * 2 + w) * 4 + 3;
+          wickColors[aIdx] = wickColors[aIdx] * FADE_OPACITY;
         }
       }
     }
     return {
+      candleColors,
+      wickColors
+    };
+  }, [colorGetter, wickColor, getHighlightState, series.data, series.id]);
+
+  /* Positions change every zoom/drag. Pool the typed arrays in a ref so we don't
+   * allocate ~1.5 MB per frame at large series sizes; hand out fresh subarray views
+   * so the upload short-circuit still fires. */
+  const positionsPoolRef = React.useRef(null);
+  const positions = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = positionsPoolRef.current;
+    const candleCenters = ensurePoolFloat32(pool?.candleCenters, n * 2);
+    const candleHeights = ensurePoolFloat32(pool?.candleHeights, n);
+    const wickCenters = ensurePoolFloat32(pool?.wickCenters, n * 2 * 2);
+    const wickHeights = ensurePoolFloat32(pool?.wickHeights, n * 2);
+    positionsPoolRef.current = {
       candleCenters,
       candleHeights,
-      candleColors,
       wickCenters,
-      wickHeights,
-      wickColors
+      wickHeights
+    };
+
+    /* Hoist drawing-area offsets into scalars so the loop body doesn't re-read them. */
+    const left = drawingArea.left;
+    const top = drawingArea.top;
+    const xDomain = xScale.domain();
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const datum = series.data[dataIndex];
+      if (datum === null) {
+        /* Pool is reused, so zero out stale values from previous frames. */
+        candleHeights[dataIndex] = 0;
+        candleCenters[dataIndex * 2] = 0;
+        candleCenters[dataIndex * 2 + 1] = 0;
+        wickHeights[dataIndex * 2] = 0;
+        wickHeights[dataIndex * 2 + 1] = 0;
+        wickCenters[dataIndex * 2 * 2] = 0;
+        wickCenters[dataIndex * 2 * 2 + 1] = 0;
+        wickCenters[(dataIndex * 2 + 1) * 2] = 0;
+        wickCenters[(dataIndex * 2 + 1) * 2 + 1] = 0;
+        continue;
+      }
+      const scaledX = xScale(xDomain[dataIndex]);
+      const open = datum[0];
+      const high = datum[1];
+      const low = datum[2];
+      const close = datum[3];
+      const x = scaledX - left;
+      const scaledOpen = yScale(open);
+      const scaledClose = yScale(close);
+      const candleBottom = Math.min(scaledOpen, scaledClose) - top;
+      const candleTop = Math.max(scaledOpen, scaledClose) - top;
+      const wickBottom = yScale(low) - top;
+      const wickTop = yScale(high) - top;
+      candleCenters[dataIndex * 2] = x;
+      candleCenters[dataIndex * 2 + 1] = (candleTop + candleBottom) / 2;
+      candleHeights[dataIndex] = candleTop - candleBottom;
+
+      /* Two wicks per candle so a faded candle body doesn't have a wick poking through it. */
+      const upperWickIndex = dataIndex * 2;
+      wickCenters[upperWickIndex * 2] = x;
+      wickCenters[upperWickIndex * 2 + 1] = (wickTop + candleBottom) / 2;
+      wickHeights[upperWickIndex] = wickTop - candleBottom;
+      const lowerWickIndex = dataIndex * 2 + 1;
+      wickCenters[lowerWickIndex * 2] = x;
+      wickCenters[lowerWickIndex * 2 + 1] = (candleTop + wickBottom) / 2;
+      wickHeights[lowerWickIndex] = candleTop - wickBottom;
+    }
+
+    /* Subarrays share the pool's ArrayBuffer but have new identity, which lets the GL
+     * upload short-circuit detect that the data has actually changed this frame. */
+    return {
+      candleCenters: candleCenters.subarray(0, n * 2),
+      candleHeights: candleHeights.subarray(0, n),
+      wickCenters: wickCenters.subarray(0, n * 2 * 2),
+      wickHeights: wickHeights.subarray(0, n * 2)
     };
-  }, [colorGetter, drawingArea.left, drawingArea.top, getHighlightState, wickColor, series.data, series.id, xScale, yScale]);
+  }, [drawingArea.left, drawingArea.top, series.data, xScale, yScale]);
+  return React.useMemo(() => ({
+    candleCenters: positions.candleCenters,
+    candleHeights: positions.candleHeights,
+    candleColors: colors.candleColors,
+    wickCenters: positions.wickCenters,
+    wickHeights: positions.wickHeights,
+    wickColors: colors.wickColors
+  }), [positions, colors]);
 }

package/CandlestickChart/useCandlestickPlotData.mjs

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { selectorChartsHighlightStateCallback, useStore } from '@mui/x-charts/internals';
 import { useTheme } from '@mui/material/styles';
@@ -5,54 +7,37 @@ import { parseColor } from "../utils/webgl/parseColor.mjs";
 import getColor from "./seriesConfig/getColor.mjs";
 const FADE_OPACITY = 0.3;
 const HIGHLIGHT_BRIGHTNESS = 1.2;
+function ensurePoolFloat32(pool, n) {
+  if (pool && pool.length >= n) {
+    return pool;
+  }
+  return new Float32Array(n);
+}
 export function useCandlestickPlotData(drawingArea, series, xScale, yScale) {
   const theme = useTheme();
   const store = useStore();
   const getHighlightState = store.use(selectorChartsHighlightStateCallback);
   const wickColor = React.useMemo(() => parseColor(theme.palette.text.primary), [theme.palette.text.primary]);
   const colorGetter = React.useMemo(() => getColor(series, undefined), [series]);
-  return React.useMemo(() => {
-    const candleCenters = new Float32Array(series.data.length * 2);
-    const candleHeights = new Float32Array(series.data.length);
-    // Two wicks per candle: upper (candle top → high) and lower (candle bottom → low)
-    const wickCenters = new Float32Array(series.data.length * 2 * 2);
-    const wickHeights = new Float32Array(series.data.length * 2);
-    const candleColors = new Float32Array(series.data.length * 4);
-    const wickColors = new Float32Array(series.data.length * 2 * 4);
-    const xDomain = xScale.domain();
+
+  /* Colors only change when the series, color getter, or highlight state changes.
+   * Cache them so zoom-only renders return the same Uint8ClampedArray refs and the
+   * GL upload short-circuit can skip re-uploading colors.
+   * `parseColor` returns bytes in [0, 255]. Uint8Clamped rounds + clamps automatically,
+   * so brightness multiplications can't overflow. */
+  const colors = React.useMemo(() => {
+    const candleColors = new Uint8ClampedArray(series.data.length * 4);
+    const wickColors = new Uint8ClampedArray(series.data.length * 2 * 4);
+    const [wickR, wickG, wickB, wickA] = wickColor;
     for (let dataIndex = 0; dataIndex < series.data.length; dataIndex += 1) {
       const datum = series.data[dataIndex];
       if (datum === null) {
-        // Set alpha to 0 to hide the candle and both wicks
-        candleColors[dataIndex * 4 + 3] = 0.0;
-        wickColors[dataIndex * 2 * 4 + 3] = 0.0;
-        wickColors[(dataIndex * 2 + 1) * 4 + 3] = 0.0;
+        /* Alpha 0 hides the candle and both wicks; src-alpha blending makes RGB irrelevant. */
+        candleColors[dataIndex * 4 + 3] = 0;
+        wickColors[dataIndex * 2 * 4 + 3] = 0;
+        wickColors[(dataIndex * 2 + 1) * 4 + 3] = 0;
         continue;
       }
-
-      // Can't return undefined because we're calling it with a value from the domain
-      const scaledX = xScale(xDomain[dataIndex]);
-      const [open, high, low, close] = datum;
-      const x = scaledX - drawingArea.left;
-      const scaledOpen = yScale(open);
-      const scaledClose = yScale(close);
-      const candleBottom = Math.min(scaledOpen, scaledClose) - drawingArea.top;
-      const candleTop = Math.max(scaledOpen, scaledClose) - drawingArea.top;
-      const wickBottom = yScale(low) - drawingArea.top;
-      const wickTop = yScale(high) - drawingArea.top;
-      candleCenters[dataIndex * 2] = x;
-      candleCenters[dataIndex * 2 + 1] = (candleTop + candleBottom) / 2;
-      candleHeights[dataIndex] = candleTop - candleBottom;
-
-      // We have two wicks per candle so that when a candle is faded the wick isn't visible behind the candle body.
-      const upperWickIndex = dataIndex * 2;
-      wickCenters[upperWickIndex * 2] = x;
-      wickCenters[upperWickIndex * 2 + 1] = (wickTop + candleBottom) / 2;
-      wickHeights[upperWickIndex] = wickTop - candleBottom;
-      const lowerWickIndex = dataIndex * 2 + 1;
-      wickCenters[lowerWickIndex * 2] = x;
-      wickCenters[lowerWickIndex * 2 + 1] = (candleTop + wickBottom) / 2;
-      wickHeights[lowerWickIndex] = candleTop - wickBottom;
       const candleColor = parseColor(colorGetter(dataIndex));
       candleColors[dataIndex * 4] = candleColor[0];
       candleColors[dataIndex * 4 + 1] = candleColor[1];
@@ -60,44 +45,120 @@ export function useCandlestickPlotData(drawingArea, series, xScale, yScale) {
       candleColors[dataIndex * 4 + 3] = candleColor[3];
       for (let w = 0; w < 2; w += 1) {
         const wickIdx = (dataIndex * 2 + w) * 4;
-        wickColors[wickIdx] = wickColor[0];
-        wickColors[wickIdx + 1] = wickColor[1];
-        wickColors[wickIdx + 2] = wickColor[2];
-        wickColors[wickIdx + 3] = wickColor[3];
+        wickColors[wickIdx] = wickR;
+        wickColors[wickIdx + 1] = wickG;
+        wickColors[wickIdx + 2] = wickB;
+        wickColors[wickIdx + 3] = wickA;
       }
-      const identifier = {
+      const highlightState = getHighlightState({
         type: 'ohlc',
         seriesId: series.id,
         dataIndex
-      };
-      const highlightState = getHighlightState(identifier);
-      const highlighted = highlightState === 'highlighted';
-      const faded = highlightState === 'faded';
-      if (highlighted) {
-        // Mimics CSS's filter: brightness(1.2), which multiplies the RGB values by 1.2, without affecting the alpha channel
-        candleColors[dataIndex * 4] *= HIGHLIGHT_BRIGHTNESS;
-        candleColors[dataIndex * 4 + 1] *= HIGHLIGHT_BRIGHTNESS;
-        candleColors[dataIndex * 4 + 2] *= HIGHLIGHT_BRIGHTNESS;
+      });
+      if (highlightState === 'highlighted') {
+        /* Mimics CSS's filter: brightness(1.2): multiplies RGB by 1.2 without touching alpha. */
+        candleColors[dataIndex * 4] = candleColors[dataIndex * 4] * HIGHLIGHT_BRIGHTNESS;
+        candleColors[dataIndex * 4 + 1] = candleColors[dataIndex * 4 + 1] * HIGHLIGHT_BRIGHTNESS;
+        candleColors[dataIndex * 4 + 2] = candleColors[dataIndex * 4 + 2] * HIGHLIGHT_BRIGHTNESS;
         for (let w = 0; w < 2; w += 1) {
           const wickIdx = (dataIndex * 2 + w) * 4;
-          wickColors[wickIdx] *= HIGHLIGHT_BRIGHTNESS;
-          wickColors[wickIdx + 1] *= HIGHLIGHT_BRIGHTNESS;
-          wickColors[wickIdx + 2] *= HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx] = wickColors[wickIdx] * HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx + 1] = wickColors[wickIdx + 1] * HIGHLIGHT_BRIGHTNESS;
+          wickColors[wickIdx + 2] = wickColors[wickIdx + 2] * HIGHLIGHT_BRIGHTNESS;
         }
-      } else if (faded) {
-        candleColors[dataIndex * 4 + 3] *= FADE_OPACITY;
+      } else if (highlightState === 'faded') {
+        candleColors[dataIndex * 4 + 3] = candleColors[dataIndex * 4 + 3] * FADE_OPACITY;
         for (let w = 0; w < 2; w += 1) {
-          wickColors[(dataIndex * 2 + w) * 4 + 3] *= FADE_OPACITY;
+          const aIdx = (dataIndex * 2 + w) * 4 + 3;
+          wickColors[aIdx] = wickColors[aIdx] * FADE_OPACITY;
         }
       }
     }
     return {
+      candleColors,
+      wickColors
+    };
+  }, [colorGetter, wickColor, getHighlightState, series.data, series.id]);
+
+  /* Positions change every zoom/drag. Pool the typed arrays in a ref so we don't
+   * allocate ~1.5 MB per frame at large series sizes; hand out fresh subarray views
+   * so the upload short-circuit still fires. */
+  const positionsPoolRef = React.useRef(null);
+  const positions = React.useMemo(() => {
+    const n = series.data.length;
+    const pool = positionsPoolRef.current;
+    const candleCenters = ensurePoolFloat32(pool?.candleCenters, n * 2);
+    const candleHeights = ensurePoolFloat32(pool?.candleHeights, n);
+    const wickCenters = ensurePoolFloat32(pool?.wickCenters, n * 2 * 2);
+    const wickHeights = ensurePoolFloat32(pool?.wickHeights, n * 2);
+    positionsPoolRef.current = {
       candleCenters,
       candleHeights,
-      candleColors,
       wickCenters,
-      wickHeights,
-      wickColors
+      wickHeights
+    };
+
+    /* Hoist drawing-area offsets into scalars so the loop body doesn't re-read them. */
+    const left = drawingArea.left;
+    const top = drawingArea.top;
+    const xDomain = xScale.domain();
+    for (let dataIndex = 0; dataIndex < n; dataIndex += 1) {
+      const datum = series.data[dataIndex];
+      if (datum === null) {
+        /* Pool is reused, so zero out stale values from previous frames. */
+        candleHeights[dataIndex] = 0;
+        candleCenters[dataIndex * 2] = 0;
+        candleCenters[dataIndex * 2 + 1] = 0;
+        wickHeights[dataIndex * 2] = 0;
+        wickHeights[dataIndex * 2 + 1] = 0;
+        wickCenters[dataIndex * 2 * 2] = 0;
+        wickCenters[dataIndex * 2 * 2 + 1] = 0;
+        wickCenters[(dataIndex * 2 + 1) * 2] = 0;
+        wickCenters[(dataIndex * 2 + 1) * 2 + 1] = 0;
+        continue;
+      }
+      const scaledX = xScale(xDomain[dataIndex]);
+      const open = datum[0];
+      const high = datum[1];
+      const low = datum[2];
+      const close = datum[3];
+      const x = scaledX - left;
+      const scaledOpen = yScale(open);
+      const scaledClose = yScale(close);
+      const candleBottom = Math.min(scaledOpen, scaledClose) - top;
+      const candleTop = Math.max(scaledOpen, scaledClose) - top;
+      const wickBottom = yScale(low) - top;
+      const wickTop = yScale(high) - top;
+      candleCenters[dataIndex * 2] = x;
+      candleCenters[dataIndex * 2 + 1] = (candleTop + candleBottom) / 2;
+      candleHeights[dataIndex] = candleTop - candleBottom;
+
+      /* Two wicks per candle so a faded candle body doesn't have a wick poking through it. */
+      const upperWickIndex = dataIndex * 2;
+      wickCenters[upperWickIndex * 2] = x;
+      wickCenters[upperWickIndex * 2 + 1] = (wickTop + candleBottom) / 2;
+      wickHeights[upperWickIndex] = wickTop - candleBottom;
+      const lowerWickIndex = dataIndex * 2 + 1;
+      wickCenters[lowerWickIndex * 2] = x;
+      wickCenters[lowerWickIndex * 2 + 1] = (candleTop + wickBottom) / 2;
+      wickHeights[lowerWickIndex] = candleTop - wickBottom;
+    }
+
+    /* Subarrays share the pool's ArrayBuffer but have new identity, which lets the GL
+     * upload short-circuit detect that the data has actually changed this frame. */
+    return {
+      candleCenters: candleCenters.subarray(0, n * 2),
+      candleHeights: candleHeights.subarray(0, n),
+      wickCenters: wickCenters.subarray(0, n * 2 * 2),
+      wickHeights: wickHeights.subarray(0, n * 2)
     };
-  }, [colorGetter, drawingArea.left, drawingArea.top, getHighlightState, wickColor, series.data, series.id, xScale, yScale]);
+  }, [drawingArea.left, drawingArea.top, series.data, xScale, yScale]);
+  return React.useMemo(() => ({
+    candleCenters: positions.candleCenters,
+    candleHeights: positions.candleHeights,
+    candleColors: colors.candleColors,
+    wickCenters: positions.wickCenters,
+    wickHeights: positions.wickHeights,
+    wickColors: colors.wickColors
+  }), [positions, colors]);
 }

package/ChartsAxisHighlightValue/index.d.mts

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

package/ChartsAxisHighlightValue/index.d.ts

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

package/ChartsAxisHighlightValue/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsAxisHighlightValue = require("@mui/x-charts/ChartsAxisHighlightValue");
+Object.keys(_ChartsAxisHighlightValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxisHighlightValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxisHighlightValue[key];
+    }
+  });
+});

package/ChartsAxisHighlightValue/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsAxisHighlightValue';

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: "MTc3NzI0ODAwMDAwMA==",
-  version: "9.0.3",
+  releaseDate: "MTc3ODE5ODQwMDAwMA==",
+  version: "9.1.0",
   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: "MTc3NzI0ODAwMDAwMA==",
-  version: "9.0.3",
+  releaseDate: "MTc3ODE5ODQwMDAwMA==",
+  version: "9.1.0",
   name: 'x-charts-premium'
 };
 export const defaultSeriesConfigPremium = _extends({}, defaultSeriesConfigPro, {

package/ChartsRadialAxisHighlight/index.d.mts

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

package/ChartsRadialAxisHighlight/index.d.ts

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

package/ChartsRadialAxisHighlight/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsRadialAxisHighlight = require("@mui/x-charts/ChartsRadialAxisHighlight");
+Object.keys(_ChartsRadialAxisHighlight).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsRadialAxisHighlight[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsRadialAxisHighlight[key];
+    }
+  });
+});

package/ChartsRadialAxisHighlight/index.mjs

@@ -0,0 +1,2 @@
+// Re-export automatically generated, to customize, simply remove this line.
+export * from '@mui/x-charts/ChartsRadialAxisHighlight';

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.js

@@ -18,8 +18,8 @@ var _useChartsRadialDataProviderPremiumProps = require("./useChartsRadialDataPro
 var _ChartsRadialDataProviderPremium = require("./ChartsRadialDataProviderPremium.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const packageInfo = {
-  releaseDate: "MTc3NzI0ODAwMDAwMA==",
-  version: "9.0.3",
+  releaseDate: "MTc3ODE5ODQwMDAwMA==",
+  version: "9.1.0",
   name: 'x-charts-premium'
 };
 /**

package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.mjs

@@ -11,8 +11,8 @@ import { useChartsRadialDataProviderPremiumProps } from "./useChartsRadialDataPr
 import { RADIAL_PREMIUM_PLUGINS } from "./ChartsRadialDataProviderPremium.plugins.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3NzI0ODAwMDAwMA==",
-  version: "9.0.3",
+  releaseDate: "MTc3ODE5ODQwMDAwMA==",
+  version: "9.1.0",
   name: 'x-charts-premium'
 };
 /**