@mui/x-charts-premium 9.1.0 → 9.3.0

package/BarChartPremium/BarChartPremium.d.mts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { type BarChartProProps, type BarChartProSlotProps, type BarChartProSlots } from '@mui/x-charts-pro/BarChartPro';
 import { type BarSeries } from '@mui/x-charts/BarChart';
+import type { BarChartPremiumPluginSignatures } from "./BarChartPremium.plugins.mjs";
+import { type BarPlotPremiumProps } from "./BarPlotPremium.mjs";
 import { type BarItemIdentifier, type RangeBarItemIdentifier, type RangeBarSeriesType } from "../models/index.mjs";
+import type { ChartsContainerPremiumProps } from "../ChartsContainerPremium/index.mjs";
 export type RangeBarSeries = RangeBarSeriesType;
 export interface BarChartPremiumSlots extends BarChartProSlots {}
 export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
-export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick' | 'slots' | 'slotProps'> {
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Pick<BarPlotPremiumProps, 'renderer'> {
   /**
    * Overridable component slots.
    * @default {}

package/BarChartPremium/BarChartPremium.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { type BarChartProProps, type BarChartProSlotProps, type BarChartProSlots } from '@mui/x-charts-pro/BarChartPro';
 import { type BarSeries } from '@mui/x-charts/BarChart';
+import type { BarChartPremiumPluginSignatures } from "./BarChartPremium.plugins.js";
+import { type BarPlotPremiumProps } from "./BarPlotPremium.js";
 import { type BarItemIdentifier, type RangeBarItemIdentifier, type RangeBarSeriesType } from "../models/index.js";
+import type { ChartsContainerPremiumProps } from "../ChartsContainerPremium/index.js";
 export type RangeBarSeries = RangeBarSeriesType;
 export interface BarChartPremiumSlots extends BarChartProSlots {}
 export interface BarChartPremiumSlotProps extends BarChartProSlotProps {}
-export interface BarChartPremiumProps extends Omit<BarChartProProps, 'series' | 'onItemClick' | 'slots' | 'slotProps'> {
+export interface BarChartPremiumProps extends Omit<BarChartProProps, 'apiRef' | 'slots' | 'slotProps' | 'seriesConfig' | 'plugins' | 'series' | 'renderer'>, Omit<ChartsContainerPremiumProps<'bar', BarChartPremiumPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Pick<BarPlotPremiumProps, 'renderer'> {
   /**
    * Overridable component slots.
    * @default {}

package/BarChartPremium/BarChartPremium.js

@@ -16,7 +16,8 @@ var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 var _ChartsToolbarPro = require("@mui/x-charts-pro/ChartsToolbarPro");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsWrapper = require("@mui/x-charts/ChartsWrapper");
-var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _ChartsLayerContainer = require("@mui/x-charts/ChartsLayerContainer");
+var _ChartsSvgLayer = require("@mui/x-charts/ChartsSvgLayer");
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
 var _BarChart = require("@mui/x-charts/BarChart");
 var _ChartsOverlay = require("@mui/x-charts/ChartsOverlay");
@@ -28,6 +29,8 @@ var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _internals = require("@mui/x-charts-pro/internals");
 var _useBarChartPremiumProps = require("./useBarChartPremiumProps");
 var _BarChartPremium2 = require("./BarChartPremium.plugins");
+var _BarPlotPremium = require("./BarPlotPremium");
+var _ChartsWebGLLayer = require("../ChartsWebGLLayer");
 var _ChartsDataProviderPremium = require("../ChartsDataProviderPremium");
 var _RangeBarPlot = require("./RangeBar/RangeBarPlot");
 var _FocusedRangeBar = require("./RangeBar/FocusedRangeBar");
@@ -60,7 +63,7 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
   const {
     chartsWrapperProps,
     chartsContainerProps,
-    barPlotProps,
+    barPlotPremiumProps,
     rangeBarPlotProps,
     gridProps,
     clipPathProps,
@@ -83,14 +86,23 @@ const BarChartPremium = exports.BarChartPremium = /*#__PURE__*/React.forwardRef(
   }));
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  const renderer = barPlotPremiumProps.renderer;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProviderPremium.ChartsDataProviderPremium, (0, _extends2.default)({}, chartsDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       ref: ref,
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRangeBar.FocusedRangeBar, {})]
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
-      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
+      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsLayerContainer.ChartsLayerContainer, {
+        children: [renderer === 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSvgLayer.ChartsSvgLayer, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsWebGLLayer.ChartsWebGLLayer, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps))
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSvgLayer.ChartsSvgLayer, (0, _extends2.default)({}, chartsSurfaceProps, {
+          children: [renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+            children: [renderer !== 'webgl' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlotPremium.BarPlotPremium, (0, _extends2.default)({}, barPlotPremiumProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeBarPlot.RangeBarPlot, (0, _extends2.default)({}, rangeBarPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.FocusedBar, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRangeBar.FocusedRangeBar, {})]
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsBrushOverlay.ChartsBrushOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+        }))]
+      }), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
   }));
 });
