Available Chart Types

Beartropy Charts provides three chart types out of the box:

• Bar Charts - Perfect for comparing values across categories
• Line Charts - Ideal for showing trends over time
• Pie Charts - Great for displaying proportional data

Color Options

All charts support three types of color specifications:

• Tailwind Color Names: 'blue', 'red', 'green', etc.
• Full Tailwind Classes: 'bg-gradient-to-r from-blue-500 to-purple-600'
• CSS Colors: '#3b82f6', 'rgb(59, 130, 246)', 'hsl(217, 91%, 60%)'

Data Format

Charts accept flexible data formats:

// Simple array (uses numeric keys as labels)
$data = [10, 20, 30];

// Associative array (keys become labels)
$data = ['Jan' => 10, 'Feb' => 20, 'Mar' => 30];

// Array of arrays with explicit labels and values
$data = [
    ['label' => 'January', 'value' => 10],
    ['label' => 'February', 'value' => 20],
];

// With custom colors per item
$data = [
    ['label' => 'A', 'value' => 10, 'color' => 'blue'],
    ['label' => 'B', 'value' => 20, 'color' => '#10b981'],
];

Dark Mode

All charts automatically adapt to dark mode using Tailwind's dark mode classes. You can customize dark mode appearance using background colors and border colors.

Responsive Design

Charts are fully responsive and will adapt to their container width while maintaining the specified height.