Preview Updated 2026-05-10

Histogram

Binned histogram with one bar per bin.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

src/App.vue vue

<CfHistogram ... />

src/App.tsx tsx

<CfHistogram ... />

Two typical distributions

Normal vs. long-tail distribution — for long-tailed data, consider log-scale bin labels.

正态分布

长尾分布

src/App.vue vue

<CfHistogram :bins="bins" />

src/App.tsx tsx

<CfHistogram bins={bins} />

API

Prop	Type	Default	Description
`bins`	`HistogramBin[]`	`—`	{ label, count }[]
`colorIndex`	`0..7`	`0`
`showLabels`	`boolean`	`true`	Show/hide bin labels