Horizontal Line Graph

This component is structurally similar to the Progress Bar component. In fact, it is rendered using the progress bar component. The default colour used for the horizontal line graph is blue.

Women Farmers: 55.8%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="55.8" />

That’s the basic syntax for displaying a horizontal line graph but let’s look at more practical examples of how to use this component in your applications.

Mobile Money Penetration

MTN: 55%

Vodafone: 30%

AirtelTigo: 15%

Farmer age ratio

Above 60: 33%

Between 40 - 60: 43%

Under 40: 24%

        
            <div class="grid grid-cols-2 gap-6">

                <x-bladewind.card title="Mobile Money Penetration">

                    <x-bladewind.horizontal-line-graph
                        label="MTN: "
                        percentage="55"
                        color="yellow" />

                    <x-bladewind.horizontal-line-graph
                        label="Vodafone: "
                        percentage="30"
                        color="red"
                        class="py-3" />

                    <x-bladewind.horizontal-line-graph
                        label="AirtelTigo: "
                        percentage="15"
                        color="blue" />

                </x-bladewind.card>

                <x-bladewind.card title="Farmer age ratio">

                    <x-bladewind.horizontal-line-graph
                        label="Above 60: "
                        percentage="33"
                        color="cyan" />

                    <x-bladewind.horizontal-line-graph
                        label="Between 40 - 60: "
                        percentage="43"
                        color="purple"
                        class="py-3" />

                    <x-bladewind.horizontal-line-graph
                        label="Under 40: "
                        percentage="24"
                        color="gray" />

                </x-bladewind.card>

            </div>

Different Colours

You can display a horizontal line graph in nine different colours by setting the color attribute on the component, like this, color="red". Like most BladewindUI components that have colour options, there are two shades, faint, and dark. The default shade is faint. You can switch between shades by setting shade="dark" or shade="faint"

Faint Colours

Women Farmers: 10%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="10"
                color="red" />

Women Farmers: 20%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="20"
                color="yellow"/>

Women Farmers: 30%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="30"
                color="green" />

Women Farmers: 40%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="40"
                color="pink" />

Women Farmers: 50%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="50"
                    color="cyan" />

Women Farmers: 60%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="60"
                    color="gray" />

Women Farmers: 70%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="70"
                    color="purple" />

Women Farmers: 80%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="80"
                    color="orange" />

Women Farmers: 90%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="90" />

Dark Colours

Women Farmers: 10%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="10"
                    shade="dark" color="red" />

Women Farmers: 20%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="20"
                    shade="dark" color="yellow" />

Women Farmers: 30%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="30"
                    shade="dark" color="green" />

Women Farmers: 40%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="40"
                    shade="dark" color="pink" />

Women Farmers: 50%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="50"
                    shade="dark" color="cyan" />

Women Farmers: 60%

            
                <x-bladewind.horizontal-line-graph
                    label="Women Farmers: "
                    percentage="60"
                    shade="dark" color="gray" />

Women Farmers: 70%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="70"
                shade="dark" color="purple" />

Women Farmers: 80%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="80"
                shade="dark" color="orange" />

Women Farmers: 90%

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage="90"
                shade="dark" />

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Horizontal Line Graph component.

IMPORTANT: Projects running Laravel 8 please read this

Option	Default	Available Values
percentage	0	Any value between 0 and 100.
color	primary	There are nine colors to choose from. `primary` `red` `yellow` `green` `blue` `pink` `cyan` `purple` `gray` `orange`
shade	faint	Works with `color` to determine how faint or dark the horizontal line graph colours are. `faint` `dark`
label	blank	Label to display above the horizontal line graph.
percentage_label_opacity	50	Specifies the opacity of the percentage label. In case you want the percentage label to be displayed a shade less than the label. Available values are what's been defined in the TailwindCSS docs for opacity without the 'opacity-' prefix. `0` `5` `10` `20` `25` `30` `40` `50` `60` `70` `75` `80` `90` `95` `100`
class	bw-horizontal-line-graph	Any additional CSS you wish to add.

Horizontal Line Graph with all attributes defined

        
            <x-bladewind.horizontal-line-graph
                label="Women Farmers: "
                percentage = "50"
                color = "red",
                shade = "faint",
                percentage_label_opacity = "75",
                class="py-4" />

The source file for this component is available in resources > views > components > bladewind > horizontal-line-graph.blade.php