Laravel 12 - How to Use Larapex Charts For Data Visualization
Laravel 12 - How to Use Larapex Charts For Data Visualization
In this tutorial, we are going to discuss how to integrate Larapex Charts in Laravel 12 to create clean, responsive charts and enhance the visual presentation of data in your Laravel application.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we’ll walk through the process of adding dynamic, visually appealing charts to a Laravel 12 application using the Larapex Charts package. We’ll kick things off by setting up a new Laravel project, configuring it with MySQL as our database. After installing Larapex Charts, we’ll publish its config file to allow easy customization. From there, we’ll define a basic route and build a simple pie chart using Blade and style it with Tailwind CSS. Once we serve the app, we’ll ensure the chart renders properly on the homepage. To wrap up, we’ll demonstrate how to switch from a pie chart to a donut chart. This gives you a solid foundation to start integrating interactive data visualizations into your Laravel projects.
Step # 1 : Create a Fresh Laravel 12 Project.
To get started, either spin up a brand-new Laravel 12 project or use one you already have. If Laravel is installed globally on your machine, you can run.
laravel new charts
Alternatively, you can use Composer.
composer create-project laravel/laravel --prefer-dist charts
During setup, go with the following options.
- Starter Kit: Choose None.
- Database: Select MySQL.
- Migrations: Type yes to run the default migrations.
- Frontend Build: Type yes to install the frontend dependencies and compile assets.
This will scaffold a clean Laravel 12 application named charts, pre-configured with MySQL giving you a ready-to-code environment that’s perfect for building chart visualizations.
Step # 2 : Move Into Your Project Directory.
Once your Laravel 12 project is set up, open your terminal (such as Git Bash, Command Prompt, or any terminal you prefer) and navigate to the root folder of your app. This is the main directory where all your Laravel files and configurations reside. For example, if you created a project named charts using XAMPP, you’d run.
cd c:xampp/htdocs/charts
Being in the right directory ensures you can run Artisan commands, install packages, and start building without any hiccups.
Step # 3: Install the Larapex Charts Package.
To start adding beautiful, responsive charts to your Laravel 12 app, you'll first need to bring in the Larapex Charts package. It's a lightweight wrapper around ApexCharts that makes it easy to work with in Laravel. Run the command below in your project directory.
composer require arielmejiadev/larapex-charts
The package will register automatically, so there’s no extra setup needed. With this installed, you’re ready to start building charts inside your app.
Step # 4: Publish the Larapex Config File.
If you'd like to fine-tune the default appearance and behavior of your charts, like changing the colors or enabling animations, you'll want to publish the configuration file. Run the following Artisan command.
php artisan vendor:publish --tag=larapex-charts-config
This will generate a config file in your project where you can modify the global chart settings to better align with your UI style or branding.
Step # 5: Set Up a Route and Build Your First Chart.
With everything ready to go, let’s create a basic chart and display it on the homepage. For this example, we’ll use static data to keep things simple, you can always hook it up to dynamic values later. Start by importing the LarapexChart class at the top of your web.php file.
use ArielMejiaDev\LarapexCharts\LarapexChart;
Next, update your root route to return a pie chart.
Route::get('/', function () {
$chart = (new LarapexChart)->pieChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2025.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
return view('welcome', compact('chart'));
});
This will generate a chart instance and pass it to the welcome view. For now, we’re using hardcoded values, but you can easily swap them out for dynamic data from your database whenever you’re ready.
Step # 6 : Create the Chart View in Blade.
Now that your route is returning a chart, let’s update the front-end to display it nicely. Open the welcome.blade.php file located in resources/views/ and replace its contents with the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code Shotcut | Larapex Chart</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="bg-black text-white font-sans antialiased min-h-screen flex flex-col">
<header class="bg-gray-900 text-white shadow">
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
<h1 class="text-xl font-semibold">Code Shotcut</h1>
<span class="text-sm text-gray-300">Larapex Chart View</span>
</div>
</header>
<!-- Chart Section -->
<main class="flex-1 flex items-center justify-center p-6">
<div class="w-full max-w-5xl bg-white shadow-lg rounded-lg p-6 md:p-10 text-black">
<h2 class="text-2xl font-bold mb-6 border-b border-gray-300 pb-2">Chart Insights</h2>
{!! $chart->container() !!}
</div>
</main>
<script src="{{ $chart->cdn() }}"></script>
{{ $chart->script() }}
</body>
</html>
This Blade template uses Tailwind CSS for styling and includes the necessary Larapex scripts to render the chart properly. The {!! $chart->container() !!} is where the chart gets embedded, and {{ $chart->script() }} injects the JavaScript needed to make it work. Once this is in place, open your browser and head to the homepage, you should now see the pie chart live and fully functional.
Step # 7 : Launch Your App and See the Chart Live.
With everything in place, it’s time to run your Laravel application and preview your first chart. Open your terminal and start the built-in development server using.
php artisan serve
Once the server is up and running, open your browser and go to: http://127.0.0.1:8000.
Pie Chart
You should now see the pie chart displayed beautifully on the homepage. This means the Larapex Charts integration is working as expected, and you're ready to bring your data to life visually.
Switch to a Donut Chart
Want to try a different chart style? The donut chart is a great alternative, it’s similar to the pie chart but with a stylish hollow center. To make the switch, simply update your route by changing pieChart() to donutChart().
use ArielMejiaDev\LarapexCharts\LarapexChart;
Route::get('/', function () {
$chart = (new LarapexChart)->donutChart()
->setTitle('Top 3 scorers of the team.')
->setSubtitle('Season 2024.')
->addData([40, 50, 30])
->setLabels(['Player 7', 'Player 10', 'Player 9']);
return view('welcome', compact('chart'));
});
Just that one change will transform your pie chart into a donut chart. Refresh the page, and you’ll see the updated design in action.
Other Chart Options You Can Explore
Larapex Charts supports a variety of chart types, so you’re not limited to just pie or donut styles. Here’s a quick overview of what’s available.
- Pie
- Donut
- Radial Bar
- Polar Area
- Line
- Area
- Bar
- Horizontal Bar
- Heatmap
- Radar Chart
You can switch chart types easily by using the appropriate method, such as lineChart(), barChart(), or radarChart() when creating your chart object.
Conclusion
By following this guide, you've successfully integrated Larapex Charts into your Laravel 12 application and built a responsive chart view. Starting with a basic pie chart and then transitioning to a donut chart, you now have the flexibility to experiment with various chart styles based on your data. This setup is an excellent foundation for visualizing information in Laravel, and you can expand it further by incorporating dynamic data, customizing the appearance, or even enabling real-time updates to power a modern dashboard.
For more details, please refer to the Larapex Charts package documentation.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments