Histogram
proHistorgram draws a value distribution as bars and highlights whichever sub-range currently matches a paired range control.
$100 – $350
Installation
Add this component with the NateUI CLI.
Examples
Price Filter
Popover
API
Historgram is presentational — its bars have pointer-events: none and cannot be clicked or dragged directly. Pair it with an interactive range control such as Slider.Range (see Usage) so range updates from user input.
| Prop | Description | Type | Default |
|---|---|---|---|
data | Bars to render, one per bin. label is part of the shape but not currently rendered by the component. | { value: number; label: string }[] | — |
range | Currently highlighted sub-range; bars whose bin center falls inside it render in the active color. | [number, number] | — |
min | Lower bound of the domain data spans. | number | — |
max | Upper bound of the domain data spans. | number | — |
className | Class names applied to every bar. Overriding a bg-* utility recolors all bars uniformly and loses the active/inactive distinction; shape or spacing utilities like rounded-* and mx-* override safely. | string | — |