Sparkline Components
Band
Band component for use inside SparklinesComposed
The <Band/> component is used inside <SparklinesComposed/> to render a range band (two-value data).
Usage
import { SparklinesComposed, Band } from "@lueton/react-sparklines";
const data = [
[-1, 3],
[3, 7],
[-5, -1],
[6, 10],
[null, null],
[5, 9],
[-2, 2],
[6, 10],
[1, 5],
[2, 6],
];
<SparklinesComposed data={data}>
<Band />
</SparklinesComposed>Curved Band
Use the curved prop for smooth curves.
<SparklinesComposed data={data}>
<Band curved />
</SparklinesComposed>Custom Styling
<SparklinesComposed data={data}>
<Band stroke="#b91c1c" fill="#b91c1c" />
</SparklinesComposed>
<SparklinesComposed data={data}>
<Band stroke="#047857" fill="#047857" strokeWidth={3} curved />
</SparklinesComposed>Dots
Display data point indicators on band edges.
<SparklinesComposed data={data}>
<Band dots />
</SparklinesComposed>For the full list of properties, see the Band API.