update-and-animate-charts

name	update-and-animate-charts
description	Update TanStack Charts through stable definition and datum identity, configure SVG motion, and preserve correctness during resize, interruption, streaming, and rolling windows. Load for reactive data, animation, reordering, enter/exit, or stale interaction state.
metadata	{"type":"core","library":"@tanstack/charts","library_version":"0.16.0"}
sources	["TanStack/charts:docs/guides/dynamic-data-and-animation.md","TanStack/charts:docs/reference/motion.md","TanStack/charts:docs/reference/chart-definitions.md"]

Update and Animate Charts

Use trigger → inspect → decide → build → verify. Definition identity is the application update boundary; mark and datum identities determine what survives it.

Setup

Create a new definition only when captured data or visual policy changes, then update the host with that definition:

import { barX, defineChart, mountChart } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'

interface Row {
  : 
  : 
  : 
}

 () {
   ranked = [...rows].( right. - left.)

   ({
    : { : , :  },
    : [(ranked, { : , : , : , :  })],
    : {
      : { : scaleLinear, :  },
      : { :  scaleBand<>().() },
    },
  })
}

 element = .<>()
 (!element)   ()

 :  [] = [
  { : , : , :  },
  { : , : , :  },
]

 options = {
  : (firstRows),
  : ,
  : ,
}

  host = (element, options)

  () {
  host.({ ...options, : (rows) })
}