---
title: Column
description: Vertical bar charts — grouped, stacked, range, and dynamic-loaded patterns.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/bar
  - /components/charts-apex/range-bar
---

# Column

`type="column"` produces vertical bars in ApexCharts vocabulary. (For horizontal bars see [`type="bar"`](./bar.md) — the inverse of Chart.js's convention.)

> Note: `column` is an ApexCharts-specific chart type. Calling `<x-wirekit-chart type="column">` while `charts.library` is `chartjs` throws `TypeNotSupportedException` with a switch-library hint.

## Basic Example — Quarterly revenue

:::preview{title="Quarterly revenue (€K)"}
<x-wirekit-chart
    library="apexcharts"
    type="column"
    :labels="['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6']"
    :datasets="[
        ['label' => 'Revenue (€K)', 'data' => [42, 58, 71, 89, 104, 121]],
    ]"
    aria-label="Quarterly revenue trend"
/>
:::

## Grouped — Multi-metric comparison

:::preview{title="Revenue / Costs / Profit per quarter"}
<x-wirekit-chart
    library="apexcharts"
    type="column"
    :labels="['Q1', 'Q2', 'Q3', 'Q4']"
    :datasets="[
        ['label' => 'Revenue', 'data' => [42, 58, 71, 89]],
        ['label' => 'Costs',   'data' => [38, 47, 54, 67]],
        ['label' => 'Profit',  'data' => [4, 11, 17, 22]],
    ]"
    aria-label="Revenue, costs, and profit grouped by quarter"
/>
:::

## Stacked

```blade
<x-wirekit-chart
    type="column"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[
        ['label' => 'Open',     'data' => [12, 18, 14, 22, 15]],
        ['label' => 'In progress', 'data' => [8, 12, 10, 18, 11]],
        ['label' => 'Resolved',  'data' => [22, 28, 25, 32, 27]],
    ]"
    :options="['chart' => ['stacked' => true]]"
    height="280px"
/>
```

## 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

- [Bar charts](./bar.md) for the horizontal-bar equivalent
- [Range Bar](./range-bar.md) for Gantt-style schedule visualizations

## Design Tokens

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