---
title: Bar
description: Horizontal bars — grouped, stacked, 100%-stacked, and negative-axis patterns.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/column
  - /components/charts-chartjs/bar
---

# Bar

ApexCharts uses `type="bar"` for HORIZONTAL bars (the orientation flips at the SVG-render layer). For vertical bars use [`type="column"`](./column.md). 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

:::preview{title="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

:::preview{title="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

```blade
<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

```blade
<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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Column charts](./column.md) for vertical-bar orientation
- [Range-bar charts](./range-bar.md) for Gantt-style schedule visualizations
- [Chart.js bar demos](../charts-chartjs/bar.md)

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.