@mui/x-charts 8.23.0 → 8.24.0

package/BarChart/BatchBarPlot/BatchBarPlot.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BatchBarPlot = BatchBarPlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _barClasses = require("../barClasses");
+var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
+var _useRegisterItemClickHandlers = require("../useRegisterItemClickHandlers");
+var _useCreateBarPaths = require("./useCreateBarPaths");
+var _BarGroup = require("./BarGroup");
+var _useRegisterPointerInteractions = require("../../internals/plugins/featurePlugins/shared/useRegisterPointerInteractions");
+var _useChartCartesianAxisPosition = require("../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
+var _jsxRuntime = require("react/jsx-runtime");
+function BatchBarPlot({
+  completedData,
+  borderRadius = 0,
+  onItemClick,
+  skipAnimation = false
+}) {
+  const prevCursorRef = React.useRef(null);
+  const svgRef = (0, _hooks.useSvgRef)();
+  const onItemEnter = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current == null) {
+      prevCursorRef.current = svg.style.cursor;
+      // eslint-disable-next-line react-compiler/react-compiler
+      svg.style.cursor = 'pointer';
+    }
+  } : undefined;
+  const onItemLeave = onItemClick ? () => {
+    const svg = svgRef.current;
+    if (!svg) {
+      return;
+    }
+    if (prevCursorRef.current != null) {
+      svg.style.cursor = prevCursorRef.current;
+      prevCursorRef.current = null;
+    }
+  } : undefined;
+  (0, _useRegisterPointerInteractions.useRegisterPointerInteractions)(_useChartCartesianAxisPosition.selectorBarItemAtPosition, onItemEnter, onItemLeave);
+  (0, _useRegisterItemClickHandlers.useRegisterItemClickHandlers)(onItemClick);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: completedData.map(series => /*#__PURE__*/(0, _jsxRuntime.jsx)(SeriesBatchPlot, {
+      series: series,
+      borderRadius: borderRadius,
+      skipAnimation: skipAnimation
+    }, series.seriesId))
+  });
+}
+const MemoFadedHighlightedBars = /*#__PURE__*/React.memo(FadedHighlightedBars);
+if (process.env.NODE_ENV !== "production") MemoFadedHighlightedBars.displayName = "MemoFadedHighlightedBars";
+function SeriesBatchPlot({
+  series,
+  borderRadius,
+  skipAnimation
+}) {
+  const classes = (0, _barClasses.useUtilityClasses)();
+  const {
+    store
+  } = (0, _useChartContext.useChartContext)();
+  const isSeriesHighlighted = store.use(_useChartHighlight.selectorChartIsSeriesHighlighted, series.seriesId);
+  const isSeriesFaded = store.use(_useChartHighlight.selectorChartIsSeriesFaded, series.seriesId);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarGroup.BarGroup, {
+      className: classes.series,
+      "data-series": series.seriesId,
+      layout: series.layout,
+      xOrigin: series.xOrigin,
+      yOrigin: series.yOrigin,
+      skipAnimation: skipAnimation,
+      "data-faded": isSeriesFaded || undefined,
+      "data-highlighted": isSeriesHighlighted || undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BatchBarSeriesPlot, {
+        processedSeries: series,
+        borderRadius: borderRadius
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoFadedHighlightedBars, {
+      processedSeries: series,
+      borderRadius: borderRadius
+    })]
+  });
+}
+function BatchBarSeriesPlot({
+  processedSeries,
+  borderRadius
+}) {
+  const paths = (0, _useCreateBarPaths.useCreateBarPaths)(processedSeries, borderRadius);
+  const children = [];
+  let i = 0;
+  for (const [fill, dArray] of paths.entries()) {
+    for (const d of dArray) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: fill,
+        d: d
+      }, i));
+      i += 1;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: children
+  });
+}
+function FadedHighlightedBars({
+  processedSeries,
+  borderRadius
+}) {
+  const {
+    store
+  } = (0, _useChartContext.useChartContext)();
+  const seriesHighlightedDataIndex = store.use(_useChartHighlight.selectorChartSeriesHighlightedItem, processedSeries.seriesId);
+  const seriesUnfadedDataIndex = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, processedSeries.seriesId);
+  const seriesHighlightedItem = seriesHighlightedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesHighlightedDataIndex) || null : null;
+  const seriesUnfadedItem = seriesUnfadedDataIndex != null ? processedSeries.data.find(v => v.dataIndex === seriesUnfadedDataIndex) || null : null;
+  const siblings = [];
+  if (seriesHighlightedItem != null) {
+    siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: seriesHighlightedItem.color,
+      filter: "brightness(120%)",
+      "data-highlighted": true,
+      d: (0, _useCreateBarPaths.createPath)(seriesHighlightedItem, borderRadius)
+    }, `highlighted-${processedSeries.seriesId}`));
+  }
+  if (seriesUnfadedItem != null) {
+    siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: seriesUnfadedItem.color,
+      d: (0, _useCreateBarPaths.createPath)(seriesUnfadedItem, borderRadius)
+    }, `unfaded-${seriesUnfadedItem.seriesId}`));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: siblings
+  });
+}

