Charts & Data Visualization
Comprehensive chart components styled with Manateq brand colors
All chart types from shadcn/ui Recharts integration, configured with Manateq's color palette and design tokens.
Area Chart
Visualize trends over time with filled areas
Bar Chart
Compare categorical data with vertical bars
Line Chart
Track changes and trends over time
Pie Chart
Show proportional data distribution
Radar Chart
Compare multiple variables across categories
Radial Bar Chart
Display progress or completion metrics
- Q1
- Q2
- Q3
- Q4
Stacked Bar Chart
Show composition of categories
- Logistics
- Industrial
- Warehousing
Usage Guidelines
Color Usage
- 1Use Manateq Red (#862633) as the primary chart color
- 2Use Manateq Gold (#9A8555) for secondary/accent data
- 3Zone colors should be used when displaying zone-specific data
- 4Maintain consistent spacing and padding in chart containers
- 5Always include proper labels and legends for accessibility
- 6Use tooltips to provide detailed information on hover
Color Palette Reference
red
#862633
gold
#9A8555
logistics
#2D8B4E
industrial
#1E3A5F
warehousing
#C4722C
souq
#5C1F2E