vue-charts Charts
Bar List
A ranked list with a bar behind each label
A bar list ranks items, such as top pages or referrers, with a bar behind each label that shows its share of the largest value. It is plain HTML, so long labels truncate with an ellipsis, links work, and it inherits your font size.
Rows match by name-key. When the ranking changes, each row slides to its new place and its bar grows or shrinks; new rows fade in and removed rows fade out.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Row[] | required | One row per item |
name-key / data-key | row path or accessor | 'name' / 'value' | Fields for label and value |
href-key | row path or accessor | — | Field with a link; the label becomes an anchor |
sort | 'descending' | 'ascending' | 'none' | 'descending' | Order |
color | string | series color at 18 % | Bar color |
value-formatter | (value, row) => string | locale number format (1,234) | Text for the value |
locale | string | 'en-US' | Default number format |
row-height / gap | number | 32 / 4 | Row size in px |
Events and slots
| Payload | Description | |
|---|---|---|
@row-click | (row, index, event) | A row was clicked |
#name / #value | { row, index, name, value, ratio, formatted } | Replace the label or the value, for example to add an icon |
The row type Row is inferred from data. Key props accept typed row paths or accessors.