package/BarChart/BatchBarPlot/index.d.ts

@@ -0,0 +1 @@
+export { BatchBarPlot } from "./BatchBarPlot.js";

package/BarChart/BatchBarPlot/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BatchBarPlot", {
+  enumerable: true,
+  get: function () {
+    return _BatchBarPlot.BatchBarPlot;
+  }
+});
+var _BatchBarPlot = require("./BatchBarPlot");

package/BarChart/BatchBarPlot/useCreateBarPaths.d.ts

@@ -0,0 +1,8 @@
+import type { ProcessedBarData, ProcessedBarSeriesData } from "../types.js";
+export declare function createPath(barData: ProcessedBarData, borderRadius: number): string;
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+export declare function useCreateBarPaths(seriesData: ProcessedBarSeriesData, borderRadius: number): Map<string, string[]>;

package/BarChart/BatchBarPlot/useCreateBarPaths.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPath = createPath;
+exports.useCreateBarPaths = useCreateBarPaths;
+var _appendAtKey = require("../../internals/appendAtKey");
+const MAX_POINTS_PER_PATH = 1000;
+function generateBarPath(x, y, width, height, topLeftBorderRadius, topRightBorderRadius, bottomRightBorderRadius, bottomLeftBorderRadius) {
+  const tLBR = Math.min(topLeftBorderRadius, width / 2, height / 2);
+  const tRBR = Math.min(topRightBorderRadius, width / 2, height / 2);
+  const bRBR = Math.min(bottomRightBorderRadius, width / 2, height / 2);
+  const bLBR = Math.min(bottomLeftBorderRadius, width / 2, height / 2);
+  return `M${x + tLBR},${y}
+   h${width - tLBR - tRBR}
+   a${tRBR},${tRBR} 0 0 1 ${tRBR},${tRBR}
+   v${height - tRBR - bRBR}
+   a${bRBR},${bRBR} 0 0 1 -${bRBR},${bRBR}
+   h-${width - bRBR - bLBR}
+   a${bLBR},${bLBR} 0 0 1 -${bLBR},-${bLBR}
+   v-${height - bLBR - tLBR}
+   a${tLBR},${tLBR} 0 0 1 ${tLBR},-${tLBR}
+   Z`;
+}
+function createPath(barData, borderRadius) {
+  return generateBarPath(barData.x, barData.y, barData.width, barData.height, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'top' ? borderRadius : 0, barData.borderRadiusSide === 'right' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0, barData.borderRadiusSide === 'left' || barData.borderRadiusSide === 'bottom' ? borderRadius : 0);
+}
+
+/**
+ * Hook that creates bar paths for a given series data. Used by the batch bar renderer.
+ * @param seriesData
+ * @param borderRadius
+ */
+function useCreateBarPaths(seriesData, borderRadius) {
+  const paths = new Map();
+  const temporaryPaths = new Map();
+  for (let j = 0; j < seriesData.data.length; j += 1) {
+    const barData = seriesData.data[j];
+    const pathString = createPath(barData, borderRadius);
+    const tempPath = (0, _appendAtKey.appendAtKey)(temporaryPaths, barData.color, pathString);
+    if (tempPath.length >= MAX_POINTS_PER_PATH) {
+      (0, _appendAtKey.appendAtKey)(paths, barData.color, tempPath.join(''));
+      temporaryPaths.delete(barData.color);
+    }
+  }
+  for (const [fill, tempPath] of temporaryPaths.entries()) {
+    if (tempPath.length > 0) {
+      (0, _appendAtKey.appendAtKey)(paths, fill, tempPath.join(''));
+    }
+  }
+  return paths;
+}

