Quick Start

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} />

That was easy right?

You prefer Bars? Don't worry, React Sparklines got you! 🤜🤛

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} />

What did you say? You want to display even more data? 🔥

Sparkline with Line and Bar

Display a simple Sparkline with Line and Bars by using the <SparklineComposed/> 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>

At this point you just need to be creative! 🌈