From 481887026806e2495b3c993c5b8109c9f2651de3 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Wed, 11 Oct 2023 13:59:42 +0300
Subject: [PATCH 1/8] fix

---
 packages/x-charts/src/LineChart/LineChart.tsx |   2 +
 packages/x-charts/src/OnClickHandler.tsx      | 114 ++++++++++++++++++
 packages/x-charts/src/PieChart/PieChart.tsx   |   2 +
 3 files changed, 118 insertions(+)
 create mode 100644 packages/x-charts/src/OnClickHandler.tsx

diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index e0ebdcc3ce804..a61e9b7ce0114 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -27,6 +27,7 @@ import {
   LineHighlightPlotSlotsComponent,
   LineHighlightPlotSlotComponentProps,
 } from './LineHighlightPlot';
+import OnCLick from '../OnClickHandler';
 
 export interface LineChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -139,6 +140,7 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref
       <MarkPlot slots={slots} slotProps={slotProps} />
       <LineHighlightPlot slots={slots} slotProps={slotProps} />
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
+      <OnCLick {...tooltip} />
       <ChartsTooltip {...tooltip} />
       <ChartsClipPath id={clipPathId} />
       {children}
diff --git a/packages/x-charts/src/OnClickHandler.tsx b/packages/x-charts/src/OnClickHandler.tsx
new file mode 100644
index 0000000000000..c344667c25996
--- /dev/null
+++ b/packages/x-charts/src/OnClickHandler.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { SVGContext } from './context/DrawingProvider';
+import {
+  AxisInteractionData,
+  InteractionContext,
+  ItemInteractionData,
+} from './context/InteractionProvider';
+import { TriggerOptions } from './ChartsTooltip/utils';
+import { CartesianChartSeriesType, ChartSeriesType } from './models/seriesType/config';
+import { FormattedSeries, SeriesContext } from './context/SeriesContextProvider';
+import { CartesianContext } from './context/CartesianContextProvider';
+
+function getTootipHasData(
+  trigger: TriggerOptions,
+  displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>,
+): boolean {
+  if (trigger === 'item') {
+    return displayedData !== null;
+  }
+
+  const hasAxisXData = (displayedData as AxisInteractionData).x !== null;
+  const hasAxisYData = (displayedData as AxisInteractionData).y !== null;
+
+  return hasAxisXData || hasAxisYData;
+}
+
+interface OnClickHandlerProps {
+  trigger: 'item' | 'none' | 'axis';
+  onClick: (event: MouseEvent, series: FormattedSeries, itemData: any) => void;
+}
+
+function OnClick({ trigger, onClick }: OnClickHandlerProps) {
+  const svgRef = React.useContext(SVGContext);
+  const { item, axis } = React.useContext(InteractionContext);
+
+  const series = React.useContext(SeriesContext);
+
+  const { xAxisIds, yAxisIds } = React.useContext(CartesianContext);
+
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+    const handleMouseDown = (event: MouseEvent) => {
+      event.preventDefault();
+      // if (onClick == null) return;
+
+      if (trigger === 'item') {
+        const displayedData = item as ItemInteractionData<ChartSeriesType>;
+        const tooltipHasData = getTootipHasData(trigger, displayedData);
+
+        if (tooltipHasData) {
+          const data = series[displayedData.type]!.series[displayedData.seriesId];
+          const result =
+            data.type === 'pie'
+              ? {
+                  color: data.data[displayedData.dataIndex!],
+                  displayedLabel: data.data[displayedData.dataIndex!],
+                }
+              : {
+                  color: data.color,
+                  displayedLabel: data.label,
+                };
+
+          console.log(displayedData);
+          console.log(result.displayedLabel);
+          onClick(event, result.displayedLabel, displayedData);
+        }
+      } else {
+        const displayedData = axis as AxisInteractionData;
+        const tooltipHasData = getTootipHasData(trigger, displayedData);
+        if (tooltipHasData) {
+          const isXaxis = (displayedData.x && displayedData.x.index) !== undefined;
+          const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+          const dataIndex = isXaxis
+            ? displayedData.x && displayedData.x.index
+            : displayedData.y && displayedData.y.index;
+          const axisValue = isXaxis
+            ? displayedData.x && displayedData.x.value
+            : displayedData.y && displayedData.y.value;
+
+          if (dataIndex == null) {
+            return;
+          }
+          const rep: any[] = [];
+          (
+            Object.keys(series).filter((seriesType) =>
+              ['bar', 'line', 'scatter'].includes(seriesType),
+            ) as CartesianChartSeriesType[]
+          ).forEach((seriesType) => {
+            series[seriesType]!.seriesOrder.forEach((seriesId) => {
+              const seriesItem = series[seriesType]!.series[seriesId];
+              const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
+              if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+                rep.push(series[seriesType]!.series[seriesId]);
+              }
+            });
+          });
+          console.log(rep);
+          console.log(displayedData);
+        }
+      }
+    };
+
+    element.addEventListener('mousedown', handleMouseDown);
+    return () => {
+      element.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [axis, item, series, svgRef, trigger, xAxisIds, yAxisIds]);
+
+  return null;
+}
+export default OnClick;
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 798be2e4b4652..178ae3d5db5f3 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -19,6 +19,7 @@ import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHigh
 import { PiePlot, PiePlotProps, PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+import OnCLick from '../OnClickHandler';
 
 export interface PieChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -107,6 +108,7 @@ function PieChart(props: PieChartProps) {
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <ChartsAxisHighlight {...axisHighlight} />
       <ChartsTooltip {...tooltip} />
+      <OnCLick {...tooltip} onClick={() => {}} />
       {children}
     </ResponsiveChartContainer>
   );

From bbb0d1d66909510c25ab27ec085951dfe1b7b7e4 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Thu, 12 Oct 2023 14:06:45 +0300
Subject: [PATCH 2/8] events added

---
 packages/x-charts/src/BarChart/BarChart.tsx   |  4 ++
 packages/x-charts/src/LineChart/LineChart.tsx |  6 ++-
 packages/x-charts/src/OnClickHandler.tsx      | 43 +++++++------------
 .../src/ScatterChart/ScatterChart.tsx         |  4 ++
 .../src/SparkLineChart/SparkLineChart.tsx     |  5 +++
 5 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index 50e4801625316..933626679f495 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -20,6 +20,7 @@ import {
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPath } from '../ChartsClipPath';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+import OnClickHandler from '../OnClickHandler';
 
 export interface BarChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -48,6 +49,7 @@ export interface BarChartProps
    */
   slotProps?: BarChartSlotComponentProps;
   layout?: BarSeriesType['layout'];
+  onClick?: (event: any, series: any, itemData: any) => void;
 }
 
 const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
