Logo
Neura UI
Loading…
Logo
All pages 86

Bars

Lightweight CSS bar charts with zero JavaScript — for panels, comparisons, and decorative analytics

Basic Usage

Pass numeric values or labeled objects:
blade 
<neura::bars
    height="10rem"
    color="fg"
    variant="soft"
    :data="[40, 52, 48, 65, 58, 72, 70, 78, 74, 86, 82, 94]"
/>

With Labels

Use associative items for labels, values, and per-bar colors:
blade 
<neura::bars
    height="12rem"
    :showLabels="true"
    :showValues="true"
    :data="[
        ['value' => 42, 'label' => 'Mon'],
        ['value' => 74, 'label' => 'Thu', 'color' => 'success'],
    ]"
/>

Colors & Variants

blade
Solid
Soft 
<neura::bars color="primary" :data="[...]" />
<neura::bars color="primary" variant="soft" :data="[...]" />

Props

Prop Type Default Description
data array [] Numbers or {value, label?, color?} objects
height string 8rem CSS height of the chart
color string primary Default bar color token
variant string solid solid or soft
gap string sm none, xs, sm, md, lg
showLabels / showValues bool false Toggle label / value captions

When to use Bars vs Chart

Use neura::bars for decorative / panel charts. Prefer neura::chart when you need axes, tooltips, and multi-series.