Patterns & effects
config.Fill variants
Areas, bars, horizontal bars and combo charts. Pattern fills get a 1px outline on bars so they stay crisp.
gradient
gradient-reverse
solid
dotted
lines
hatched
striped
duotone
duotone-reverse
Glow, strokes & buffers
| Prop | Type | Default |
|---|---|---|
| glow Blurred copy under lines, bars, slices and radar outlines. | boolean | false |
| strokeVariant Animated dashes march along the line. | "solid" | "dashed" | "animated-dashed" | "solid" |
| bufferLast Lines: last segment dashed. Bars: last bar hatched. | boolean | false |
| dotVariant Point markers. | "default" | "border" | "colored-border" | "none" | "default" |
| barShape Thin stem + round head. | "bar" | "lollipop" | "bar" |
Background textures
Painted behind the plot area with backgroundVariant.
dots
grid
cross-hatch
diagonal-lines
plus
tiny-checkers
wiggle-lines
bubbles
Entrance animations
animationType: rise grows shapes from the baseline (default for bars); left-to-right, right-to-left, center-out and edges-in wipe the chart in on the native thread; none disables it. Data changes always morph.
<AreaSeriesChart data={data} config={{ desktop: { label: "Desktop", variant: "hatched" }, mobile: { label: "Mobile", variant: "dotted", glow: true, strokeVariant: "animated-dashed" }, }} xKey="month" backgroundVariant="plus" animationType="center-out" dotVariant="colored-border" showDots/>Loading state
Every chart takes isLoading and shows a pulsing skeleton with a Loading badge in the same footprint.
Did you like the content?