Complete example
Health
A steps screen with value labels, a minimal grid, and two-finger range totals.
Uses Bar, measured annotations, useChartScrub, and native range interaction.
Build the chart
tsx
import { Chart, zyplot } from '@hzblj/zyplot'
const chart = zyplot(z => ({
categories: days,
series: [
z.series({ id: 'steps', label: 'Steps', values: steps, style: { color: '#ff3b30' } }),
],
yAxis: z.axis.overlay({ grid: true, tickCount: 2 }),
plot: z.plot({ padding: { top: 20 } }),
interaction: z.interaction.scrub({
range: true,
rangeStyle: { color: '#ff3b30', dimOpacity: 0.3, dot: true },
}),
format: z.format({ locale: 'en-US' }),
}))
export function StepsChart() {
return <Chart.Bar {...chart} />
}