fix: BarChart tooltip vertical (#33)

* update bar chart tooltip * update gap * remove radius * update barcategorygap * Update changelog.md
tremorlabs · Jun 11, 2024 · 9d2ba1e · 9d2ba1e
1 parent 2d16feb
commit 9d2ba1e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw BarChart [v0.0.0]
+// Tremor Raw BarChart [v0.0.1]
 
 "use client"
 
@@ -672,6 +672,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
             }}
             stackOffset={type === "percent" ? "expand" : undefined}
             layout={layout}
+            barCategoryGap={barCategoryGap}
           >
             {showGridLines ? (
               <CartesianGrid
@@ -782,7 +783,10 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
               animationDuration={100}
               cursor={{ fill: "#d1d5db", opacity: "0.15" }}
               offset={20}
-              position={{ y: 0 }}
+              position={{
+                y: layout === "horizontal" ? 0 : undefined,
+                x: layout === "horizontal" ? undefined : yAxisWidth + 20,
+              }}
               content={
                 showTooltip ? (
                   ({ active, payload, label }) => (
@@ -840,7 +844,6 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
                   renderShape(props, activeBar, activeLegend, layout)
                 }
                 onClick={onBarClick}
-                radius={20}
               />
             ))}
           </RechartsBarChart>

diff --git a/src/components/BarChart/barchart.stories.tsx b/src/components/BarChart/barchart.stories.tsx
@@ -273,6 +273,12 @@ export const WithLargeTickGap: Story = {
   },
 }
 
+export const WithBarCategoryGap: Story = {
+  args: {
+    barCategoryGap: "30%",
+  },
+}
+
 export const WithLayoutVertical: Story = {
   args: {
     categories: ["SolarCells"],

diff --git a/src/components/BarChart/changelog.md b/src/components/BarChart/changelog.md
@@ -1,5 +1,8 @@
 # Tremor Raw BarChart Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+- Fix: Dynamic tooltip position on vertical layout
+- Fix: `barCategoryGap` propagation