@@ -72,6 +74,7 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
     children,
     slots,
     slotProps,
+    onClick,
   } = props;
 
   const id = useId();
@@ -133,6 +136,7 @@ const BarChart = React.forwardRef(function BarChart(props: BarChartProps, ref) {
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <ChartsAxisHighlight {...defaultizedAxisHighlight} />
       <ChartsTooltip {...tooltip} slots={slots} slotProps={slotProps} />
+      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
       <ChartsClipPath id={clipPathId} />
       {children}
     </ResponsiveChartContainer>
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index a61e9b7ce0114..02c37995d628f 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -27,7 +27,7 @@ import {
   LineHighlightPlotSlotsComponent,
   LineHighlightPlotSlotComponentProps,
 } from './LineHighlightPlot';
-import OnCLick from '../OnClickHandler';
+import OnClickHandler from '../OnClickHandler';
 
 export interface LineChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -65,6 +65,7 @@ export interface LineChartProps
    * @default {}
    */
   slotProps?: LineChartSlotComponentProps;
+  onClick?: (event: MouseEvent, series: any, itemData: any) => void;
 }
 const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref) {
   const {
@@ -88,6 +89,7 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref
     children,
     slots,
     slotProps,
+    onClick,
   } = props;
 
   const id = useId();
@@ -140,7 +142,7 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref
       <MarkPlot slots={slots} slotProps={slotProps} />
       <LineHighlightPlot slots={slots} slotProps={slotProps} />
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
-      <OnCLick {...tooltip} />
+      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
       <ChartsTooltip {...tooltip} />
       <ChartsClipPath id={clipPathId} />
       {children}
diff --git a/packages/x-charts/src/OnClickHandler.tsx b/packages/x-charts/src/OnClickHandler.tsx
index c344667c25996..3f42080934164 100644
--- a/packages/x-charts/src/OnClickHandler.tsx
+++ b/packages/x-charts/src/OnClickHandler.tsx
@@ -7,7 +7,7 @@ import {
 } from './context/InteractionProvider';
 import { TriggerOptions } from './ChartsTooltip/utils';
 import { CartesianChartSeriesType, ChartSeriesType } from './models/seriesType/config';
-import { FormattedSeries, SeriesContext } from './context/SeriesContextProvider';
+import { SeriesContext } from './context/SeriesContextProvider';
 import { CartesianContext } from './context/CartesianContextProvider';
 
 function getTootipHasData(
@@ -25,11 +25,11 @@ function getTootipHasData(
 }
 
 interface OnClickHandlerProps {
-  trigger: 'item' | 'none' | 'axis';
-  onClick: (event: MouseEvent, series: FormattedSeries, itemData: any) => void;
+  trigger: any;
+  onClick?: (event: any, series: any, itemData: any) => void;
 }
 
-function OnClick({ trigger, onClick }: OnClickHandlerProps) {
+function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
   const svgRef = React.useContext(SVGContext);
   const { item, axis } = React.useContext(InteractionContext);
 
@@ -44,7 +44,9 @@ function OnClick({ trigger, onClick }: OnClickHandlerProps) {
     }
     const handleMouseDown = (event: MouseEvent) => {
       event.preventDefault();
-      // if (onClick == null) return;
+      if (onClick == null) {
+        return;
+      }
 
       if (trigger === 'item') {
         const displayedData = item as ItemInteractionData<ChartSeriesType>;
@@ -52,20 +54,10 @@ function OnClick({ trigger, onClick }: OnClickHandlerProps) {
 
         if (tooltipHasData) {
           const data = series[displayedData.type]!.series[displayedData.seriesId];
-          const result =
-            data.type === 'pie'
-              ? {
-                  color: data.data[displayedData.dataIndex!],
-                  displayedLabel: data.data[displayedData.dataIndex!],
-                }
-              : {
-                  color: data.color,
-                  displayedLabel: data.label,
-                };
+          const displayedLabel =
+            data.type === 'pie' ? data.data[displayedData.dataIndex!] : data.label;
 
-          console.log(displayedData);
-          console.log(result.displayedLabel);
-          onClick(event, result.displayedLabel, displayedData);
+          onClick(event, displayedLabel, displayedData);
         }
       } else {
         const displayedData = axis as AxisInteractionData;
@@ -76,14 +68,11 @@ function OnClick({ trigger, onClick }: OnClickHandlerProps) {
           const dataIndex = isXaxis
             ? displayedData.x && displayedData.x.index
             : displayedData.y && displayedData.y.index;
-          const axisValue = isXaxis
-            ? displayedData.x && displayedData.x.value
-            : displayedData.y && displayedData.y.value;
 
           if (dataIndex == null) {
             return;
           }
-          const rep: any[] = [];
+          const displayedLabel: any[] = [];
           (
             Object.keys(series).filter((seriesType) =>
               ['bar', 'line', 'scatter'].includes(seriesType),
@@ -93,12 +82,12 @@ function OnClick({ trigger, onClick }: OnClickHandlerProps) {
               const seriesItem = series[seriesType]!.series[seriesId];
               const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
               if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-                rep.push(series[seriesType]!.series[seriesId]);
+                displayedLabel.push(series[seriesType]!.series[seriesId]);
               }
             });
           });
-          console.log(rep);
-          console.log(displayedData);
+
+          onClick(event, displayedLabel, displayedData);
         }
       }
     };
@@ -107,8 +96,8 @@ function OnClick({ trigger, onClick }: OnClickHandlerProps) {
     return () => {
       element.removeEventListener('mousedown', handleMouseDown);
     };
-  }, [axis, item, series, svgRef, trigger, xAxisIds, yAxisIds]);
+  }, [axis, item, series, svgRef, trigger, xAxisIds, yAxisIds, onClick]);
 
   return null;
 }