@@ -199,11 +211,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -223,11 +235,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -258,11 +270,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar'])
+    type: _propTypes.default.oneOf(['bar']).isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    type: _propTypes.default.oneOf(['bar'])
   })]).isRequired),
   /**
    * The list of zoom data related to each axis.
@@ -355,11 +367,12 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    * The type of renderer to use for the bar plot.
    * - `svg-single`: Renders every bar in a `<rect />` element.
    * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/bars/#performance
    *
    * @default 'svg-single'
    */
-  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single', 'webgl']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
@@ -406,11 +419,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: _propTypes.default.oneOfType([_propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired,
-    type: _propTypes.default.oneOf(['bar']).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }), _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.string.isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -433,11 +446,6 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
-    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -446,6 +454,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -467,6 +480,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zoomInteractionConfig: _propTypes.default.shape({
     pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag', 'wheel']), _propTypes.default.shape({
+      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
+    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['drag']).isRequired
@@ -474,24 +492,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
-    }), _propTypes.default.shape({
-      allowedDirection: _propTypes.default.oneOf(['x', 'xy', 'y']),
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['wheel']).isRequired
-    }), _propTypes.default.shape({
-      pointerMode: _propTypes.default.any,
-      requiredKeys: _propTypes.default.array,
-      type: _propTypes.default.oneOf(['pinch']).isRequired
-    }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+      type: _propTypes.default.oneOf(['brush']).isRequired
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
@@ -499,7 +504,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
     }), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
-      type: _propTypes.default.oneOf(['brush']).isRequired
+      type: _propTypes.default.oneOf(['tapAndDrag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.array,
+      type: _propTypes.default.oneOf(['pinch']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.any,
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/BarChartPremium/BarChartPremium.mjs

@@ -10,9 +10,10 @@ import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsWrapper } from '@mui/x-charts/ChartsWrapper';
-import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
+import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
-import { BarPlot, FocusedBar } from '@mui/x-charts/BarChart';
+import { FocusedBar } from '@mui/x-charts/BarChart';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
@@ -22,6 +23,8 @@ import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
 import { useChartsContainerProProps } from '@mui/x-charts-pro/internals';
 import { useBarChartPremiumProps } from "./useBarChartPremiumProps.mjs";
 import { BAR_CHART_PREMIUM_PLUGINS } from "./BarChartPremium.plugins.mjs";
+import { BarPlotPremium } from "./BarPlotPremium.mjs";
+import { ChartsWebGLLayer } from "../ChartsWebGLLayer/index.mjs";
 import { ChartsDataProviderPremium } from "../ChartsDataProviderPremium/index.mjs";
 import { RangeBarPlot } from "./RangeBar/RangeBarPlot.mjs";
 import { FocusedRangeBar } from "./RangeBar/FocusedRangeBar.mjs";
@@ -53,7 +56,7 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
   const {
     chartsWrapperProps,
     chartsContainerProps,
-    barPlotProps,
+    barPlotPremiumProps,
     rangeBarPlotProps,
     gridProps,
     clipPathProps,
@@ -76,14 +79,23 @@ const BarChartPremium = /*#__PURE__*/React.forwardRef(function BarChartPremium(i
   }));
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
+  const renderer = barPlotPremiumProps.renderer;
   return /*#__PURE__*/_jsx(ChartsDataProviderPremium, _extends({}, chartsDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
-      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
-          children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {}), /*#__PURE__*/_jsx(FocusedRangeBar, {})]
-        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
+      children: [showToolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsLayerContainer, {
+        children: [renderer === 'webgl' && /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(ChartsSvgLayer, {
+            children: /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps))
+          }), /*#__PURE__*/_jsx(ChartsWebGLLayer, {
+            children: /*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps))
+          })]
+        }), /*#__PURE__*/_jsxs(ChartsSvgLayer, _extends({}, chartsSurfaceProps, {
+          children: [renderer !== 'webgl' && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+            children: [renderer !== 'webgl' && /*#__PURE__*/_jsx(BarPlotPremium, _extends({}, barPlotPremiumProps)), /*#__PURE__*/_jsx(RangeBarPlot, _extends({}, rangeBarPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__PURE__*/_jsx(FocusedBar, {}), /*#__PURE__*/_jsx(FocusedRangeBar, {})]
+          })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsBrushOverlay, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+        }))]
+      }), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
@@ -192,11 +204,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   hiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * If `true`, the legend is not rendered.
@@ -216,11 +228,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   highlightedItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -251,11 +263,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
   initialHiddenItems: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar'])
+    type: PropTypes.oneOf(['bar']).isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    type: PropTypes.oneOf(['bar'])
   })]).isRequired),
   /**
    * The list of zoom data related to each axis.
@@ -348,11 +360,12 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    * The type of renderer to use for the bar plot.
    * - `svg-single`: Renders every bar in a `<rect />` element.
    * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
    *                Read more: https://mui.com/x/react-charts/bars/#performance
    *
    * @default 'svg-single'
    */
