SparklinesLine
Build beautiful line sparklines
Basic Example
The <SparklinesLine/> component is the most basic component which allows to visualize a simple graph.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesLine data={data} />Customization
SparklinesLine comes with flexible customization options. Build sparklines which fit your needs!
<SparklinesLine
stroke="#b91c1c"
fill="#b91c1c"
data={data}
curved
/>
<SparklinesLine
stroke="#047857"
fill="#047857"
data={data}
strokeWidth={4}
margin={4}
/>
<SparklinesLine
stroke="#1d4ed8"
fill="none"
data={data}
curved={0.6}
/>
<SparklinesLine
data={data}
stroke="#d97706"
fill="#d97706"
/>Gradients
It also has gradients! Simply make use of the fill property to link your gradient.
When using gradients without a stroke make sure to also pass the labelColor property to provide a usable color for <Tooltip/>.
<SparklinesLine
data={data}
color={"#7c3aed"}
fill="url(#my-gradient)"
fillOpacity={0.6}
>
<defs>
<linearGradient id="my-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stopColor="#7c3aed" />
<stop offset="100%" stopColor="#d97706" />
</linearGradient>
</defs>
</SparklinesLine>Dots
Dots are a handy feature to highlight your data points.
To display them simply make use of the dots property.
<SparklinesLine data={data} dots />You can also customize the styling, visibility and even the shape of the dots!
<SparklinesLine
data={data}
dots={{ style: { fill: "#f59e0b" } }}
/>
<SparklinesLine
data={data}
dots={(props) => <circle {...props} fill="#047857" r={6} />}
margin={6}
/>
<SparklinesLine
data={data}
dots={<circle fill="#06b6d4" />}
/>
<SparklinesLine
data={data}
dots={{ fill: "#e11d48", dot: <circle r={5} /> }}
/>
<SparklinesLine
data={data}
dots={{
dot: (props) => (
<rect fill="white" x={props.cx - 2} y={props.cy - 2} height={4} width={4} />
),
}}
/>
<SparklinesLine
data={data}
dots={{
show: "START_END",
dot: (props) => (
<rect fill="#b45309" x={props.cx - 2} y={props.cy - 2} height={4} width={4} />
),
}}
/>Tooltip
When using the <Tooltip/> component an active dot is displayed by default to indicate the highlighted position. The active dot can be customized by using the activeDot property, which is similar to the dots property.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesLine data={data}>
<Tooltip/>
</SparklinesLine>For further configuration please have a look at the <Tooltip/> component.