diff --git a/packages/react/src/components/Charts/BarChart/index.stories.tsx b/packages/react/src/components/Charts/BarChart/index.stories.tsx
index 9b58efcee4..c45932c80a 100644
--- a/packages/react/src/components/Charts/BarChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/BarChart/index.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof BarChart<typeof dataConfig>> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="w-100 h-52">
+      <div className="w-100 h-96 max-w-md">
         <Story />
       </div>
     ),
diff --git a/packages/react/src/components/Charts/BarChart/index.tsx b/packages/react/src/components/Charts/BarChart/index.tsx
index 8590704322..76e4625f50 100644
--- a/packages/react/src/components/Charts/BarChart/index.tsx
+++ b/packages/react/src/components/Charts/BarChart/index.tsx
@@ -202,8 +202,13 @@ const _BarChart = <K extends ChartConfig>(
                 ? (((data: { fill: string }) => data.fill) as unknown as string)
                 : (dataConfig[key].color ?? autoColor(index))
             }
-            radius={type === "stacked-by-sign" ? [4, 4, 0, 0] : 4}
-            maxBarSize={32}
+            radius={type === "stacked-by-sign" ? [10, 10, 0, 0] : 10}
+            maxBarSize={48}
+            shape={
+              type === "stacked-by-sign" ? undefined : (
+                <CustomBar dataKey={key} />
+              )
+            }
           >
             {label && (
               <LabelList
@@ -230,4 +235,36 @@ const _BarChart = <K extends ChartConfig>(
   )
 }
 
+const CustomBar = (
+  props: React.SVGProps<SVGRectElement> & { dataKey?: string }
+) => {
+  const { fill, x, y, width, height, radius, dataKey } = props
+
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        stroke="none"
+        rx={radius}
+        fill={`url(#bar-pattern-${dataKey})`}
+      />
+      <defs>
+        <linearGradient
+          id={`bar-pattern-${dataKey}`}
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+        >
+          <stop offset="0%" stopColor={fill} stopOpacity={0.8} />
+          <stop offset="50%" stopColor={fill} stopOpacity={1} />
+        </linearGradient>
+      </defs>
+    </>
+  )
+}
+
 export const BarChart = fixedForwardRef(_BarChart)
diff --git a/packages/react/src/components/Charts/LineChart/index.stories.tsx b/packages/react/src/components/Charts/LineChart/index.stories.tsx
index 9ef28e9146..29ecfa19a6 100644
--- a/packages/react/src/components/Charts/LineChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/LineChart/index.stories.tsx
@@ -14,11 +14,14 @@ const meta: Meta<typeof LineChart<typeof singleDataConfig>> = {
   title: "Charts/LineChart",
   argTypes: {
     lineType: {
-      control: { type: "select", options: ["natural", "linear"] },
+      control: { type: "select" },
+      options: ["natural", "linear"],
       description: "Determines the type of line curve",
-      defaultValue: "natural",
     },
   },
+  args: {
+    lineType: "natural",
+  },
   decorators: [
     (Story) => (
       <div className="h-52 w-full">
diff --git a/packages/react/src/components/Charts/LineChart/index.tsx b/packages/react/src/components/Charts/LineChart/index.tsx
index 7af9048f0e..b81335f922 100644
--- a/packages/react/src/components/Charts/LineChart/index.tsx
+++ b/packages/react/src/components/Charts/LineChart/index.tsx
@@ -89,8 +89,25 @@ export const _LineChart = <K extends LineChartConfig>(
             strokeWidth={1.5}
             strokeDasharray={dataConfig[line].dashed ? "4 4" : undefined}
             dot={false}
+            filter="url(#line-glow)"
           />
         ))}
+        <defs>
+          <filter id="line-glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="6" result="blur" />
+            <feColorMatrix
+              in="blur"
+              type="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0"
+              result="blurHalfOpacity"
+            />
+            <feComposite
+              in="SourceGraphic"
+              in2="blurHalfOpacity"
+              operator="over"
+            />
+          </filter>
+        </defs>
       </LineChartPrimitive>
     </ChartContainer>
   )
