Visualizing Data Made Easy: Introducing Beartropy Charts

We are thrilled to announce the launch of beartropy/charts, a new package designed to bring beautiful, responsive, and native data visualization to your TALL stack applications.

Stop wrestling with complex JavaScript libraries or messy wrappers. With Beartropy Charts, you can render professional charts using the fluent Blade syntax you already know.

📦 Installation

Getting started is as simple as requiring the package via Composer:

1composer require beartropy/charts

Once installed, you have immediate access to six powerful components: Bar, Line, Pie, Donut, Radar, and Polar charts.

📊 1. The Bar Chart (x-bt-bar-chart)

Perfect for comparing categorical data. It supports custom colors, grid lines, and extensive styling.

Advanced Configuration: Need to show monthly revenue with a branded look? You can pass associative arrays for labels and customize the appearance:

 1<x-bt-bar-chart
 2    title="Monthly Revenue"
 3    :data="[
 4        ['label' => 'Jan', 'value' => 120],
 5        ['label' => 'Feb', 'value' => 150],
 6        ['label' => 'Mar', 'value' => 90]
 7    ]"
 8    :chart-color="['blue', 'purple', 'pink']"
 9    :show-grid="true"
10    :show-y-axis="true"
11    height="h-80"
12    format-values="$%s"
13/>

View Bar Chart full documentation →

📈 2. The Line Chart (x-bt-line-chart)

Ideal for visualizing trends over time. It handles single or multiple datasets effortlessly.

Multi-Dataset Example: Here is how you can compare Sales vs Expenses in a single view:

 1<x-bt-line-chart
 2    title="Financial Overview"
 3    :data="[
 4        [
 5            'label' => 'Sales',
 6            'data' => [45, 67, 89, 102],
 7            'color' => 'emerald'
 8        ],
 9        [
10            'label' => 'Expenses',
11            'data' => [30, 45, 50, 60],
12            'color' => 'rose'
13        ]
14    ]"
15    x-axis-title="Quarter"
16    y-axis-title="Amount ($)"
17    :show-points="true"
18    height="h-96"
19/>

View Line Chart full documentation →

🥧 3. The Pie Chart (x-bt-pie-chart)

Great for showing proportional data. It comes with flexible legend positioning and smart percentage calculation.

Detailed Example:

 1<x-bt-pie-chart
 2    title="Browser Usage"
 3    :data="[
 4        ['label' => 'Chrome', 'value' => 45],
 5        ['label' => 'Firefox', 'value' => 25],
 6        ['label' => 'Safari', 'value' => 20],
 7        ['label' => 'Edge', 'value' => 10]
 8    ]"
 9    legend-position="right"
10    :chart-color="['blue', 'orange', 'sky', 'gray']"
11    :collapsible="true"
12/>

View Pie Chart full documentation →

🍩 4. The Donut Chart (x-bt-donut-chart)

A modern alternative to the Pie chart. It offers a cleaner aesthetic for displaying distributions.

Example:

1<x-bt-donut-chart
2    title="Device Traffic"
3    :data="['Desktop' => 300, 'Mobile' => 500, 'Tablet' => 100]"
4    :chart-color="['indigo', 'fuchsia', 'amber']"
5    legend-position="bottom"
6    height="h-72"
7/>

View Donut Chart full documentation →

🕸️ 5. The Radar Chart (x-bt-radar-chart)

Excellent for comparing multiple variables across different categories, such as skill assessments or product features.

Comparison Example:

 1<x-bt-radar-chart
 2    :data="[
 3        [
 4            'label' => 'Current Year',
 5            'color' => 'emerald',
 6            'Q1' => 75,
 7            'Q2' => 82,
 8            'Q3' => 88,
 9            'Q4' => 95,
10        ],
11        [
12            'label' => 'Previous Year',
13            'color' => 'gray',
14            'Q1' => 65,
15            'Q2' => 70,
16            'Q3' => 75,
17            'Q4' => 80,
18        ],
19    ]"
20    title="Year-over-Year Growth"
21    legend-position="right"
22    height="h-96"
23/>

View Radar Chart full documentation →

❄️ 6. The Polar Chart (x-bt-polar-chart)

Similar to a pie chart, but each segment has the same angle while the radius differs depending on the value. Great for cyclical data.

Example:

 1<x-bt-polar-chart
 2    :data="[
 3        'Sales' => 85,
 4        'Marketing' => 60,
 5        'Development' => 95,
 6        'Support' => 70,
 7        'Design' => 80,
 8    ]"
 9    title="Department Performance"
10/>

View Polar Chart full documentation →

✨ Common Features

All charts in the package share a set of powerful "Quality of Life" features:

• Dark Mode Ready: Automatically adapts to your application's theme.
• Collapsible: Add :collapsible="true" to let users toggle visibility and save screen space.
• Responsive: Built with Tailwind CSS classes to look great on any device.
• Zero Config: No need to write a single line of JavaScript.

Ready to visualize your data? Check out the full documentation for more examples and API details.