-  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single', 'webgl']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] or [[RangeBarSeries]] objects.
@@ -399,11 +412,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired,
-    type: PropTypes.oneOf(['bar']).isRequired
+    seriesId: PropTypes.string.isRequired
   }), PropTypes.shape({
     dataIndex: PropTypes.number.isRequired,
-    seriesId: PropTypes.string.isRequired
+    seriesId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['bar']).isRequired
   })]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
@@ -426,11 +439,6 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zAxis: PropTypes.arrayOf(PropTypes.shape({
     colorMap: PropTypes.oneOfType([PropTypes.shape({
-      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-      type: PropTypes.oneOf(['ordinal']).isRequired,
-      unknownColor: PropTypes.string,
-      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
-    }), PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
       min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -439,6 +447,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
       type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownColor: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
     })]),
     data: PropTypes.array,
     dataKey: PropTypes.string,
@@ -460,6 +473,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
    */
   zoomInteractionConfig: PropTypes.shape({
     pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -467,24 +485,11 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
-    }), PropTypes.shape({
-      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['wheel']).isRequired
-    }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
-      type: PropTypes.oneOf(['pinch']).isRequired
-    }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+      type: PropTypes.oneOf(['brush']).isRequired
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
@@ -492,7 +497,15 @@ process.env.NODE_ENV !== "production" ? BarChartPremium.propTypes = {
     }), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
-      type: PropTypes.oneOf(['brush']).isRequired
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired)
   })
 } : void 0;

package/BarChartPremium/BarPlotPremium.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from '@mui/x-charts/BarChart';
+import type { RendererType } from '@mui/x-charts/ScatterChart';
+export type BarPlotPremiumRenderer = RendererType | 'webgl';
+export interface BarPlotPremiumSlots extends BarPlotSlots {}
+export interface BarPlotPremiumSlotProps extends BarPlotSlotProps {}
+export interface BarPlotPremiumProps extends Omit<BarPlotProps, 'renderer' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotPremiumSlotProps;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: BarPlotPremiumRenderer;
+}
+declare function BarPlotPremium({
+  renderer,
+  borderRadius,
+  ...other
+}: BarPlotPremiumProps): React.JSX.Element;
+declare namespace BarPlotPremium {
+  var propTypes: any;
+}
+export { BarPlotPremium };

package/BarChartPremium/BarPlotPremium.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { type BarPlotProps, type BarPlotSlotProps, type BarPlotSlots } from '@mui/x-charts/BarChart';
+import type { RendererType } from '@mui/x-charts/ScatterChart';
+export type BarPlotPremiumRenderer = RendererType | 'webgl';
+export interface BarPlotPremiumSlots extends BarPlotSlots {}
+export interface BarPlotPremiumSlotProps extends BarPlotSlotProps {}
+export interface BarPlotPremiumProps extends Omit<BarPlotProps, 'renderer' | 'slots' | 'slotProps'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BarPlotPremiumSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarPlotPremiumSlotProps;
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer?: BarPlotPremiumRenderer;
+}
+declare function BarPlotPremium({
+  renderer,
+  borderRadius,
+  ...other
+}: BarPlotPremiumProps): React.JSX.Element;
+declare namespace BarPlotPremium {
+  var propTypes: any;
+}
+export { BarPlotPremium };

package/BarChartPremium/BarPlotPremium.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarPlotPremium = BarPlotPremium;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _BarChart = require("@mui/x-charts/BarChart");
+var _BarWebGLPlot = require("./webgl/BarWebGLPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["renderer", "borderRadius"];
+function BarPlotPremium(_ref) {
+  let {
+      renderer,
+      borderRadius
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  if (renderer === 'webgl') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarWebGLPlot.BarWebGLPlot, {
+      borderRadius: borderRadius
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({
+    renderer: renderer,
+    borderRadius: borderRadius
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? BarPlotPremium.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the border radius of the bar element.
+   */
+  borderRadius: _propTypes.default.number,
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Callback fired when a bar item is clicked.
+   * @param {MouseEvent} event The event source of the callback.
+   * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   * - `webgl`: Renders bars using WebGL for better performance with very large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single', 'webgl']),
+  /**
+   * If `true`, animations are skipped.
+   * @default undefined
+   */
+  skipAnimation: _propTypes.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;