blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: force all X-axis labels to display on charts and prevent cutoff
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m9s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-06 14:07:10 -03:00
parent cf3f79b3da
commit 1d45dd3649
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/Dashboard.tsx
View File

@@ -103,11 +103,13 @@ const Dashboard = () => {
<h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3> <h3 className="text-lg font-bold mb-6 text-dark-text">Produtos Mais Vendidos</h3>
<div className="h-80 w-full"> <div className="h-80 w-full">
<ResponsiveContainer width="100%" height="100%"> <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} /> <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<XAxis <XAxis
dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false} 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} /> <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip <Tooltip

7
src/pages/ProductDetails.tsx
View File

@@ -108,10 +108,13 @@ const ProductDetails = () => {
<h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3> <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
<div className="h-80 w-full"> <div className="h-80 w-full">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData}> <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 40 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} /> <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<XAxis <XAxis
dataKey="date" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} dataKey="date" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
interval={0}
angle={-45}
textAnchor="end"
/> />
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip <Tooltip