React Sparklines

SparklinesBand

Build beautiful band sparklines

Basic Example

The <SparklinesBand/> component is the most basic component which allows to visualize band data.

<SparklinesBand data={[
    [-1, 3],
    [3, 7],
    [-5, -1],
    [6, 10],
    [null, null],
    [5, 9],
    [-2, 2],
    [6, 10],
    [1, 5],
    [2, 6],
  ]}
/>

Customization

SparklinesBand comes with flexible customization options. Build sparklines which fit your needs!

<SparklinesBand stroke="#b91c1c" fill="#b91c1c" data={data} curved />

<SparklinesBand stroke="#047857" fill="#047857" strokeWidth={4} data={data} margin={4} />

<SparklinesBand stroke="#1d4ed8" fill="yellow" data={data} curved={0.6} dots />

<SparklinesBand data={data} stroke="red" fill="#d97706" />

On this page