Pattern
Subtle SVG background pattern (dots, dashed lines, crosses) drawn behind chart content. Place as the first child of ChartRoot.
Primitive:
ChartPatternInteractive demo
Usage
import { ChartRoot, ChartPattern, ChartLine } from '@ramtt/charts'
<ChartRoot data={data} height={200}>
<ChartPattern variant="dots" spacing={16} />
<ChartLine />
</ChartRoot>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'dots' | 'lines' | 'crosses' | 'none' | 'dots' | Pattern style |
| opacity | number | 0.3 | Pattern opacity |
| spacing | number | 16 | Spacing between pattern units in px |
| className | string | — | Class on the pattern <g> |