Sparkline Components
Bar
Bar component for use inside SparklinesComposed
The <Bar/> component is used inside <SparklinesComposed/> to render bar series.
Usage
import { SparklinesComposed, Bar } from "@lueton/react-sparklines";
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesComposed data={data}>
<Bar />
</SparklinesComposed>Rounded Corners
Use radius to add rounded corners to bars.
// All corners
<SparklinesComposed data={data}>
<Bar radius={8} />
</SparklinesComposed>
// Specific corners
<SparklinesComposed data={data}>
<Bar radius={{ topLeft: 5, topRight: 5 }} />
</SparklinesComposed>Bar Sizing
Control bar width with maxBarWidth or barWidth.
<SparklinesComposed data={data}>
<Bar maxBarWidth={10} />
</SparklinesComposed>
<SparklinesComposed data={data}>
<Bar maxBarWidth={4} radius={4} />
</SparklinesComposed>Positive / Negative Styling
Override styling based on value sign.
<SparklinesComposed data={[5, 2, -1, -3, -4, 2, 0, -2, 3, 4]}>
<Bar
positive={{ fill: "green", radius: { topLeft: 5, topRight: 5 } }}
negative={{ fill: "red", radius: { bottomLeft: 5, bottomRight: 5 } }}
/>
</SparklinesComposed>Custom Styling
<SparklinesComposed data={data}>
<Bar fill="#be185d" stroke="#d97706" strokeWidth={1} />
</SparklinesComposed>
<SparklinesComposed data={data}>
<Bar
radius={{ topLeft: 5, topRight: 5 }}
maxBarWidth={10}
strokeWidth={2}
stroke="#059669"
fill="transparent"
/>
</SparklinesComposed>For the full list of properties, see the Bar API.