Horizontal Bar Chart Laravel Blade Component with AlpineJS

Horizontal Bar Chart Laravel Blade Component with AlpineJS

Written by Mithicher Baro on Nov 9th, 2021 ・ Views ・ Report Post

Mithicher Baro Visit User Profile

In this post we'll be looking at some simple ways to visualise data without having to use a large or complicated chart library. The blade component uses TailwindCSS for styling data and AlpineJS for javascript part for displaying the horizontal bar chart.

horizontal bar chart component

Some of the features that the chart component consists of:

  • Labels
  • Tooltip
  • Customization of Labels, Chart Data, Tooltip
  • Custom Styles

Assuming you have already configured alpine.js and tailwind css in your app.blade.php, create a blade component named purecss-horizontal-bar-chart.blade.php inside your resources/views/components folder.

In your blade view files, the blade component will look like this in its most basic form.

<x-purecss-horizontal-bar-chart 
    bar-chart-id="horizontalbar"
    bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
    :chart-data='[
        [
          "label" => "Team A",
          "value" => 25,
        ],
        [
          "label" => "Team B",
          "value" => 10,
        ],
        [
          "label" => "Team C",
          "value" => 60,
        ],
        [
          "label" => "Team D",
          "value" => 80,
        ],
        [
          "label" => "Team E",
          "value" => 35,
        ],
        [
          "label" => "Team F",
          "value" => 45,
        ],
        [
          "label" => "Team G",
          "value" => 95,
        ],
    ]'
/>

bar-chart-id: Unique id for the chart and is required to make every chart unique

bar-color: Supports any valid Tailwind CSS background colors as well as gradients backgrounds

value: individual/single value of the chart

label: individual/single label for the chart

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

chart-data: label & value key must be present in the array

Visit https://hypercolor.dev - a curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors.

Chart With Custom Labels

<x-purecss-horizontal-bar-chart 
    bar-chart-id="horizontalbar"
    bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
    :chart-data='[
        [
          "label" => "Team A",
          "value" => 25,
        ],
        [
          "label" => "Team B",
          "value" => 10,
        ],
        [
          "label" => "Team C",
          "value" => 60,
        ],
        [
          "label" => "Team D",
          "value" => 80,
        ],
        [
          "label" => "Team E",
          "value" => 35,
        ],
        [
          "label" => "Team F",
          "value" => 45,
        ],
        [
          "label" => "Team G",
          "value" => 95,
        ],
    ]'
>
  
    <x-slot name="labelData">
        <div class="text-right text-sm leading-none font-medium font-mono" x-text="`For ${data.label}`"></div>
    </x-slot>

</x-purecss-horizontal-bar-chart>

Chart With Customized Data

<x-purecss-horizontal-bar-chart 
    bar-chart-id="horizontalbar"
    bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
    :chart-data='[
        [
          "label" => "Team A",
          "value" => 25,
        ],
        [
          "label" => "Team B",
          "value" => 10,
        ],
        [
          "label" => "Team C",
          "value" => 60,
        ],
        [
          "label" => "Team D",
          "value" => 80,
        ],
        [
          "label" => "Team E",
          "value" => 35,
        ],
        [
          "label" => "Team F",
          "value" => 45,
        ],
        [
          "label" => "Team G",
          "value" => 95,
        ],
    ]'
>

    <x-slot name="columnData">
        <div x-text="`${data.value} wins`"></div>
    </x-slot>

</x-purecss-horizontal-bar-chart>

Chart With Custom Tooltip

<x-purecss-horizontal-bar-chart 
    bar-chart-id="horizontalbar"
    bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
    :chart-data='[
        [
          "label" => "Team A",
          "value" => 25,
        ],
        [
          "label" => "Team B",
          "value" => 10,
        ],
        [
          "label" => "Team C",
          "value" => 60,
        ],
        [
          "label" => "Team D",
          "value" => 80,
        ],
        [
          "label" => "Team E",
          "value" => 35,
        ],
        [
          "label" => "Team F",
          "value" => 45,
        ],
        [
          "label" => "Team G",
          "value" => 95,
        ],
    ]'
>
    <x-slot name="tooltip">
        <div class="bg-gray-800 shadow rounded-md p-1.5 text-white absolute mx-2 leading-none text-xs z-30 -mt-20" x-cloak x-text="`${data.label}: ${data.value} wins`"></div>
    </x-slot>
</x-purecss-horizontal-bar-chart>

All slots gives two js properties dataIndex & data.

dataIndex: is the index of the chart-data array

data: is the single object of the chart-data array

Chart with all customization

<x-purecss-horizontal-bar-chart 
    bar-chart-id="horizontalbar"
    bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
    :chart-data='[
        [
          "label" => "Team A",
          "value" => 25,
        ],
        [
          "label" => "Team B",
          "value" => 10,
        ],
        [
          "label" => "Team C",
          "value" => 60,
        ],
        [
          "label" => "Team D",
          "value" => 80,
        ],
        [
          "label" => "Team E",
          "value" => 35,
        ],
        [
          "label" => "Team F",
          "value" => 45,
        ],
        [
          "label" => "Team G",
          "value" => 95,
        ],
    ]'
>
    <x-slot name="columnData">
        <div x-text="`${data.value} wins`"></div>
    </x-slot>

    <x-slot name="labelData">
        <div class="text-right text-sm leading-none font-medium font-mono" x-text="`For ${data.label}`"></div>
    </x-slot>

    <x-slot name="tooltip">
        <div class="bg-gray-800 shadow rounded-md p-1.5 text-white absolute mx-2 leading-none text-xs z-30 -mt-20" x-cloak x-text="`${data.label}: ${data.value} wins`"></div>
    </x-slot>
</x-purecss-horizontal-bar-chart>

You can find the full component gists here:

https://gist.github.com/mithicher/d6e416c5e087f4a0c66e282299479cf9

Check out my previous blog posts:

Create a Meilisearch Laravel Blade Component

5 Reusable Laravel Blade Components with Alpine.js

Building a Laravel Blade Table Component With Alpine.js

That's all for now. See you later!

Follow me on twitter @mithicher

Buy me a coffee

Comments (0)