Hello Devs, 

In this tutorial, we will learn Laravel 8 Highchart Donut Chart Example.

Highcharts is a js library, that populates bar chart, line chart, area chart, column chart, etc. Highcharts also provides several themes and graphic designs that way you can make a better layout. Highcharts is a very popular and simple library for a PHP developers.

Follow the step-by-step guides below. 

Step 1: Install Laravel Project:

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

Step 2: Setup Database

DB_DATABASE=here your database name 
DB_USERNAME=here database username
DB_PASSWORD=here database password 

Step 3 : Create Migration and Model

php artisan make:migration create_students_table



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

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

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

run migration be bellow command:

php artisan migrate

run bellow command one by one:

php artisan make:model Student



namespace App\Models;

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

class Student extends Model
    use HasFactory;
    protected $fillable = [

Step 4 : Add Route:


use App\Http\Controllers\HighChartController;


Step 5 : Create Controller



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;

class HighChartController extends Controller
    public function donutChart()
        $students = Student::select('course', \DB::raw("COUNT('id') as count"))

        return view('donutChart', compact('students'));

Step 6 : Create View file


<!DOCTYPE html>
    <title>Make Donut HighChart in Laravel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <style type="text/css">
            margin:0 auto;
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Laravel Donut HighChart Tutorial Example - rathorji.in</h3>
                    <div class="panel-body" align="center">
                        <div id="pie_chart" style="width:750px; height:450px;">
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var students =  <?php echo json_encode($students); ?>;
            var options = {
                chart: {
                    renderTo: 'pie_chart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                title: {
                    text: 'Percentage of Students Courses'
                 tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                            dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                series: [{
            myarray = [];
            $.each(students, function(index, val) {
                myarray[index] = [val.course, val.count];
            options.series[0].data = myarray;
            chart = new Highcharts.Chart(options);

Create Dummy Records

 Run Your Project

php artisan serve

open bellow URL on your browser:


May this example help you.