fix tooltip callbacks

src/components/BarChart/BarChart.tsx

@@ -1,4 +1,4 @@
-// Tremor Raw BarChart [v0.0.1]
+// Tremor Raw BarChart [v0.1.0]
 
 "use client"
 

src/components/BarChart/changelog.md

@@ -1,5 +1,11 @@
 # Tremor Raw BarChart Changelog
 
+## 0.1.0
+
+### Changes
+
+- Feat: Add tooltipCallback prop
+
 ## 0.0.1
 
 ### Changes

src/components/LineChart/LineChart.tsx

@@ -402,15 +402,29 @@ interface ChartTooltipProps {
   label: string
   categoryColors: Map<string, string>
   valueFormatter: (value: number) => string
+  tooltipCallback?: TooltipCallback
 }
 
+type TooltipCallbackProps = Pick<
+  ChartTooltipProps,
+  "active" | "payload" | "label"
+>
+
+type TooltipCallback = (props: TooltipCallbackProps) => void
+
 const ChartTooltip = ({
   active,
   payload,
   label,
   categoryColors,
   valueFormatter,
+  tooltipCallback,
 }: ChartTooltipProps) => {
+  React.useEffect(() => {
+    if (tooltipCallback) {
+      tooltipCallback({ active, payload, label })
+    }
+  }, [tooltipCallback, active, payload, label])
   if (active && payload) {
     const filteredPayload = payload.filter((item: any) => item.type !== "none")
 
@@ -507,6 +521,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   xAxisLabel?: string
   yAxisLabel?: string
   legendPosition?: "left" | "center" | "right"
+  tooltipCallback?: TooltipCallback
 }
 
 const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
@@ -537,6 +552,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
       xAxisLabel,
       yAxisLabel,
       legendPosition = "right",
+      tooltipCallback,
       ...other
     } = props
     const paddingValue = !showXAxis && !showYAxis ? 0 : 20
@@ -708,6 +724,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
                       label={label}
                       valueFormatter={valueFormatter}
                       categoryColors={categoryColors}
+                      tooltipCallback={tooltipCallback}
                     />
                   )
                 ) : (
@@ -875,4 +892,4 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
 
 LineChart.displayName = "LineChart"
 
-export { LineChart, type LineChartEventProps }
+export { LineChart, type LineChartEventProps, type TooltipCallbackProps }

src/components/LineChart/changelog.md

@@ -1,7 +1,14 @@
 # Tremor Raw LineChart Changelog
 
+## 0.2.0
+
+### Changes
+
+- Feat: Add tooltipCallback prop
+- Feat: Add fill prop
+
 ## 0.1.0
 
 ### Changes
 
-Feat: Added legendPosition prop
+- Feat: Added legendPosition prop

src/components/LineChart/linechart.stories.tsx

@@ -298,6 +298,12 @@ export const WithOnValueChange: Story = {
   },
 }
 
+export const WithTooltipCallback: Story = {
+  args: {
+    tooltipCallback: (props) => console.log(props),
+  },
+}
+
 export const WithLargeTickGap: Story = {
   args: {
     tickGap: 300,