-export default OnClick;
+export default OnClickHandler;
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index ad627a5f4a3b3..effd28185e67c 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -21,6 +21,7 @@ import {
 } from '../ChartsLegend';
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+import OnClickHandler from '../OnClickHandler';
 
 export interface ScatterChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -48,6 +49,7 @@ export interface ScatterChartProps
    * @default {}
    */
   slotProps?: ScatterChartSlotComponentProps;
+  onClick?: (event: any, series: any, itemData: any) => void;
 }
 
 const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartProps, ref) {
@@ -70,6 +72,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartP
     children,
     slots,
     slotProps,
+    onClick,
   } = props;
   return (
     <ResponsiveChartContainer
@@ -95,6 +98,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartP
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <ChartsAxisHighlight x="none" y="none" {...axisHighlight} />
       <ChartsTooltip trigger="item" {...tooltip} />
+      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
       {children}
     </ResponsiveChartContainer>
   );
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 3bf664374ab02..128d0aa2c9176 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -20,6 +20,7 @@ import {
   LineHighlightPlotSlotComponentProps,
 } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlotsComponent, BarPlotSlotComponentProps } from '../BarChart/BarPlot';
+import OnClickHandler from '../OnClickHandler';
 
 export interface SparkLineChartSlotsComponent
   extends AreaPlotSlotsComponent,
