Histogram
Frequency histogram using Freedman–Diaconis binning with hover tooltips.
Category: chart · WCAG 2.1-AA · chart, histogram, distribution, frequency, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | Array of numeric values to bin |
bins | number | — | Explicit bin count (defaults to Freedman–Diaconis) |
title | string | — | Title text for the component. |
label | string | — | X-axis label |
description | string | — | Supporting description text. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 300 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
Design tokens
--cascivo-chart-1
When to use
- Showing the frequency distribution of a single continuous variable
- Revealing the shape, spread, and skew of binned numeric data
When not to use
- Comparing discrete labelled categories — use BarChart
- Comparing distribution summaries across groups — use Boxplot
Examples
Basic histogram
import { Histogram } from '@cascivo/charts'
const data = Array.from({length:100}, () => Math.random() * 100)
<Histogram data={data} title="Distribution" label="Value" />