Loading states

Set isLoading while data is being fetched. The placeholder keeps the chart height stable.

tsx

const chart = zyplot(z => ({
  categories,
  series,
  height: 280,
  isLoading: query.isLoading,
}))

return <Chart.Line {...chart} />

Custom skeleton

The web renderer accepts a custom element. Native charts always use their built-in placeholder.

tsx

const chart = zyplot(z => ({
  categories,
  series,
  isLoading,
  skeleton: <div className="h-[280px] animate-pulse rounded-xl bg-gray-100" />,
}))

return <Chart.Line {...chart} />