Chart in laravel using chart.js

Laravel Charts is a charting library for laravel, and it’s the only PHP package that’s able to generate unlimited combinations of charts out of the box. This is because Chart’s API is designed to be extensible and customizable, allowing any option in the JavaScript library to be quickly used without effort.

Types of chart:
https://www.chartjs.org/docs/latest/charts/bar.html

1. Bar (type=bar)
2. Line (type=line)
3. Area (type=area)
4. Pie (type=pie), etc.

https://www.chartjs.org
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> (using cdn is the best way)
Bar Chart

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>
Pie Chart <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'pie', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script>

 

 

 

Leave a Reply