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

<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, speed: 250 } passed into chart.updateOptions() when the dark-mode observer fires. The key is speed — ApexCharts has no duration under dynamicAnimation, and an unknown key there is ignored without a word, so a reader copying this line would have got no interpolation and no error.

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:

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

Custom animation timing

<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 and apexcharts.com/license for the full terms.

See Also

• Theming for the full CSS-variable bridge documentation
• Animations for WireKit's app-wide motion-preset system

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.