:D

components/analytics/GrowthAnalyticsChart.tsx

@@ -24,6 +24,7 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  Area,
 } from "recharts";
 
 interface GrowthAnalyticsChartProps {
@@ -195,18 +196,32 @@ export default function GrowthAnalyticsChart({
                   }))}
                   margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                 >
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis dataKey="formattedMonth" tick={{ fontSize: 12 }} />
-                  <YAxis yAxisId="left" tick={{ fontSize: 12 }} />
+                  <defs>
+                    <linearGradient id="colorRevenueGrowth" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
+                      <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="hsl(var(--border))" />
+                  <XAxis
+                    dataKey="formattedMonth"
+                    tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <YAxis yAxisId="left" tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
                   <YAxis
                     yAxisId="right"
                     orientation="right"
-                    tick={{ fontSize: 12 }}
+                    tick={{ fontSize: 12, fill: "hsl(var(--muted-foreground))" }}
+                    axisLine={false}
+                    tickLine={false}
                     tickFormatter={(value) =>
                       hideNumbers ? "***" : `£${(value / 1000).toFixed(0)}k`
                     }
                   />
                   <Tooltip
+                    cursor={{ fill: "transparent", stroke: "hsl(var(--muted-foreground))", strokeDasharray: "3 3" }}
                     content={({ active, payload }) => {
                       if (active && payload?.length) {
                         const data = payload[0].payload;
@@ -240,14 +255,16 @@ export default function GrowthAnalyticsChart({
                       return null;
                     }}
                   />
-                  <Bar
+                  <Line
                     yAxisId="left"
+                    type="monotone"
                     dataKey="orders"
-                    fill="#3b82f6"
-                    radius={[4, 4, 0, 0]}
+                    stroke="#3b82f6"
+                    strokeWidth={2}
+                    dot={{ fill: "#3b82f6", r: 3 }}
                     name="Orders"
                   />
-                  <Line
+                  <Area
                     yAxisId="right"
                     type="monotone"
                     dataKey="revenue"
@@ -255,6 +272,7 @@ export default function GrowthAnalyticsChart({
                     strokeWidth={3}
                     dot={{ fill: "#10b981", r: 4 }}
                     name="Revenue"
+                    fill="url(#colorRevenueGrowth)"
                   />
                 </ComposedChart>
               </ResponsiveContainer>