How To Create Dynamic Pie Chart In Laravel 8

Hello Friends, In this tutorial I will show you how to create dynamic pie chart in laravel 8, Pie charts are use to representing data in graphics view, for creation of dynamic pie chart in laravel 8 example you need to create model, controller, route, blade file and database.

In laravel 8 dynamic pie chart we need some basic js file like, echarts.min.js and some other js and css file.

So, let's see how to create dynamic pie chart in laravel 8.

Step 1 : Install Laravel 8 for Dynamic Pie Chart Example

Step 2 : Create Model and Migration for Pie Chart Example in Laravel 8

Step 3 : Add Route in web.php file

Step 4 : Create Controller

Step 5 : Create Blade File


Step 1 : Install Laravel 8

Type the below command in your terminal to create new project of dynamic pie chart.

composer create-project --prefer-dist laravel/laravel echart



 Step 2 : Create Model and Migration for Pie Chart Example in Laravel 8

 Here, we are collecting data from database to dynamic data for pie chart example. So, create migration for product table using artisan command.

php artisan make: model Product -m

After that add below codein this location "database/migrations/"


use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('products', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

after this we need to run this migration by following command in our terminal:

php artisan migrate



Step 3: Add Route in web.php File

Now add route in routes/web.php


use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Admin\EchartController;

Route::get('echarts', [EchartController::class,'echart']);



Step 4 : Create Controller

After adding route we need to create new conroller and model for pie chart example. so type below command for create controller.

php artisan make:controller EchartController

 Add below code in your Product Model in app\Models\Product.php this file.


namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
    use HasFactory;

    protected $table = 'products';
    protected $guarded = [];


 Add below code in your app\Http\Controllers\EchartController.php


namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;

class EchartController extends Controller
    public function echart(Request $request)
    	$fruit = Product::where('product_type','fruit')->get();
    	$veg = Product::where('product_type','vegitable')->get();
    	$grains = Product::where('product_type','grains')->get();
    	$fruit_count = count($fruit);    	
    	$veg_count = count($veg);
    	$grains_count = count($grains);
    	return view('echart',compact('fruit_count','veg_count','grains_count'));



Step 5 : Create Blade File

Now, we will creating echart.blade.php file for view.

<!DOCTYPE html>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>How To Create Dynamic Pie Chart In Laravel 8 - Techsolutionstuff</title>	
	<link rel="stylesheet" href="">
	<link href="{{asset('assets/css/components.min.css')}}" rel="stylesheet" type="text/css">	
	<script type="text/javascript" src="{{asset('assets/js/jquery.min.js')}}"></script>
	<script type="text/javascript" src="{{asset('assets/js/bootstrap.bundle.min.js')}}"></script>	
	<script type="text/javascript" src="{{asset('assets/js/echarts.min.js')}}"></script>	
<div class="col-md-12">
	<h1 class="text-center">How To Create Dynamic Pie Chart In Laravel 8 - Techsolutionstuff</h1>
	<div class="col-xl-6" style="margin-top: 30px;">
		<div class="card">
			<div class="card-body">
				<div class="chart-container">
					<div class="chart has-fixed-height" id="pie_basic"></div>
<script type="text/javascript">
var pie_basic_element = document.getElementById('pie_basic');
if (pie_basic_element) {
    var pie_basic = echarts.init(pie_basic_element);
        textStyle: {
            fontFamily: 'Roboto, Arial, Verdana, sans-serif',
            fontSize: 13

        title: {
            text: 'Pie Chart Example',
            left: 'center',
            textStyle: {
                fontSize: 17,
                fontWeight: 500
            subtextStyle: {
                fontSize: 12

        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.75)',
            padding: [10, 15],
            textStyle: {
                fontSize: 13,
                fontFamily: 'Roboto, sans-serif'
            formatter: "{a} <br/>{b}: {c} ({d}%)"

        legend: {
            orient: 'horizontal',
            bottom: '0%',
            left: 'center',                   
            data: ['Fruit', 'Vegitable','Grains'],
            itemHeight: 8,
            itemWidth: 8

        series: [{
            name: 'Product Type',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    borderWidth: 1,
                    borderColor: '#fff'
            data: [
                {value: {{$fruit_count}}, name: 'Fruit'},
                {value: {{$veg_count}}, name: 'Vegitable'},
                {value: {{$grains_count}}, name: 'Grains'}


And you will get output like below image.


You might also Like :


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.