ns-ui / chart-bar-dither
WEEKLY SIGNUPS
ns-ui
Canvas bar chart in ordered-dither ink density, where hovering or focusing a bar pulls it into sharper resolution while the rest ease back to a coarse print.
Use when comparing values across nominal categories where the dither itself should react to attention, not just sit as a static plate — pick chart-bar-halftone instead for the same comparison rendered as plain SVG patterns with no per-bar resolution change, or chart-line-dither when the series is continuous over time rather than discrete categories.
Install
npx shadcn add https://design.helpmarq.com /r/chart-bar-dither.jsonns-ui / chart-bar-dither
| Prop | Type | Default | Description |
|---|---|---|---|
| data? | ChartBarDitherDatum[] | — | — |
| title? | string | — | chart title, used as the figure's accessible name and table caption |
| className? | string | — | — |