bladewindUI

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%

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


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 blue There are nine colors to choose from.
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