ns-ui

Chart Bar Dither

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.json
  • chart
  • bar
  • data-viz
  • dither
  • canvas
  • ink

ns-ui / chart-bar-dither

WEEKLY SIGNUPS

Props

PropTypeDefaultDescription
data?ChartBarDitherDatum[]
title?stringchart title, used as the figure's accessible name and table caption
className?string