Complete example
Family
A token-detail screen with an animated placeholder, range changes, and a persistent reading chip.
Uses Line, a custom web skeleton, reveal animation, annotations, and custom tooltip placement.
Build the chart
tsx
import { Chart, zyplot } from '@hzblj/zyplot'
const chart = zyplot(z => ({
categories,
series: [
z.series({
id: 'price',
label: 'Price',
values: prices,
style: { color: '#ff4d8d', fill: z.fill({ fadeTo: 0 }), strokeWidth: 2.4 },
}),
],
animation: z.animation({
reveal: z.reveal.draw({ duration: 650, flashColor: '#ffffff', flashGlow: 1.8 }),
transition: 'morph',
}),
annotations: [
z.annotation.point({ id: 'live', x: categories.at(-1), y: prices.at(-1), pulse: true }),
],
interaction: z.interaction.scrub({ marker: z.marker.segment({ dot: true, span: 2 }) }),
}))
export function PriceChart() {
return <Chart.Line {...chart} />
}