Introduction
Pixel-art charts on Recharts with dithered crest-to-depth fills and chunky cells.
dune-charts gives you pixel-art charts on top of Recharts. Use it when you want textured fills (pixel cells, Bayer dither, crest-to-depth bands) instead of smooth SVG gradients.
Charts are built from parts, not props. The root owns data, theme, and loading. Axes, tooltip, legend, and series are children. Leave a part out to hide it.
Stacked areaAll series share one stack.
Why parts?
A large props API pushes every chart toward the same defaults. Composition keeps the surface small:
- Hide the legend by omitting the Legend part.
- Stack series by sharing a
stackId. - Pass extra Recharts options with
chartPropson the root.
Fills
| Prop | What it does |
|---|---|
fill="bands" | Solid crest-to-depth ribbons |
fill="dither" | 8×8 Bayer mesh on an opaque underpaint |
pixel | Cell size in CSS pixels (default 2) |
Charts
| Chart | Use when you need |
|---|---|
| Area | Trends and stacked volumes |
| Bar | Grouped, stacked, or horizontal comparisons |
| Line | Multi-series trends without area fill |
| Pie | Part-to-whole wedges or a donut |
| Radar | Multi-axis profiles on a polar grid |
| Radial | Concentric ring arcs or gauges |