Line
Sparkline Chart
Tiny inline chart for showing trends inside tables or KPI cards. No axes, minimal UI.
Loading chart…
#sparkline#mini#inline#kpi#table
Customization Guides & Code Snippets
◆Customizing Axis and Hiding Grid Lines
For clean inline sparklines, omit CartesianGrid and set hide on both XAxis and YAxis to eliminate all chart margins.
<LineChart data={data} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
<XAxis hide />
<YAxis hide domain={['dataMin - 5', 'dataMax + 5']} />
<Line type="monotone" dataKey="value" stroke="#00e5a0" strokeWidth={2} dot={false} />
</LineChart>◆Highlighting Endpoint Markers (Min / Max Dots)
Render a custom dot function to draw circles only on the first and last data points, leaving the line body clean.
dot={(props: any) => {
const isLast = props.index === data.length - 1;
return isLast ? <circle cx={props.cx} cy={props.cy} r={3} fill="#00e5a0" /> : null;
}}When to use a Sparkline Chart
A Sparkline Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Showing trends over time (e.g. daily active users over 30 days)
- ✓Comparing multiple metrics on the same timeline
- ✓Displaying continuous data like temperature, stock prices, or heart rate
- ✓Highlighting growth rates and momentum
Tips for Recharts Sparkline Chart
TIP 1Use type='monotone' for smooth curves instead of sharp angles
TIP 2Set dot={{ r: 4 }} to show data points without cluttering the chart
TIP 3Add a gradient fill under the line to create an area effect
TIP 4Use isAnimationActive={false} for real-time updating charts
TIP 5Multiple lines work best with 5 or fewer series — beyond that, use a table
Key Recharts Props