Bar

ApexCharts uses type="bar" for HORIZONTAL bars (the orientation flips at the SVG-render layer). For vertical bars use type="column". This is the inverse of the Chart.js convention — WireKit preserves both libraries' native vocabularies so existing snippets keep working.

When to use

Horizontal bars when category labels are long (single-line readability) or when comparing 8+ entries (vertical scrolling fits more rows than horizontal scrolling fits columns).

Basic Example — Top SKUs by revenue

Top 5 product SKUs by quarterly revenue

<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]],
    ]"
    aria-label="Top product SKUs by Q4 revenue"
/>

Grouped — Headcount by department per quarter

Headcount by department, last four quarters

<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 row to 100% — useful for share-of-funnel breakdowns where the absolute volume varies per row.

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. WireKit's danger-tinted palette colors negative bars red on prefers-color-scheme: dark for clarity.

License note

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

Design Tokens

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