fix: force all X-axis labels to display on charts and prevent cutoff

2026-05-06 14:07:10 -03:00
parent cf3f79b3da
commit 1d45dd3649
2 changed files with 9 additions and 4 deletions
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -103,11 +103,13 @@ 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: 5 }}>
+              <BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 60 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
                <XAxis 
                  dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
-                  tickFormatter={(v) => v.length > 12 ? v.substring(0, 12) + '...' : v}
+                  interval={0}
+                  angle={-45}
+                  textAnchor="end"
                />
                <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                <Tooltip