Motion

animate={false} disables chart entrances and inspection movement. Opted-in tooltip digit shuffle is independent; omit valueAnimation="shuffle" too when the application owns all timing. true enables family defaults; supported object forms tune them. Reduced-motion preferences show final geometry and disable Kind inspection motion. This does not remove the required Motion peer or change package contents. Custom renderers and application animations retain their own responsibilities.

Family defaultsCopy Anchor Link

The matrix describes the public components. “Update” means data/geometry changes, separately from tooltip movement or visibility fades. No family promises automatic interpolation between datasets or chart types. Changed inputs or interaction finish an entrance; remount when an intentional replay is needed.

ActivityRings is available from the public package, inherits Radial entrance options and defaults to false.

Option objectsCopy Anchor Link

Line, Area, Bar, Pie, Radar, Radial and Scatter export family aliases with revealDurationMs, revealEasing and hoverTransition. Entrance duration is milliseconds; Motion transition duration is seconds. The default hover transition is a spring with stiffness 210, damping 28 and mass 0.8. Cartesian reveal easing defaults to [0.25, 0.1, 0.25, 1]; polar and Scatter default to "easeOut".

import * as Chart from "@kind-ui/charts";

export const line = { revealDurationMs: 600, revealEasing: "easeOut",
  hoverTransition: { type: "tween", duration: 0.12 } } satisfies Chart.LineAnimation;
export const area = line satisfies Chart.AreaAnimation;
export const bar = line satisfies Chart.BarAnimation;
export const pie = line satisfies Chart.PieAnimation;
export const radar = line satisfies Chart.RadarAnimation;
export const radial = line satisfies Chart.RadialBarAnimation;
export const scatter = line satisfies Chart.ScatterAnimation;
export const combo = { ...line, lineReveal: false,
  areaReveal: { revealDurationMs: 500 }, barReveal: { revealDurationMs: 700 }
} satisfies Chart.ComboAnimation;
export const sankey = { revealDurationMs: 900 } satisfies Chart.SankeyAnimation;
export const heatmap: NonNullable<Chart.HeatmapChartProps["animate"]> = true;

Pass the matching object to its chart's animate prop. Histogram, Waterfall and Box Plot use BarAnimation. Combo family overrides tune entrances only; false skips that family's reveal while shared inspection motion remains available. Pie and Radial additionally expose animationDirection="clockwise" or "anticlockwise"; this changes entrance direction, preserving final native geometry.

Native per-series animation is disabled by Kind series so the chart owns timing. Shape/filter/transform escape hatches can bypass a built-in reveal; refer to each Components page for its exact boundary. Tooltip digit shuffle is separately opt-in through valueAnimation="shuffle", respects reduced motion and is not a data/geometry transition. Custom tooltip content owns its own animation.

Custom choreographyCopy Anchor Link

A Line-to-Bar transformation, scene sequence or video timeline is application-authored. This example uses a consumer-supplied progress value to crossfade two charts. It does not morph their geometry. Both charts disable built-in timing; the caller owns the timeline and should supply final progress for reduced motion.

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [{ month: "Jan", visitors: 42 }, { month: "Feb", visitors: 58 }];
const config = { visitors: { label: "Visitors", color: "#733bff" } };

export function ChartTransition({ progress }: { progress: number }) {
  const t = Math.max(0, Math.min(1, progress));
  return <div style={{ display: "grid", height: 240 }}>
    <div aria-hidden={t >= 0.5} inert={t >= 0.5}
      style={{ gridArea: "1 / 1", opacity: 1 - t }}>
      <Chart.LineChart data={data} config={config} xDataKey="month" height={240}
        animate={false} tooltip={false} legend={false} aria-label="Monthly visitors as a line" />
    </div>
    <Chart.Root config={config} style={{ gridArea: "1 / 1", opacity: t }}
      aria-hidden={t < 0.5} inert={t < 0.5}>
      <Chart.BarChart data={data} width={320} height={240} animate={false}
        aria-label="Monthly visitors as bars">
        <Chart.XAxis dataKey="month" /><Chart.YAxis />
        <Chart.BarSeries dataKey="visitors" />
      </Chart.BarChart>
    </Chart.Root>
  </div>;
}

Keep an accessible data alternative outside a decorative video scene. External timing and custom renderers remain consumer-owned even when chart motion is disabled.

Custom choreographyCopy Anchor Link

ActivityRings uses RadialBar entrance options with motion off by default. Coordinate motion across charts and custom renderers in your application.