diff --git a/packages/react/src/components/Charts/PieChart/index.tsx b/packages/react/src/components/Charts/PieChart/index.tsx
index 284b800748..9a402fac36 100644
--- a/packages/react/src/components/Charts/PieChart/index.tsx
+++ b/packages/react/src/components/Charts/PieChart/index.tsx
@@ -97,7 +97,7 @@ export const _PieChart = (
                   >
                     <tspan
                       x={viewBox.cx}
-                      y={(viewBox.cy || 0) + 8}
+                      y={(viewBox.cy || 0) + 10}
                       className="fill-f1-foreground text-4xl font-semibold"
                     >
                       {overview?.number
@@ -108,7 +108,7 @@ export const _PieChart = (
                     </tspan>
                     <tspan
                       x={viewBox.cx}
-                      y={(viewBox.cy || 0) - 16}
+                      y={(viewBox.cy || 0) - 20}
                       className="fill-f1-foreground-secondary"
                     >
                       {overview?.label}
diff --git a/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx b/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
index 38ab4f9ede..6753bf512a 100644
--- a/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
+++ b/packages/react/src/components/Charts/VerticalBarChart/index.stories.tsx
@@ -13,7 +13,7 @@ const meta: Meta<typeof VerticalBarChart<typeof dataConfig>> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="h-52 w-full">
+      <div className="h-96 w-full max-w-md">
         <Story />
       </div>
     ),
diff --git a/packages/react/src/components/Charts/VerticalBarChart/index.tsx b/packages/react/src/components/Charts/VerticalBarChart/index.tsx
index df4be5403c..0d217b7190 100644
--- a/packages/react/src/components/Charts/VerticalBarChart/index.tsx
+++ b/packages/react/src/components/Charts/VerticalBarChart/index.tsx
@@ -143,8 +143,9 @@ const _VBarChart = <K extends ChartConfig>(
                 key={`bar-${key}`}
                 dataKey={key}
                 fill={dataConfig[key].color || autoColor(index)}
-                radius={4}
-                maxBarSize={24}
+                radius={8}
+                maxBarSize={48}
+                shape={<CustomBar dataKey={key} />}
               >
                 {(label || showRatio) && (
                   <LabelList
@@ -221,3 +222,35 @@ const CustomLabel = ({
     </g>
   )
 }
+
+const CustomBar = (
+  props: React.SVGProps<SVGRectElement> & { dataKey?: string }
+) => {
+  const { fill, x, y, width, height, radius, dataKey } = props
+
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        stroke="none"
+        rx={radius}
+        fill={`url(#bar-pattern-${dataKey})`}
+      />
+      <defs>
+        <linearGradient
+          id={`bar-pattern-${dataKey}`}
+          x1="0"
+          y1="0"
+          x2="1"
+          y2="0"
+        >
+          <stop offset="0%" stopColor={fill} stopOpacity={0.8} />
+          <stop offset="50%" stopColor={fill} stopOpacity={1} />
+        </linearGradient>
+      </defs>
+    </>
+  )
+}
diff --git a/packages/react/src/ui/chart.tsx b/packages/react/src/ui/chart.tsx
index dea6427065..94b191e2af 100644
--- a/packages/react/src/ui/chart.tsx
+++ b/packages/react/src/ui/chart.tsx
@@ -108,7 +108,7 @@ const ChartContainerComponent = (
         data-chart={chartId}
         ref={ref || anotherRef}
         className={cn(
-          "flex w-full justify-center overflow-visible text-sm [&_.recharts-cartesian-axis-tick_text]:fill-f1-foreground-secondary [&_.recharts-cartesian-grid_line]:stroke-f1-border [&_.recharts-curve.recharts-tooltip-cursor]:stroke-f1-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-f1-border [&_.recharts-radial-bar-background-sector]:fill-f1-background-secondary [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-f1-background-secondary [&_.recharts-reference-line-line]:stroke-f1-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex w-full justify-center overflow-visible text-sm [&_.recharts-cartesian-axis-tick_text]:fill-f1-foreground-secondary [&_.recharts-cartesian-axis]:font-medium [&_.recharts-cartesian-grid_line]:stroke-f1-border-secondary [&_.recharts-curve.recharts-tooltip-cursor]:stroke-f1-border-secondary [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-f1-border-secondary [&_.recharts-radial-bar-background-sector]:fill-f1-background-tertiary [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-f1-background-tertiary [&_.recharts-reference-line-line]:stroke-f1-border-secondary [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           aspect ? variants({ aspect }) : "aspect-auto h-full",
           className
         )}