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)',
                ],
            ],
        ],
    ]"
/>