package/BarChart/FocusedBar.js

@@ -29,7 +29,11 @@ function FocusedBar(props) {
   if (focusedItem === null || focusedItem.type !== 'bar' || !barSeries) {
     return null;
   }
-  const series = barSeries?.series[focusedItem.seriesId];
+  const series = barSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
+    return null;
+  }
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const xAxisConfig = xAxis[xAxisId];

package/BarChart/IndividualBarPlot.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type BarPlotSlotProps, type BarPlotSlots } from "./BarPlot.js";
+import { type BarItemIdentifier } from "../models/index.js";
+import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
+export interface IndividualBarPlotProps {
+  completedData: ProcessedBarSeriesData[];
+  masksData: MaskData[];
+  borderRadius?: number;
+  skipAnimation?: boolean;
+  onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, barItemIdentifier: BarItemIdentifier) => void;
+  slotProps?: BarPlotSlotProps;
+  slots?: BarPlotSlots;
+}
+export declare function IndividualBarPlot({
+  completedData,
+  masksData,
+  borderRadius,
+  onItemClick,
+  skipAnimation,
+  ...other
+}: IndividualBarPlotProps): import("react/jsx-runtime").JSX.Element;

package/BarChart/IndividualBarPlot.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndividualBarPlot = IndividualBarPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _BarElement = require("./BarElement");
+var _barClasses = require("./barClasses");
+var _BarClipPath = require("./BarClipPath");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["completedData", "masksData", "borderRadius", "onItemClick", "skipAnimation"];
+function IndividualBarPlot(_ref) {
+  let {
+      completedData,
+      masksData,
+      borderRadius,
+      onItemClick,
+      skipAnimation
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _barClasses.useUtilityClasses)();
+  const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [!withoutBorderRadius && masksData.map(({
+      id,
+      x,
+      y,
+      xOrigin,
+      yOrigin,
+      width,
+      height,
+      hasPositive,
+      hasNegative,
+      layout
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarClipPath.BarClipPath, {
+        maskId: id,
+        borderRadius: borderRadius,
+        hasNegative: hasNegative,
+        hasPositive: hasPositive,
+        layout: layout,
+        x: x,
+        y: y,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false
+      }, id);
+    }), completedData.map(({
+      seriesId,
+      layout,
+      xOrigin,
+      yOrigin,
+      data
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          x,
+          y,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
+    })]
+  });
+}

package/BarChart/seriesConfig/bar/getSeriesWithDefaultValues.d.ts

