Bar

type="bar" draws a bar chart on the ApexCharts adapter. type="column" is the same chart under the other library's spelling — WireKit accepts both so existing snippets keep working, and it maps column onto ApexCharts' bar before rendering.

:options="['plotOptions' => ['bar' => ['horizontal' => true]]]"

When to use

Bars when you are comparing a value across a handful of named categories. Reach for the rotated orientation above when the category labels are long — a name that reads on one line beside its bar is truncated to a few characters under a vertical axis — or when there are more entries than fit across the width.

Basic Example — Top SKUs by revenue

The SKU names below are long, so this example takes the rotated orientation. Drop the plotOptions line and the same data renders as vertical columns.

<x-wirekit-chart
    library="apexcharts"
    type="bar"
    :labels="['Pro Subscription', 'Enterprise Plan', 'Starter Plan', 'Add-on: Reports', 'Add-on: SSO']"
    :datasets="[
        ['label' => 'Q4 Revenue (€K)', 'data' => [340, 280, 165, 92, 48]],
    ]"
    :options="['plotOptions' => ['bar' => ['horizontal' => true]]]"
    aria-label="Top product SKUs by Q4 revenue"
/>

Grouped — Headcount by department per quarter

<x-wirekit-chart
    library="apexcharts"
    type="bar"
    :labels="['Engineering', 'Product', 'Sales', 'Marketing', 'Operations']"
    :datasets="[
        ['label' => 'Q1', 'data' => [12, 4, 6, 3, 2]],
        ['label' => 'Q2', 'data' => [16, 5, 8, 4, 3]],
        ['label' => 'Q3', 'data' => [21, 6, 11, 5, 3]],
        ['label' => 'Q4', 'data' => [25, 7, 14, 6, 4]],
    ]"
    aria-label="Headcount by department over four quarters"
/>

Stacked + 100% scaled

<x-wirekit-chart
    type="bar"
    :labels="['Onboarding', 'Activation', 'Retention', 'Expansion']"
    :datasets="[
        ['label' => 'Self-serve', 'data' => [78, 65, 42, 22]],
        ['label' => 'Sales-led',  'data' => [22, 35, 58, 78]],
    ]"
    :options="['chart' => ['stacked' => true, 'stackType' => '100%']]"
    height="320px"
/>

stackType: '100%' scales each category to 100% — useful for share-of-funnel breakdowns where the absolute volume varies per category.

Negative-axis — Cash flow

<x-wirekit-chart
    type="bar"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[
        ['label' => 'Net cash flow (€K)', 'data' => [-18, -12, 3, 8, 22, 31]],
    ]"
    aria-label="Monthly net cash flow including negative-axis losses"
/>

Negative values render below the zero baseline; the axis automatically extends to accommodate. Nothing colors a bar by its sign — every bar in a series carries that series' color, so a loss reads as a loss from its direction rather than its hue. If you want the sign to carry color as well, give each point its own fillColor — the same per-point form Timeline uses, and it accepts a var(--color-wk-*) token.

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

See Also

• Column charts for the same chart under the Chart.js spelling
• Range-bar charts for Gantt-style schedule visualizations
• Chart.js bar demos

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.