@mui/x-charts-pro 8.5.1 → 8.5.2

package/BarChartPro/BarChartPro.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsToolbarProSlotProps, ChartsToolbarProSlots } from "../ChartsToolbarPro/Toolbar.types.js";
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
-export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
 export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
    * Overridable component slots.

package/CHANGELOG.md

@@ -5,6 +5,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.5.2
+
+_Jun 12, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Improve Data Grid selectors performance
+- 🐞 Fix `useSyncExternalStore` import error in React 17
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @noobyogi0010.
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari, @prakhargupta1, @romgrk.
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.2`
+
+- [DataGrid] Improve selectors performance (#18234) @romgrk
+- [DataGrid] Fix data grid palette when using CSS vars (#18310) @KenanYusuf
+- [DataGrid] Ignore data source request if the grid got unmounted (#18268) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.2`, plus:
+
+- [DataGridPro] Fix flex column width if it is a pinned column (#18293) @alisasanib
+- [DataGridPro] Fix inconsistent filtering results with aggregation (#17954) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.5.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.2`
+
+- [pickers] Add `PickerDay2` and `DateRangePickerDay2` components (#15921) @noraleonte
+- [pickers] Fix `hiddenLabel` prop propagation (#18195) @noobyogi0010
+
+#### `@mui/x-date-pickers-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.2`
+
+- [charts] Add a default value formatter for continuous scales (#18178) @bernardobelchior
+- [charts] Add margin-bottom to charts toolbar (#18326) @bernardobelchior
+- [charts] Fix grid with band scale (#18295) @alexfauquette
+- [charts] Remove unnecessary style changes in tests (#18317) @JCQuintas
+- [charts] Remove `sx` prop merging from `useComponentRenderer` (#18235) @bernardobelchior
+- [charts] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.2`, plus:
+
+- [charts-pro] Document zoom slider tooltip value formatting (#18261) @bernardobelchior
+- [charts-pro] Funnel `gap` prop does not impact the drawing area (#18233) @JCQuintas
+- [charts-pro] Use `ChartsToolbarPro` types in pro charts (#18243) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.2`
+
+- [tree-view] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
+
+#### `@mui/x-tree-view-pro@8.5.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.2`.
+
+### Docs
+
+- [docs] Add toolbar custom trigger and panel recipe (#18297) @KenanYusuf
+- [docs] Copyedit the Priority support page (#18311) @mapache-salvaje
+- [docs] Remove confusing opt-out mention in telemetry docs (#18257) @prakhargupta1
+- [docs] Revise the Master Detail doc (#17927) @mapache-salvaje
+- [docs] Revise the list view doc (#17928) @mapache-salvaje
+- [docs] Audit and revise the Pro column docs (#17844) @mapache-salvaje
+- [docs] Add some more context on Heatmap (#18256) @oliviertassinari
+- [x-telemetry] Reduce Telemetry overhead (#18292) @oliviertassinari
+- [code-infra] Align Node version used in CI to v22 (#18319) @LukasTy
+- [code-infra] Fix pkg.pr.new publishing (#18316) @bernardobelchior
+- [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
+- [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
+- [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
+- [infra] Update github label references to use 'scope' instead of 'component' (#18260) @michelengelen
+- [infra] Use a single browser server in CI (#18230) @JCQuintas
+
 ## 8.5.1
 
 <!-- generated comparing v8.5.0..master -->

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc0OTA3MDgwMDAwMA==";
+const releaseInfo = "MTc0OTY3OTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -257,7 +257,8 @@ function getZoomSliderTooltipsText(axis, drawingArea) {
   const formatValue = value => {
     if (axis.valueFormatter) {
       return axis.valueFormatter(value, {
-        location: 'zoom-slider-tooltip'
+        location: 'zoom-slider-tooltip',
+        scale: axis.scale
       });
     }
     return `${value}`;

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,6 +1,7 @@
 import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
+export interface ChartsToolbarProProps extends ChartsToolbarProps {}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: ChartsToolbarProps): React.JSX.Element | null;
+export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;

package/ChartsToolbarPro/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
+export interface ChartsToolbarProSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProProps>;
+}
+export interface ChartsToolbarProSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProProps>;
+}

package/ChartsToolbarPro/Toolbar.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/FunnelChart/FunnelChart.js

@@ -23,6 +23,7 @@ var _useFunnelChartProps = require("./useFunnelChartProps");
 var _seriesConfig = require("./seriesConfig");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
+var _FunnelChart2 = require("./FunnelChart.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const seriesConfig = {
   funnel: _seriesConfig.seriesConfig
@@ -48,7 +49,9 @@ const FunnelChart = exports.FunnelChart = /*#__PURE__*/React.forwardRef(function
   } = (0, _useChartContainerProProps.useChartContainerProProps)(chartContainerProps, ref);
   const Tooltip = themedProps.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    gap: themedProps.gap,
     seriesConfig: seriesConfig,
+    plugins: _FunnelChart2.FUNNEL_CHART_PLUGINS,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!themedProps.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)(_FunnelPlot.FunnelPlot, (0, _extends2.default)({}, funnelPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), children]
@@ -95,16 +98,6 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
     size: _propTypes.default.number,
     tickLabelStyle: _propTypes.default.object,
     tickSize: _propTypes.default.number
-  }), _propTypes.default.shape({
-    categories: _propTypes.default.arrayOf(_propTypes.default.string),
-    disableLine: _propTypes.default.bool,
-    disableTicks: _propTypes.default.bool,
-    id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    position: _propTypes.default.oneOf(['bottom', 'left', 'none', 'right', 'top']),
-    scaleType: _propTypes.default.oneOf(['point']),
-    size: _propTypes.default.number,
-    tickLabelStyle: _propTypes.default.object,
-    tickSize: _propTypes.default.number
   }), _propTypes.default.shape({
     categories: _propTypes.default.arrayOf(_propTypes.default.string),
     disableLine: _propTypes.default.bool,
@@ -229,7 +222,7 @@ process.env.NODE_ENV !== "production" ? FunnelChart.propTypes = {
   })]),
   /**
    * The function called for onClick events.
-   * The second argument contains information about all line/bar elements at the current mouse position.
+   * The second argument contains information about all funnel elements at the current position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */

package/FunnelChart/FunnelChart.plugins.d.ts

@@ -1,4 +1,5 @@
-import { ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type FunnelChartPluginsSignatures = [UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+import { UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.js";
+export type FunnelChartPluginsSignatures = [UseChartFunnelAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
 export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginsSignatures>;

package/FunnelChart/FunnelChart.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.FUNNEL_CHART_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
-const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+var _useChartFunnelAxis = require("./funnelAxisPlugin/useChartFunnelAxis");
+const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_useChartFunnelAxis.useChartFunnelAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];

package/FunnelChart/FunnelPlot.d.ts

@@ -2,11 +2,6 @@ import * as React from 'react';
 import { FunnelItemIdentifier } from "./funnel.types.js";
 import { FunnelPlotSlotExtension } from "./funnelPlotSlots.types.js";
 export interface FunnelPlotProps extends FunnelPlotSlotExtension {
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap?: number;
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/FunnelPlot.js

@@ -13,25 +13,27 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _internals = require("@mui/x-charts/internals");
-var _hooks = require("@mui/x-charts/hooks");
 var _FunnelSection = require("./FunnelSection");
 var _labelUtils = require("./labelUtils");
 var _useFunnelSeries = require("../hooks/useFunnelSeries");
 var _curves = require("./curves");
 var _FunnelSectionLabel = require("./FunnelSectionLabel");
+var _useChartFunnelAxisRendering = require("./funnelAxisPlugin/useChartFunnelAxisRendering.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onItemClick", "gap"];
+const _excluded = ["onItemClick"];
 _internals.cartesianSeriesTypes.addType('funnel');
-const useAggregatedData = gap => {
+const useAggregatedData = () => {
   const seriesData = (0, _useFunnelSeries.useFunnelSeriesContext)();
+  const store = (0, _internals.useStore)();
   const {
-    xAxis,
-    xAxisIds
-  } = (0, _hooks.useXAxes)();
+    axis: xAxis,
+    axisIds: xAxisIds
+  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartXAxis);
   const {
-    yAxis,
-    yAxisIds
-  } = (0, _hooks.useYAxes)();
+    axis: yAxis,
+    axisIds: yAxisIds
+  } = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorChartYAxis);
+  const gap = (0, _internals.useSelector)(store, _useChartFunnelAxisRendering.selectorFunnelGap);
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];
@@ -54,22 +56,28 @@ const useAggregatedData = gap => {
       const bandWidth = (isXAxisBand || isYAxisBand) && baseScaleConfig.scale?.bandwidth() || 0;
       const xScale = xAxis[xAxisId].scale;
       const yScale = yAxis[yAxisId].scale;
-      const xPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isXAxisBand) {
-          const position = xScale(bandIndex);
+      const xPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if ((0, _internals.isBandScale)(xScale)) {
+          const position = xScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return xScale(isHorizontal ? value + (stackOffset || 0) : value);
+        if (isHorizontal) {
+          return xScale(value + (stackOffset || 0)) + bandIndex * gap;
+        }
+        return xScale(value);
       };
-      const yPosition = (value, bandIndex, stackOffset, useBand) => {
-        if (isYAxisBand) {
-          const position = yScale(bandIndex);
+      const yPosition = (value, bandIndex, bandIdentifier, stackOffset, useBand) => {
+        if ((0, _internals.isBandScale)(yScale)) {
+          const position = yScale(bandIdentifier);
           return useBand ? position + bandWidth : position;
         }
-        return yScale(isHorizontal ? value : value + (stackOffset || 0));
+        if (isHorizontal) {
+          return yScale(value);
+        }
+        return yScale(value + (stackOffset || 0)) + bandIndex * gap;
       };
-      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
-      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allY = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => yPosition(v.y, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
+      const allX = currentSeries.dataPoints.flatMap((d, dataIndex) => d.flatMap(v => xPosition(v.x, dataIndex, baseScaleConfig.data?.[dataIndex], v.stackOffset, v.useBandWidth)));
       const minPoint = {
         x: Math.min(...allX),
         y: Math.min(...allY)
@@ -97,7 +105,7 @@ const useAggregatedData = gap => {
           min: minPoint,
           max: maxPoint
         });
-        const line = (0, _d3Shape.line)().x(d => xPosition(d.x, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
+        const line = (0, _d3Shape.line)().x(d => xPosition(d.x, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).y(d => yPosition(d.y, dataIndex, baseScaleConfig.data?.[dataIndex], d.stackOffset, d.useBandWidth)).curve(curve);
         return {
           d: line(values),
           color,
@@ -126,11 +134,10 @@ const useAggregatedData = gap => {
 };
 function FunnelPlot(props) {
   const {
-      onItemClick,
-      gap
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const data = useAggregatedData(gap);
+  const data = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [data.map(({
       d,
@@ -175,11 +182,6 @@ process.env.NODE_ENV !== "production" ? FunnelPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * The gap, in pixels, between funnel sections.
-   * @default 0
-   */
-  gap: _propTypes.default.number,
   /**
    * Callback fired when a funnel item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/FunnelChart/categoryAxis.types.d.ts

@@ -1,6 +1,7 @@
 import { AxisConfig, ScaleName } from '@mui/x-charts/models';
 import { MakeOptional } from '@mui/x-internals/types';
-export type CategoryAxis<S extends ScaleName = ScaleName> = S extends ScaleName ? {
+export type FunnelScaleName = Exclude<ScaleName, 'point'>;
+export type CategoryAxis<S extends FunnelScaleName = FunnelScaleName> = S extends FunnelScaleName ? {
   /**
    * The categories to be displayed on the axis.
    * The order of the categories is the order in which they are displayed.

package/FunnelChart/curves/bump.d.ts

@@ -11,13 +11,11 @@ import { CurveOptions } from "./curve.types.js";
 export declare class Bump implements CurveGenerator {
   private context;
   private isHorizontal;
-  private gap;
   private min;
   private max;
   private points;
   constructor(context: CanvasRenderingContext2D, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing

package/FunnelChart/curves/bump.js

@@ -17,14 +17,12 @@ exports.Bump = void 0;
 class Bump {
   constructor(context, {
     isHorizontal,
-    gap,
     min,
     max,
     isIncreasing
   }) {
     this.context = void 0;
     this.isHorizontal = false;
-    this.gap = 0;
     this.min = {
       x: 0,
       y: 0
@@ -36,7 +34,6 @@ class Bump {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
     this.min = min ?? {
       x: 0,
       y: 0
@@ -79,34 +76,34 @@ class Bump {
     const [p0, p1, p2, p3] = this.points;
 
     // 0 is the top-left corner
-    this.context.moveTo(p0.x + this.gap, p0.y);
-    this.context.lineTo(p0.x + this.gap, p0.y);
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
 
     // Bezier curve to point 1
-    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x - this.gap, p1.y);
+    this.context.bezierCurveTo((p0.x + p1.x) / 2, p0.y, (p0.x + p1.x) / 2, p1.y, p1.x, p1.y);
 
     // Line to point 2
-    this.context.lineTo(p2.x - this.gap, p2.y);
+    this.context.lineTo(p2.x, p2.y);
 
     // Bezier curve back to point 3
-    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x + this.gap, p3.y);
+    this.context.bezierCurveTo((p2.x + p3.x) / 2, p2.y, (p2.x + p3.x) / 2, p3.y, p3.x, p3.y);
     this.context.closePath();
   }
   drawVerticalPath() {
     const [p0, p1, p2, p3] = this.points;
 
     // 0 is the top-right corner
-    this.context.moveTo(p0.x, p0.y + this.gap);
-    this.context.lineTo(p0.x, p0.y + this.gap);
+    this.context.moveTo(p0.x, p0.y);
+    this.context.lineTo(p0.x, p0.y);
 
     // Bezier curve to point 1
-    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y - this.gap);
+    this.context.bezierCurveTo(p0.x, (p0.y + p1.y) / 2, p1.x, (p0.y + p1.y) / 2, p1.x, p1.y);
 
     // Line to point 2
-    this.context.lineTo(p2.x, p2.y - this.gap);
+    this.context.lineTo(p2.x, p2.y);
 
     // Bezier curve back to point 3
-    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y + this.gap);
+    this.context.bezierCurveTo(p2.x, (p2.y + p3.y) / 2, p3.x, (p2.y + p3.y) / 2, p3.x, p3.y);
     this.context.closePath();
   }
 }

package/FunnelChart/curves/linear.d.ts

@@ -3,7 +3,7 @@ import { CurveOptions } from "./curve.types.js";
 /**
  * This is a custom "linear" curve generator.
  * It draws straight lines for the 4 provided points,
- * with the option to add a gap between sections while also properly handling the border radius.
+ * with the option to properly handling the border radius.
  *
  * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js

package/FunnelChart/curves/linear.js

@@ -11,7 +11,7 @@ var _utils = require("./utils");
 /**
  * This is a custom "linear" curve generator.
  * It draws straight lines for the 4 provided points,
- * with the option to add a gap between sections while also properly handling the border radius.
+ * with the option to properly handling the border radius.
  *
  * The implementation is based on the d3-shape linear curve generator.
  * https://github.com/d3/d3-shape/blob/a82254af78f08799c71d7ab25df557c4872a3c51/src/curve/linear.js
@@ -47,7 +47,7 @@ class Linear {
     this.pointShape = 'square';
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -118,21 +118,19 @@ class Linear {
 
     // Add gaps where they are needed.
     this.points = this.points.map((point, index) => {
-      const slopeStart = this.points.at(index <= 1 ? 0 : 2);
-      const slopeEnd = this.points.at(index <= 1 ? 1 : 3);
+      const slopeStart = this.points.at(index <= 1 ? 0 : 3);
+      const slopeEnd = this.points.at(index <= 1 ? 1 : 2);
       if (this.isHorizontal) {
-        const yGetter = (0, _utils.lerpY)(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x - this.gap, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
+        const yGetter = (0, _utils.lerpY)(slopeStart.x - this.gap, slopeStart.y, slopeEnd.x, slopeEnd.y);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
-      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y - this.gap);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
+      const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y - this.gap, slopeEnd.x, slopeEnd.y);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
     if (this.pointShape === 'sharp') {
@@ -140,23 +138,28 @@ class Linear {
       // Else the algorithm will break.
       const isLastSection = this.position === this.sections - 1;
       const isFirstSection = this.position === 0;
+      let firstPoint = null;
+      let secondPoint = null;
       if (isFirstSection && this.isIncreasing) {
-        this.points = [this.isHorizontal ? {
-          x: this.max.x + this.gap,
-          y: (this.max.y + this.min.y) / 2
-        } : {
-          x: (this.max.x + this.min.x) / 2,
-          y: this.max.y + this.gap
-        }, this.points[1], this.points[2]];
+        firstPoint = this.points[1];
+        secondPoint = this.points[2];
       }
       if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.isHorizontal ? {
-          x: this.max.x - this.gap,
+        firstPoint = this.points[3];
+        secondPoint = this.points[0];
+      }
+      if (firstPoint && secondPoint) {
+        this.points = [
+        // Sharp point at the start
+        this.isHorizontal ? {
+          x: this.max.x,
           y: (this.max.y + this.min.y) / 2
         } : {
           x: (this.max.x + this.min.x) / 2,
-          y: this.max.y - this.gap
-        }, this.points[3]];
+          y: this.max.y
+        },
+        // Then other points
+        firstPoint, secondPoint];
       }
     }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());

package/FunnelChart/curves/pyramid.js

@@ -102,7 +102,7 @@ class Pyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       if (this.isHorizontal) {
         const slopeEnd = {
@@ -114,10 +114,9 @@ class Pyramid {
           y: this.max.y
         };
         const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         return {
-          x: xGap,
-          y: yGetter(xGap)
+          x: point.x,
+          y: yGetter(point.x)
         };
       }
       const slopeEnd = {
@@ -129,10 +128,9 @@ class Pyramid {
         y: this.min.y
       } : this.min;
       const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       return {
-        x: xGetter(yGap),
-        y: yGap
+        x: xGetter(point.y),
+        y: point.y
       };
     });
 
@@ -140,13 +138,11 @@ class Pyramid {
     // Else the algorithm will break.
     const isLastSection = this.position === this.sections - 1;
     const isFirstSection = this.position === 0;
-    if (this.gap <= 0) {
-      if (isFirstSection && this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[2]];
-      }
-      if (isLastSection && !this.isIncreasing) {
-        this.points = [this.points[0], this.points[1], this.points[3]];
-      }
+    if (isFirstSection && this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[2]];
+    }
+    if (isLastSection && !this.isIncreasing) {
+      this.points = [this.points[0], this.points[1], this.points[3]];
     }
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());
   }

package/FunnelChart/curves/step-pyramid.js

@@ -42,7 +42,7 @@ class StepPyramid {
     this.points = [];
     this.context = context;
     this.isHorizontal = isHorizontal ?? false;
-    this.gap = (gap ?? 0) / 2;
+    this.gap = gap ?? 0;
     this.position = position ?? 0;
     this.sections = sections ?? 1;
     this.borderRadius = borderRadius ?? 0;
@@ -156,25 +156,23 @@ class StepPyramid {
       return;
     }
 
-    // Add gaps where they are needed.
+    // Replace funnel points by pyramids ones.
     this.points = this.points.map((point, index) => {
       const slopeStart = this.slopeStart(index);
       const slopeEnd = this.slopeEnd(index);
       if (this.isHorizontal) {
         const yGetter = (0, _utils.lerpY)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-        const xGap = point.x + (index === 0 || index === 3 ? this.gap : -this.gap);
         const xInitial = this.initialX(index);
         return {
-          x: xGap,
+          x: point.x,
           y: yGetter(xInitial)
         };
       }
       const xGetter = (0, _utils.lerpX)(slopeStart.x, slopeStart.y, slopeEnd.x, slopeEnd.y);
-      const yGap = point.y + (index === 0 || index === 3 ? this.gap : -this.gap);
       const yInitial = this.initialY(index);
       return {
         x: xGetter(yInitial),
-        y: yGap
+        y: point.y
       };
     });
     (0, _borderRadiusPolygon.borderRadiusPolygon)(this.context, this.points, this.getBorderRadius());