Sparkline

Usage

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart } from "recharts"

<Chart.Root>
  <AreaChart>
    <Area />
  </AreaChart>
</Chart.Root>

Examples

Bar Chart

Sparklines can be made with bar charts.

Line Chart

Sparklines can also be made with line charts.

Stock

Here's a composition of a sparkline that shows stock prices.

Stat

Here's a composition of a sparkline that shows a SaaS dashboard stat.

Gradient

Use the Chart.Gradient component to create a gradient fill.

<defs>
  <Chart.Gradient
    id="custom-gradient"
    stops={[
      { offset: "0%", color: "teal.solid", opacity: 1 },
      { offset: "100%", color: "teal.solid", opacity: 0.01 },
    ]}
  />
</defs>

Reference

To reference a specific value on the sparkline, use the Reference component from recharts.

Interaction

Here's an example that mimics the NPM download stats.

Composition

Here's a composition that shows a sparkline for a stock price.