Chart.js is a JavaScript library that allows users to create bar charts, line charts, pie charts, graph charts, area charts, column charts, etc. in php laravel 11 projects.
Let’s start to create bar charts, line charts, pie charts, graph charts, area charts, column charts using chartJS:
Step 1: Create Chart Routes
Edit routes/web.php and add routes for bar charts, line charts, pie charts, graph charts, area charts, column:
use App\Http\Controllers\ChartController;
Route::get('/charts', [ChartController::class, 'index']);Step 2: Create a Controller
Create controller file that handle chart rendering:
php artisan make:controller ChartControllerCreate methods for each type of chart in app/Http/Controllers/ChartController.php file:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Data; // Import your model
class ChartController extends Controller
{
public function index()
{
$data = Data::all(); // Fetch your dynamic data
return view('charts.index', compact('data'));
}
}Step 3: Create Blade View For Charts
Visit resources/views folder and then create index.blade.php view for display charts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel 11 Chart.js Example - itcodStuff.com</title>
</head>
<body>
<div style="width: 50%; float: left;">
<canvas id="barChart" width="400" height="400"></canvas>
</div>
<div style="width: 50%; float: left;">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
<div style="width: 50%; float: left;">
<canvas id="pieChart" width="400" height="400"></canvas>
</div>
<div style="width: 50%; float: left;">
<canvas id="graphChart" width="400" height="400"></canvas>
</div>
<div style="width: 50%; float: left;">
<canvas id="areaChart" width="400" height="400"></canvas>
</div>
<div style="width: 50%; float: left;">
<canvas id="columnChart" width="400" height="400"></canvas>
</div>
</body>
</html>Step 4: Add Chart.js in View
Open blade view file and add chartJS code into it:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var data = {!! json_encode($data) !!}; // Dynamic data
// Bar Chart
var ctxBar = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctxBar, {
type: 'bar',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Bar Chart',
data: data.map(item => item.value),
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Line Chart
var ctxLine = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctxLine, {
type: 'line',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Line Chart',
data: data.map(item => item.value),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Pie Chart
var ctxPie = document.getElementById('pieChart').getContext('2d');
var pieChart = new Chart(ctxPie, {
type: 'pie',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Pie Chart',
data: data.map(item => item.value),
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Graph Chart (not a standard chart type in Chart.js, using line chart for demonstration)
var ctxGraph = document.getElementById('graphChart').getContext('2d');
var graphChart = new Chart(ctxGraph, {
type: 'line',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Graph Chart',
data: data.map(item => item.value),
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Area Chart
var ctxArea = document.getElementById('areaChart').getContext('2d');
var areaChart = new Chart(ctxArea, {
type: 'line',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Area Chart',
data: data.map(item => item.value),
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
// Column Chart
var ctxColumn = document.getElementById('columnChart').getContext('2d');
var columnChart = new Chart(ctxColumn, {
type: 'bar',
data: {
labels: data.map(item => item.label),
datasets: [{
label: 'Column Chart',
data: data.map(item => item.value),
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>Step 5: Test Application
Run the php artisan serve command to start application server.
Hit the url http://localhost:8000/charts on browser to test laravel chartjs application.