Frame and legend

Chart.Frame and Chart.Legend are available from the web entry point.

tsx

import { Chart, zyplot } from '@hzblj/zyplot/web'

const legend = [
  { id: 'revenue', label: 'Revenue', color: '#6d28d9' },
  { id: 'costs', label: 'Costs', color: '#0284c7' },
]

const chart = zyplot(z => ({
  categories: ['Jan', 'Feb', 'Mar'],
  series: [
    z.series({ id: 'revenue', label: 'Revenue', values: [42, 56, 72] }),
    z.series({ id: 'costs', label: 'Costs', values: [28, 34, 41] }),
  ],
}))

export function RevenueCard() {
  return (
    <Chart.Frame title="Revenue" description="Last 6 months" caption="Updated today">
      <Chart.Line {...chart} />
      <Chart.Legend items={legend} />
    </Chart.Frame>
  )
}

Frame props

Name	Type	Default	Description
`title`	`string`	—	Main heading.
`description`	`string`	—	Text below the heading.
`actions`	`ReactNode`	—	Controls placed in the header.
`caption`	`string`	—	Small text below the chart.
`children`*	`ReactNode`	—	Chart and optional legend.

Legend props

Name	Type	Default	Description
`items`*	`ChartLegendItem[]`	—	Stable id, visible label, and color for each item.
`className`	`string`	—	CSS class on the list.