fix: limit x-axis tick labels to prevent overlap

Auto-calculates tick interval to show ~6 labels max, with minTickGap
as safety net. Fixes unreadable x-axis on short time ranges (1h).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cameleer/design-system",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

src/design-system/composites/ThemedChart/ThemedChart.tsx

@@ -36,6 +36,12 @@ export function ThemedChart({
     return null
   }
 
+  // Show ~5-6 ticks max to avoid label overlap
+  const maxTicks = 6
+  const tickInterval = data.length > maxTicks
+    ? Math.ceil(data.length / maxTicks) - 1
+    : 0
+
   return (
     <div className={className} style={{ width: '100%', height }}>
       <ResponsiveContainer width="100%" height="100%">
@@ -46,6 +52,8 @@ export function ThemedChart({
             type={xType}
             {...rechartsTheme.xAxis}
             tickFormatter={xTickFormatter}
+            interval={tickInterval}
+            minTickGap={40}
           />
           <YAxis
             {...rechartsTheme.yAxis}