Annotations

Annotations layer visual markers ON TOP of the chart — vertical lines for events, horizontal regions for target zones, point labels for outliers, image overlays for milestones. ApexCharts has annotations BUILT IN (no plugin install). Chart.js requires chartjs-plugin-annotation separately.

WireKit's <x-wirekit-chart> accepts an annotations prop that is passed through to BOTH adapters. Whichever is active picks up its expected location:

ApexCharts: options.annotations.{xaxis,yaxis,points}
Chart.js: options.plugins.annotation.annotations (graceful no-op when the plugin is missing)

Vertical line — Event marker

Revenue trend with launch-event marker

<x-wirekit-chart
    library="apexcharts"
    type="line"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'Revenue (€K)', 'data' => [42, 48, 51, 78, 89, 104]]]"
    :annotations="[
        'xaxis' => [
            [
                'x' => 'Apr',
                'borderColor' => 'var(--color-wk-accent)',
                'label' => ['text' => 'Pricing change', 'style' => ['background' => 'var(--color-wk-accent)', 'color' => '#fff']],
            ],
        ],
    ]"
    aria-label="Revenue trend with pricing-change annotation"
/>

Horizontal region — Target zone

Revenue with target zone overlay

<x-wirekit-chart
    library="apexcharts"
    type="line"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'Revenue (€K)', 'data' => [42, 48, 51, 78, 89, 104]]]"
    :annotations="[
        'yaxis' => [
            [
                'y' => 70,
                'y2' => 100,
                'borderColor' => 'transparent',
                'fillColor' => 'var(--color-wk-success)',
                'opacity' => 0.1,
                'label' => ['text' => 'Target Q1', 'style' => ['color' => 'var(--color-wk-success)']],
            ],
        ],
    ]"
    aria-label="Revenue trend with target-zone annotation"
/>

Point annotation — Outlier callout

<x-wirekit-chart
    type="line"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[['label' => 'API errors', 'data' => [12, 18, 142, 22, 15]]]"
    :annotations="[
        'points' => [
            [
                'x' => 'Wed',
                'y' => 142,
                'marker' => ['size' => 8, 'fillColor' => 'var(--color-wk-danger)'],
                'label' => [
                    'text' => 'Outage incident',
                    'borderColor' => 'var(--color-wk-danger)',
                ],
            ],
        ],
    ]"
/>

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.

Was this page helpful?

Thank you for your feedback!

What was missing? (optional)

Voting requires cookies or local storage. What we store