@@ -9,7 +9,7 @@ export declare function getSeriesWithDefaultValues(seriesData: AllSeriesType<'ba
   layout?: "horizontal" | "vertical";
   stackOffset?: import("../../../index.js").StackOffsetType;
   minBarSize?: number;
-  barLabel?: "value" | ((item: import("../../index.js").BarItem, context: import("../../index.js").BarLabelContext) => string | null | undefined);
+  barLabel?: "value" | ((item: import("@mui/x-charts/BarChart").BarItem, context: import("@mui/x-charts/BarChart").BarLabelContext) => string | null | undefined);
   barLabelPlacement?: "center" | "outside";
   valueFormatter?: import("../../../internals/index.js").SeriesValueFormatter<number | null> | undefined;
   highlightScope?: import("../../../index.js").HighlightScope;

package/BarChart/seriesConfig/bar/legend.js

@@ -16,6 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'bar',
       markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,

package/BarChart/seriesConfig/index.js

@@ -14,6 +14,7 @@ var _keyboardFocusHandler = _interopRequireDefault(require("./bar/keyboardFocusH
 var _tooltip = _interopRequireWildcard(require("./bar/tooltip"));
 var _tooltipPosition = _interopRequireDefault(require("./bar/tooltipPosition"));
 var _getSeriesWithDefaultValues = require("./bar/getSeriesWithDefaultValues");
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const barSeriesConfig = exports.barSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -24,5 +25,6 @@ const barSeriesConfig = exports.barSeriesConfig = {
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.getSeriesWithDefaultValues,
-  keyboardFocusHandler: _keyboardFocusHandler.default
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/BarChart/types.d.ts

@@ -15,12 +15,14 @@ export interface ProcessedBarSeriesData {
   xOrigin: number;
   yOrigin: number;
 }
+export type BorderRadiusSide = 'top' | 'bottom' | 'left' | 'right';
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
   value: number | null;
   maskId: string;
+  borderRadiusSide?: BorderRadiusSide;
 }
 export interface MaskData extends AnimationData {
   id: string;

package/BarChart/useBarChartProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BarChartProps } from "./BarChart.js";
+import { type BarChartProps, type BarSeries } from "./BarChart.js";
 import { type ChartContainerProps } from "../ChartContainer/index.js";
 import { type BarPlotProps } from "./BarPlot.js";
 import { type ChartsGridProps } from "../ChartsGrid/index.js";
@@ -10,6 +10,10 @@ import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
+export interface UseBarChartPropsExtensions {}
+export type UseBarChartProps = Omit<BarChartProps, 'series'> & Omit<{
+  series: ReadonlyArray<BarSeries>;
+}, keyof UseBarChartPropsExtensions> & UseBarChartPropsExtensions;
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,7 +21,7 @@ import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
  * @param props The input props for BarChart
  * @returns An object with props for the children components of BarChart
  */
-export declare const useBarChartProps: (props: BarChartProps) => {
+export declare const useBarChartProps: (props: UseBarChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartContainerProps: ChartContainerProps<"bar", BarChartPluginSignatures>;
   barPlotProps: BarPlotProps;

package/BarChart/useBarChartProps.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _BarChart = require("./BarChart.plugins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -46,7 +46,8 @@ const useBarChartProps = props => {
       borderRadius,
       barLabel,
       className,
-      brushConfig
+      brushConfig,
+      renderer
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -111,6 +112,7 @@ const useBarChartProps = props => {
     slots,
     slotProps,
     borderRadius,
+    renderer,
     barLabel
   };
   const gridProps = {

package/BarChart/useBarPlotData.d.ts

@@ -1,7 +1,7 @@
 import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
-import { type ChartDrawingArea } from "../hooks/index.js";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
 import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+import { type ChartDrawingArea } from "../hooks/useDrawingArea.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];

package/BarChart/useBarPlotData.js

@@ -7,19 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useBarPlotData = useBarPlotData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _getColor = _interopRequireDefault(require("./seriesConfig/bar/getColor"));
-var _hooks = require("../hooks");
+var _useAxis = require("../hooks/useAxis");
 var _checkBarChartScaleErrors = require("./checkBarChartScaleErrors");
 var _useBarSeries = require("../hooks/useBarSeries");
 var _getBarDimensions = require("../internals/getBarDimensions");
+var _useChartId = require("../hooks/useChartId");
 function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = (0, _useBarSeries.useBarSeriesContext)() ?? {
     series: {},
     stackingGroups: [],
     seriesOrder: []
   };
-  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
-  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
-  const chartId = (0, _hooks.useChartId)();
+  const defaultXAxisId = (0, _useAxis.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _useAxis.useYAxes)().yAxisIds[0];
+  const chartId = (0, _useChartId.useChartId)();
   const {
     series,
     stackingGroups
@@ -32,6 +33,8 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
+    const lastNegativePerIndex = new Map();
+    const lastPositivePerIndex = new Map();
     return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
@@ -73,6 +76,22 @@ function useBarPlotData(drawingArea, xAxes, yAxes) {
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
           continue;
         }
+        const lastNegative = lastNegativePerIndex.get(dataIndex);
+        const lastPositive = lastPositivePerIndex.get(dataIndex);
+        const sign = (reverse ? -1 : 1) * Math.sign(result.value ?? 0);
+        if (sign > 0) {
+          if (lastPositive) {
+            delete lastPositive.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'top' : 'right';
+          lastPositivePerIndex.set(dataIndex, result);
+        } else if (sign < 0) {
+          if (lastNegative) {
+            delete lastNegative.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'bottom' : 'left';
+          lastNegativePerIndex.set(dataIndex, result);
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,

package/BarChart/useRegisterItemClickHandlers.d.ts

@@ -0,0 +1,6 @@
+import { type BarItemIdentifier } from "../models/seriesType/index.js";
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+export declare function useRegisterItemClickHandlers(onItemClick: ((event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void) | undefined): void;

package/BarChart/useRegisterItemClickHandlers.js

@@ -0,0 +1,72 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterItemClickHandlers = useRegisterItemClickHandlers;
+var React = _interopRequireWildcard(require("react"));
+var _useSvgRef = require("../hooks/useSvgRef");
+var _ChartProvider = require("../context/ChartProvider");
+var _getSVGPoint = require("../internals/getSVGPoint");
+var _useStore = require("../internals/store/useStore");
+var _useChartCartesianAxisPosition = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+function useRegisterItemClickHandlers(onItemClick) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const store = (0, _useStore.useStore)();
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !onItemClick) {
+      return undefined;
+    }
+    let lastPointerUp = null;
+    const onClick = function onClick(event) {
+      let point = event;
+
+      /* The click event doesn't contain decimal values in clientX/Y, but the pointermove does.
+       * This caused a problem when rendering many bars that were thinner than a pixel where the tooltip or the highlight
+       * would refer to a different bar than the click since those rely on the pointermove event.
+       * As a fix, we use the pointerup event to get the decimal values and check if the pointer up event was close enough
+       * to the click event (1px difference in each direction); if so, then we can use the pointerup's clientX/Y; if not,
+       * we default to the click event's clientX/Y. */
+      if (lastPointerUp) {
+        if (Math.abs(event.clientX - lastPointerUp.clientX) <= 1 && Math.abs(event.clientY - lastPointerUp.clientY) <= 1) {
+          point = {
+            clientX: lastPointerUp.clientX,
+            clientY: lastPointerUp.clientY
+          };
+        }
+      }
+      lastPointerUp = null;
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, point);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        return;
+      }
+      const item = (0, _useChartCartesianAxisPosition.selectorBarItemAtPosition)(store.state, svgPoint);
+      if (item) {
+        onItemClick(event, {
+          type: 'bar',
+          seriesId: item.seriesId,
+          dataIndex: item.dataIndex
+        });
+      }
+    };
+    const onPointerUp = function onPointerUp(event) {
+      lastPointerUp = event;
+    };
+    element.addEventListener('click', onClick);
+    element.addEventListener('pointerup', onPointerUp);
+    return () => {
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('pointerup', onPointerUp);
+    };
+  }, [instance, onItemClick, store, svgRef]);
+}