@@ -90,6 +91,7 @@ export interface SparkLineChartProps
    * @default {}
    */
   slotProps?: SparkLineChartSlotComponentProps;
+  onClick?: (event: any, series: any, itemData: any) => void;
 }
 
 const SPARKLINE_DEFAULT_MARGIN = {
@@ -117,6 +119,7 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
     data,
     plotType = 'line',
     valueFormatter = (v: number) => v.toString(),
+    onClick,
     area,
     curve = 'linear',
   } = props;
@@ -159,6 +162,8 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
         axisHighlight?.y === 'none'
       }
     >
+      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
+
       {plotType === 'bar' && (
         <BarPlot slots={slots} slotProps={slotProps} sx={{ shapeRendering: 'auto' }} />
       )}

From c74de2f85d698e63a38a49e62fe927a8654aff4d Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Tue, 17 Oct 2023 10:42:28 +0300
Subject: [PATCH 3/8] your commit message


From b0abb22374eea282e9711485277e8a081c4280e6 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Fri, 20 Oct 2023 12:31:44 +0300
Subject: [PATCH 4/8] fix

---
 packages/x-charts/src/OnClickHandler.tsx    | 6 +++---
 packages/x-charts/src/PieChart/PieChart.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/x-charts/src/OnClickHandler.tsx b/packages/x-charts/src/OnClickHandler.tsx
index 3f42080934164..6584d4061841d 100644
--- a/packages/x-charts/src/OnClickHandler.tsx
+++ b/packages/x-charts/src/OnClickHandler.tsx
@@ -10,7 +10,7 @@ import { CartesianChartSeriesType, ChartSeriesType } from './models/seriesType/c
 import { SeriesContext } from './context/SeriesContextProvider';
 import { CartesianContext } from './context/CartesianContextProvider';
 
