Column

type="column" produces vertical bars in ApexCharts vocabulary. (For horizontal bars see type="bar" — 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

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

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

<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"
/>