PercentageBar

This is a component presenting a categorized progress or participation. An example of use and inspiration is the GitHub component showing the participation of programming languages in the repository.

Props

size

Specifies if overlay can be closed (by default: yes)

type:String

default:md

values:xs, sm, md, lg, xl

bars

Specifies whether overlay should have a fixed position (default) or absolute.

type:Array<{name: string, width: number, color: string}>

default:[]

legend

Determines whether overlay should have a fixed position (default) or absolute.

type:Boolean

default:true

WARNING

The correct value board should be delivered to the component. The component does not check the range of values.

Examples

Full filling

Indigo50.1%Red17.8%Green1.5%Orange15.6%Pink15%

<percentage-bar
  :bars="[
    { name: 'Indigo', width: 50.1, color: '#6366f1' },
    { name: 'Red', width: 17.8, color: '#e11d48' },
    { name: 'Green', width: 1.5, color: '#0d9488' },
    { name: 'Orange', width: 15.6, color: '#d97706' },
    { name: 'Pink', width: 5.0, color: '#db2777' }
    ]"
/>

Partial filling in lg size

Indigo50.1%Red17.8%

<percentage-bar
  size="lg"
  :bars="[
    { name: 'Indigo', width: 50.1, color: '#6366f1' },
    { name: 'Red', width: 17.8, color: '#e11d48' }
    ]"
/>

Filling in size XS without legend

<percentage-bar
  :legend="false"
  size="xs"
  :bars="[
    { name: 'Indigo', width: 50.1, color: '#6366f1' },
    { name: 'Green', width: 19.3, color: '#0d9488' },
    { name: 'Orange', width: 15.6, color: '#d97706' },
    { name: 'Pink', width: 15.0, color: '#db2777' }
    ]"
/>