-function getTootipHasData(
+function hasData(
   trigger: TriggerOptions,
   displayedData: null | AxisInteractionData | ItemInteractionData<ChartSeriesType>,
 ): boolean {
@@ -50,7 +50,7 @@ function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
 
       if (trigger === 'item') {
         const displayedData = item as ItemInteractionData<ChartSeriesType>;
-        const tooltipHasData = getTootipHasData(trigger, displayedData);
+        const tooltipHasData = hasData(trigger, displayedData);
 
         if (tooltipHasData) {
           const data = series[displayedData.type]!.series[displayedData.seriesId];
@@ -61,7 +61,7 @@ function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
         }
       } else {
         const displayedData = axis as AxisInteractionData;
-        const tooltipHasData = getTootipHasData(trigger, displayedData);
+        const tooltipHasData = hasData(trigger, displayedData);
         if (tooltipHasData) {
           const isXaxis = (displayedData.x && displayedData.x.index) !== undefined;
           const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index fc510554b9aeb..66a84ef95aa1c 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -47,7 +47,7 @@ export interface PieChartProps
    * @deprecated Consider using `slotProps.legend` instead.
    */
   legend?: ChartsLegendProps;
-  onClick?: PiePlotProps['onClick'];
+  onClick?: (event: any, series: any, itemData: any) => void;
 
   slots?: PieChartSlotsComponent;
   /**

From 17da16f80dcf3500040140d01b695e3ff791def1 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Fri, 20 Oct 2023 12:34:12 +0300
Subject: [PATCH 5/8] fix

---
 packages/x-charts/src/PieChart/PieChart.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx
index 66a84ef95aa1c..e39c6be7dfb02 100644
--- a/packages/x-charts/src/PieChart/PieChart.tsx
+++ b/packages/x-charts/src/PieChart/PieChart.tsx
@@ -21,10 +21,10 @@ import {
   ChartsLegendSlotsComponent,
 } from '../ChartsLegend';
 import { ChartsAxisHighlight, ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-import { PiePlot, PiePlotProps, PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
+import { PiePlot, PiePlotSlotComponentProps, PiePlotSlotsComponent } from './PiePlot';
 import { PieValueType } from '../models/seriesType/pie';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-import OnCLick from '../OnClickHandler';
+import OnClickHandler from '../OnClickHandler';
 
 export interface PieChartSlotsComponent
   extends ChartsAxisSlotsComponent,
@@ -118,7 +118,7 @@ function PieChart(props: PieChartProps) {
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <ChartsAxisHighlight {...axisHighlight} />
       <ChartsTooltip {...tooltip} />
-      <OnCLick {...tooltip} onClick={() => {}} />
+      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
       {children}
     </ResponsiveChartContainer>
   );

From 39f99c8ea51cd69a8ae26a85b8f1f7886d958ff7 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Sat, 21 Oct 2023 12:48:06 +0300
Subject: [PATCH 6/8] fix: scatter fix

---
 packages/x-charts/src/ScatterChart/ScatterChart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index dab565c95dcd8..13cbd5be22e44 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -108,7 +108,7 @@ const ScatterChart = React.forwardRef(function ScatterChart(props: ScatterChartP
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <ChartsAxisHighlight x="none" y="none" {...axisHighlight} />
       <ChartsTooltip trigger="item" {...tooltip} />
-      <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
+      <OnClickHandler trigger="item" onClick={onClick} />
       {children}
     </ResponsiveChartContainer>
   );

From 0fc8c4a37d8c763a40f1306287483233b6f61f08 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Tue, 24 Oct 2023 19:16:12 +0300
Subject: [PATCH 7/8] refactore

---
 packages/x-charts/src/OnClickHandler.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/x-charts/src/OnClickHandler.tsx b/packages/x-charts/src/OnClickHandler.tsx
index 6584d4061841d..47a714438f9cc 100644
--- a/packages/x-charts/src/OnClickHandler.tsx
+++ b/packages/x-charts/src/OnClickHandler.tsx
@@ -61,8 +61,8 @@ function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
         }
       } else {
         const displayedData = axis as AxisInteractionData;
-        const tooltipHasData = hasData(trigger, displayedData);
-        if (tooltipHasData) {
+
+        if (hasData(trigger, displayedData)) {
           const isXaxis = (displayedData.x && displayedData.x.index) !== undefined;
           const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
           const dataIndex = isXaxis
@@ -72,7 +72,7 @@ function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
           if (dataIndex == null) {
             return;
           }
-          const displayedLabel: any[] = [];
+          const data: any[] = [];
           (
             Object.keys(series).filter((seriesType) =>
               ['bar', 'line', 'scatter'].includes(seriesType),
@@ -82,12 +82,12 @@ function OnClickHandler({ trigger, onClick }: OnClickHandlerProps) {
               const seriesItem = series[seriesType]!.series[seriesId];
               const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
               if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-                displayedLabel.push(series[seriesType]!.series[seriesId]);
+                data.push(series[seriesType]!.series[seriesId]);
               }
             });
           });
 
-          onClick(event, displayedLabel, displayedData);
+          onClick(event, data, displayedData);
         }
       }
     };

From 9e23f8d633d4f1e234c2233648f7c0cbd82c3c53 Mon Sep 17 00:00:00 2001
From: yaredtsyg <tsyared@gmail.com>
Date: Wed, 25 Oct 2023 10:27:53 +0300
Subject: [PATCH 8/8] proptypes func

---
 packages/x-charts/src/BarChart/BarChart.tsx             | 1 +
 packages/x-charts/src/LineChart/LineChart.tsx           | 2 +-
 packages/x-charts/src/ScatterChart/ScatterChart.tsx     | 1 +
 packages/x-charts/src/SparkLineChart/SparkLineChart.tsx | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx
index ea13e5a0dd9b8..132a40f058789 100644
--- a/packages/x-charts/src/BarChart/BarChart.tsx
+++ b/packages/x-charts/src/BarChart/BarChart.tsx
@@ -245,6 +245,7 @@ BarChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number,
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx
index 3294733cd0da6..47fe6e91367d1 100644
--- a/packages/x-charts/src/LineChart/LineChart.tsx
+++ b/packages/x-charts/src/LineChart/LineChart.tsx
@@ -154,7 +154,6 @@ const LineChart = React.forwardRef(function LineChart(props: LineChartProps, ref
       <ChartsLegend {...legend} slots={slots} slotProps={slotProps} />
       <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
       <ChartsTooltip {...tooltip} slots={slots} slotProps={slotProps} />
-
       <ChartsClipPath id={clipPathId} />
       {children}
     </ResponsiveChartContainer>
@@ -256,6 +255,7 @@ LineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number,
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
index 13cbd5be22e44..f970e08c53918 100644
--- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx
+++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx
@@ -205,6 +205,7 @@ ScatterChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number,
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
index 1e965124ea4f6..db145b64c9554 100644
--- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
+++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx
@@ -170,7 +170,6 @@ const SparkLineChart = React.forwardRef(function SparkLineChart(props: SparkLine
       }
     >
       <OnClickHandler trigger={tooltip?.trigger} onClick={onClick} />
-
       {plotType === 'bar' && (
         <BarPlot slots={slots} slotProps={slotProps} sx={{ shapeRendering: 'auto' }} />
       )}
@@ -239,6 +238,7 @@ SparkLineChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number,
   }),
+  onClick: PropTypes.func,
   /**
    * Type of plot used.
    * @default 'line'