Bar List
Labelled horizontal bars with their values, ranked.
<arc-bar-list>Overview
BarList shows "which of these, and by how much" in less room than a chart: one row per item, a label and a value above a bar whose length is the value's share of the largest. It suits a top-N breakdown in a tile, a card or a sidebar, where arc-chart is dashboard-sized and arc-sparkline has no labels.
Rows are ranked largest first unless you set unsorted, and limit keeps the top few. Set max to put several lists on one scale. The list is a real ordered list: each row reads as its label and value, and the bar is decoration hidden from assistive tech, so nothing depends on seeing its length.
Guidelines
When to use
- Give the list a `label` naming what is being compared
- Use `display` for formatted numbers ("1.2k", "38%") and keep `value` numeric for the bar
- Use `limit` and a "see all" link rather than a long list in a small tile
When not to use
- Do not use it for values that can be negative; a diverging arc-meter shows a lean either way
- Do not rely on bar length alone to carry the number; keep the value visible
Features
- Ranked by value, largest first, or in the given order with `unsorted`
- `limit` for a top-N view, and `max` to share one scale across lists
- Per-row `display` text for formatted values, rendered identically on server and client
- Rows can link (`href`), and the fill colour comes from `--bar-list-fill`
- An ordered list with a label per row: accessible without seeing the bars
Preview
- Search 482
- Direct 311
- Social 97
- Email 64
0 more
Usage
<arc-bar-list label="Traffic sources"></arc-bar-list>
<script>
document.querySelector('arc-bar-list').items = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
</script>import { BarList } from '@arclux/arc-ui-react';
const sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
export default function Example() {
return <BarList label="Traffic sources" items={sources} />;
}<script setup>
import { BarList } from '@arclux/arc-ui-vue';
const sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
</script>
<template>
<BarList label="Traffic sources" :items="sources" />
</template><script>
import { BarList } from '@arclux/arc-ui-svelte';
const sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
</script>
<BarList label="Traffic sources" items={sources} />import { Component } from '@angular/core';
import { BarList } from '@arclux/arc-ui-angular';
@Component({
imports: [BarList],
template: `<arc-bar-list label="Traffic sources" [items]="sources"></arc-bar-list>`,
})
export class MyComponent {
sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
}import { BarList } from '@arclux/arc-ui-solid';
const sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
export default function Example() {
return <BarList label="Traffic sources" items={sources} />;
}import { BarList } from '@arclux/arc-ui-preact';
const sources = [{ label: "Search", value: 482 }, { label: "Direct", value: 311 }, { label: "Social", value: 97 }];
export default function Example() {
return <BarList label="Traffic sources" items={sources} />;
}API
unitstring''- Text appended to each value, such as "%" or " ms".
labelstring''- Accessible name for the list, announced before its rows.
itemsArray[]- The rows, as
{ label, value, display?, href?, highlight? }objects.highlight: trueemphasises a row: its bar takes--bar-list-highlightand its label is set in bold, so the emphasis is not carried by colour alone. Set from script, a framework binding, or a JSON attribute. Rows whose value is not a finite number are dropped.displayis the text shown for the value (e.g. "1.2k"); without it the number is shown as is, so server and client render the same text in any locale. Withhref, a row's label is a link. maxnumber0- The value a full bar stands for. Defaults to the largest value, so the top row always fills the track. Set it to compare several lists on one scale.
limitnumber0- Show at most this many rows, after sorting. Unset shows all. The rows left out are counted in a closing "N more" line, which the
moreslot replaces. referencenumber0- A value to mark on every track with a dashed line, such as chance level, a target or a baseline. On the same scale as the bars.
reference-labelstring- What the reference line is. Shown with its value beneath the list, so the marker reads as text as well as a position.
reference-displaystring- The text shown for the reference's value in that caption (e.g. "6%"), as
displayis for a row. Without it the number is shown as is, withunit. unsortedbooleanfalse- Keep the order the items were given in. By default rows are ranked, largest first.
See Also
- ChartAn SVG chart for dashboards with line, area, bar, and donut types. Driven by a series array, with nice-tick scales, a legend, hover crosshair and tooltips, and a visually-hidden data table for assistive technology.
- MeterSemantic gauge display with color-coded fill zones (success, warning, error) based on configurable low/high/optimum thresholds.
- SparklineTiny inline SVG chart for embedding lightweight line or bar visualizations inside tables, stat cards, and dashboards. Renders from a simple comma-separated data string with no external charting dependencies.