Beartropy Logo

Beartropy Charts

Open Source Laravel Package

Beautiful, customizable chart components for Laravel + Livewire. Create stunning bar charts, line charts, pie charts, donut charts, polar charts, and radar charts with ease.

Get Started
composer require beartropy/charts
Show Code
Bar Chart

Monthly Sales

220 165 110 55 0
120
150
90
200
175
220
Jan
Feb
Mar
Apr
May
Jun 
 1<x-bt-bar-chart
 2    :data="[
 3        ['label' => 'Jan', 'value' => 120],
 4        ['label' => 'Feb', 'value' => 150],
 5        ['label' => 'Mar', 'value' => 90],
 6        ['label' => 'Apr', 'value' => 200],
 7        ['label' => 'May', 'value' => 175],
 8        ['label' => 'Jun', 'value' => 220]
 9    ]"
10    :chart-color="['blue', 'green', 'yellow', 'orange', 'red', 'purple']"
11    title="Monthly Sales"
12    :show-grid="true"
13    :show-y-axis="true"
14    height="h-80"
15/>
Show Code
Line Chart

Financial Overview

115 86.25 57.5 28.75 0
45
67
89
78
90
102
115
30
45
50
60
65
70
75
15
22
39
18
25
32
40
Sales
Expenses
Profit 
 1<x-bt-line-chart
 2    :data="[
 3        [
 4            'label' => 'Sales',
 5            'data' => [45, 67, 89, 78, 90, 102, 115],
 6            'color' => 'blue'
 7        ],
 8        [
 9            'label' => 'Expenses',
10            'data' => [30, 45, 50, 60, 65, 70, 75],
11            'color' => 'red'
12        ],
13        [
14            'label' => 'Profit',
15            'data' => [15, 22, 39, 18, 25, 32, 40],
16            'color' => 'green'
17        ]
18    ]"
19    title="Financial Overview"
20    height="h-96"
21    :show-grid="true"
22    data-labels="always"
23/>
Show Code
Pie Chart

Browser Usage

Chrome: 45 (45%) 45% Firefox: 25 (25%) 25% Safari: 20 (20%) 20% Edge: 10 (10%) 10%
Chrome
45 (45%)
Firefox
25 (25%)
Safari
20 (20%)
Edge
10 (10%) 
 1<x-bt-pie-chart
 2    :data="[
 3        ['label' => 'Chrome', 'value' => 45, 'color' => 'blue'],
 4        ['label' => 'Firefox', 'value' => 25, 'color' => 'orange'],
 5        ['label' => 'Safari', 'value' => 20, 'color' => 'cyan'],
 6        ['label' => 'Edge', 'value' => 10, 'color' => 'green']
 7    ]"
 8    title="Browser Usage"
 9    legend-position="right"
10    height="h-80"
11/>
Show Code
Donut Chart

Traffic by Device

Desktop: 450 (47.4%) 47.4% Mobile: 320 (33.7%) 33.7% Tablet: 180 (18.9%) 18.9% 950 Total Visits
Desktop
450 (47.4%)
Mobile
320 (33.7%)
Tablet
180 (18.9%) 
 1<x-bt-donut-chart
 2    :data="[
 3        ['label' => 'Desktop', 'value' => 450, 'color' => 'blue'],
 4        ['label' => 'Mobile', 'value' => 320, 'color' => 'green'],
 5        ['label' => 'Tablet', 'value' => 180, 'color' => 'purple']
 6    ]"
 7    title="Traffic by Device"
 8    center-text="950"
 9    center-subtext="Total Visits"
10    legend-position="bottom"
11    height="h-80"
12/>
Show Code
Polar Chart

Department Performance

Sales: 85 (89.5%) 85 Sales Marketing: 60 (63.2%) 60 Marketing Development: 95 (100%) 95 Development Support: 70 (73.7%) 70 Support Design: 80 (84.2%) 80 Design
Sales
85 (89.5%)
Marketing
60 (63.2%)
Development
95 (100%)
Support
70 (73.7%)
Design
80 (84.2%) 
 1<x-bt-polar-chart
 2    :data="[
 3        ['label' => 'Sales', 'value' => 85, 'color' => 'blue'],
 4        ['label' => 'Marketing', 'value' => 60, 'color' => 'green'],
 5        ['label' => 'Development', 'value' => 95, 'color' => 'purple'],
 6        ['label' => 'Support', 'value' => 70, 'color' => 'orange'],
 7        ['label' => 'Design', 'value' => 80, 'color' => 'cyan']
 8    ]"
 9    title="Department Performance"
10    legend-position="bottom"
11    height="h-80"
12/>
Show Code
Radar Chart

Product Comparison

Product A Speed: 85 85 Quality: 90 90 Price: 60 60 Design: 75 75 Support: 80 80 Product B Speed: 70 70 Quality: 85 85 Price: 90 90 Design: 65 65 Support: 70 70 Speed Quality Price Design Support
Product A
Speed 85
Quality 90
Price 60
Design 75
Support 80
Product B
Speed 70
Quality 85
Price 90
Design 65
Support 70 
 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Product A',
 5            'color' => 'blue',
 6            'Speed' => 85,
 7            'Quality' => 90,
 8            'Price' => 60,
 9            'Design' => 75,
10            'Support' => 80,
11        ],
12        [
13            'label' => 'Product B',
14            'color' => 'green',
15            'Speed' => 70,
16            'Quality' => 85,
17            'Price' => 90,
18            'Design' => 65,
19            'Support' => 70,
20        ]
21    ]"
22    title="Product Comparison"
23    legend-position="right"
24    height="h-96"
25/>

Multiple Chart Types

Bar charts, line charts, pie charts, and more with extensive customization options.

Fully Customizable

Control colors, sizes, labels, and styling with simple props and Tailwind classes.

Dark Mode Ready

Built-in dark mode support that adapts automatically to your theme.