Quickstart
Learn the basics of React Sparkline components.
Learn the basics of working with React Sparklines components.
After the installation, you can import any React Sparklines component and start playing around. Ready to build your first Sparkline?
Simple Sparkline
Display a simple Sparkline by using the <SparklinesLine/> Component.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesLine data={data} />Sparkline with Bars
Display a simple Sparkline with Bars by using the <SparklinesBar/> Component.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesBar data={data} />Sparkline with Band
Display a simple Sparkline with Bands by using the <SparklinesBand/> Component.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesBand data={data} />Sparkline with Line and Bar
Display a simple Sparkline with Line and Bars by using the <SparklinesComposed/>
Component.
const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];
<SparklinesComposed data={data}>
<Line />
<Bar />
</SparklinesComposed>
const complexData = data.map((v, i) => ({ a: v, b: data[data.length - i - 1] }));
<SparklinesComposed data={complexData}>
<Bar dataKey="a" />
<Line dataKey="b" />
</SparklinesComposed>