---
title: Annotations
description: Vertical lines, horizontal regions, point labels, and image overlays.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-chartjs/advanced
---

# 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

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

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

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

## See Also

- [Chart.js advanced patterns](../charts-chartjs/advanced.md#annotations-layer) for the plugin-based path
- [Streaming](./streaming.md) for time-series with live updates that benefit from event-marker annotations

## Design Tokens

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