---
title: Motion
description: Animation showcase including dark-mode preset transitions and reduced-motion handling.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/theming
  - /animations
---

# Motion

ApexCharts ships with built-in entrance animations (each series draws over ~400 ms by default). WireKit's adapter adds a smooth transition (~250 ms ease-out) on dark-mode toggle so every chart re-themes WITHOUT a flicker — colors fade between light and dark palettes instead of snapping.

## Basic Example — Default entrance animation

:::preview{title="Bar chart with default entrance animation"}
<x-wirekit-chart
    library="apexcharts"
    type="column"
    :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"
    :datasets="[['label' => 'Revenue (€K)', 'data' => [42, 58, 71, 89, 104, 124]]]"
    aria-label="Revenue trend with entrance animation"
    replayable
/>
:::

The columns animate from the baseline upwards on initial render; the line in mixed charts animates left-to-right.

## Dark-mode transition

Toggle the docs site's dark/light switch (top-right) and watch every chart on this page re-theme over ~250 ms — no flash, no re-render. The smooth interpolation is enabled via `dynamicAnimation: { enabled: true, duration: 250 }` passed into `chart.updateOptions()` when the dark-mode observer fires.

`prefers-reduced-motion: reduce` (OS-level setting) collapses the transition to instant — accessibility-respectful by default.

## Disable animation entirely

Pass options to skip the entrance animation — useful for static screenshots or print contexts:

```blade
<x-wirekit-chart
    type="line"
    :labels="$labels"
    :datasets="$datasets"
    :options="['chart' => ['animations' => ['enabled' => false]]]"
/>
```

## Custom animation timing

```blade
<x-wirekit-chart
    type="bar"
    :labels="$labels"
    :datasets="$datasets"
    :options="[
        'chart' => [
            'animations' => [
                'enabled' => true,
                'easing' => 'easeinout',
                'speed' => 800,
                'animateGradually' => ['enabled' => true, 'delay' => 150],
            ],
        ],
    ]"
/>
```

`animateGradually` sequences each data point individually with a configurable delay between them — produces the "drawing on" effect favored by financial dashboards.

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

- [Theming](./theming.md) for the full CSS-variable bridge documentation
- [Animations](/animations) for WireKit's app-wide motion-preset system

## Design Tokens

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