fix: significantly increase X-axis height and margin to completely prevent label cutoff

2026-05-06 14:33:35 -03:00
parent 1d45dd3649
commit 6c2ed8c301
2 changed files with 4 additions and 2 deletions
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -103,13 +103,14 @@ const Dashboard = () => {
          <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
          <div className="h-80 w-full">
            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 60 }}>
+              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 120 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
                <XAxis 
                  dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
                  interval={0}
                  angle={-45}
                  textAnchor="end"
+                  height={120}
                />
                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                <Tooltip