logo
v2.5.8

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: 80%

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

Women Farmers: 80%

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

Women Farmers: 80%

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

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: 40%

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

Women Farmers: 40%

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

Women Farmers: 40%

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

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 twelve colors to choose from.

primary red yellow green blue pink cyan purple gray orange violet indigo fuchsia
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