Sparkline

A small, simple chart without axes or coordinates that shows the general shape of data variation, typically used inline with text or in small spaces

Storybook

AI TipWant to skip the docs? Use the MCP Server

"use client"

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

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
      { value: 10 },
      { value: 18 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root width="28" height="12" chart={chart}>
      <AreaChart data={chart.data}>
        {chart.series.map((item) => (
          <Area
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            fillOpacity={0.2}
            stroke={chart.color(item.color)}
            strokeWidth={2}
          />
        ))}
      </AreaChart>
    </Chart.Root>
  )
}

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.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, Cell } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 10, fill: "teal.solid" },
      { value: 16, fill: "green.solid" },
      { value: 19, fill: "teal.solid" },
      { value: 15, fill: "green.solid" },
      { value: 12, fill: "teal.solid" },
      { value: 15, fill: "teal.solid" },
      { value: 10, fill: "teal.solid" },
      { value: 18, fill: "teal.solid" },
    ],
  })

  return (
    <Chart.Root width="28" height="12" chart={chart}>
      <BarChart data={chart.data} barSize={8}>
        <Bar
          isAnimationActive={false}
          dataKey={chart.key("value")}
          fill={chart.color("teal.solid")}
          stroke=""
        >
          {chart.data.map((item) => (
            <Cell key={item.value} fill={chart.color(item.fill)} />
          ))}
        </Bar>
      </BarChart>
    </Chart.Root>
  )
}

Line Chart

Sparklines can also be made with line charts.

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Line, LineChart } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
      { value: 10 },
      { value: 18 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root width="28" height="12" chart={chart}>
      <LineChart data={chart.data}>
        {chart.series.map((item) => (
          <Line
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            stroke={chart.color(item.color)}
            strokeWidth={2}
            dot={false}
          />
        ))}
      </LineChart>
    </Chart.Root>
  )
}

Stock

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

AMZN

Amazon Inc.

$189.4630.28%

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Badge,
  Box,
  Card,
  FormatNumber,
  Span,
  Stack,
  Stat,
} from "@chakra-ui/react"
import { Area, AreaChart } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { date: "2023-01", value: 145.43 },
      { date: "2023-02", value: 151.73 },
      { date: "2023-03", value: 157.65 },
      { date: "2023-04", value: 169.68 },
      { date: "2023-05", value: 173.75 },
      { date: "2023-06", value: 186.68 },
      { date: "2023-07", value: 181.99 },
      { date: "2023-08", value: 189.46 },
    ],
    series: [{ name: "value", color: "green.solid" }],
  })

  const closing = chart.data[chart.data.length - 1]
  const opening = chart.data[0]
  const trend = (closing.value - opening.value) / opening.value

  return (
    <Card.Root maxW="sm" size="sm">
      <Card.Body flexDirection="row" alignItems="center">
        <Stack gap="0" flex="1">
          <Box fontWeight="semibold" textStyle="sm">
            AMZN
          </Box>
          <Box textStyle="xs" color="fg.muted">
            Amazon Inc.
          </Box>
        </Stack>

        <Chart.Root width="28" height="12" chart={chart}>
          <AreaChart data={chart.data}>
            <defs>
              <Chart.Gradient
                id="sp-gradient"
                stops={[
                  { offset: 0, color: "green.solid", opacity: 0.8 },
                  { offset: 1, color: "green.solid", opacity: 0.2 },
                ]}
              />
            </defs>
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={`url(#sp-gradient)`}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                strokeWidth={2}
              />
            ))}
          </AreaChart>
        </Chart.Root>

        <Stat.Root size="sm" alignItems="flex-end">
          <Span fontWeight="medium">
            <FormatNumber
              value={closing.value}
              style="currency"
              currency="USD"
            />
          </Span>
          <Badge colorPalette={trend > 0 ? "green" : "red"} gap="0">
            <Stat.UpIndicator />
            <FormatNumber
              value={trend}
              style="percent"
              maximumFractionDigits={2}
            />
          </Badge>
        </Stat.Root>
      </Card.Body>
    </Card.Root>
  )
}

Stat

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

Unique visitors: 192.1k

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Card, Stat } from "@chakra-ui/react"
import { LuGlobe } from "react-icons/lu"
import { Area, AreaChart } from "recharts"

const Demo = () => {
  return (
    <Card.Root maxW="sm" size="sm" overflow="hidden">
      <Card.Body>
        <Stat.Root>
          <Stat.Label>
            <LuGlobe /> Unique visitors
          </Stat.Label>
          <Stat.ValueText>192.1k</Stat.ValueText>
        </Stat.Root>
      </Card.Body>
      <SparkLine />
    </Card.Root>
  )
}

const SparkLine = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
    ],
    series: [{ color: "teal.solid" }],
  })

  return (
    <Chart.Root height="10" chart={chart}>
      <AreaChart
        data={chart.data}
        margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
      >
        {chart.series.map((item) => (
          <Area
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={chart.color(item.color)}
            fillOpacity={0.2}
            stroke={chart.color(item.color)}
            strokeWidth={2}
          />
        ))}
      </AreaChart>
    </Chart.Root>
  )
}

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>

"use client"

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

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
      { value: 10 },
      { value: 18 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root width="28" height="12" chart={chart}>
      <AreaChart accessibilityLayer data={chart.data}>
        {chart.series.map((item) => (
          <defs key={item.name}>
            <Chart.Gradient
              id={`${item.name}-gradient`}
              stops={[
                { offset: "0%", color: item.color, opacity: 1 },
                { offset: "100%", color: item.color, opacity: 0.01 },
              ]}
            />
          </defs>
        ))}

        {chart.series.map((item) => (
          <Area
            key={item.name}
            type="natural"
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            fill={`url(#${item.name}-gradient)`}
            stroke={chart.color(item.color)}
            strokeWidth={2}
          />
        ))}
      </AreaChart>
    </Chart.Root>
  )
}

Reference

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

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Line, LineChart, ReferenceLine } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 10 },
      { value: 16 },
      { value: 19 },
      { value: 15 },
      { value: 12 },
      { value: 15 },
      { value: 10 },
      { value: 18 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  return (
    <Chart.Root maxW="200px" chart={chart}>
      <LineChart data={chart.data}>
        {chart.series.map((item) => (
          <Line
            key={item.name}
            isAnimationActive={false}
            dataKey={chart.key(item.name)}
            dot={false}
            stroke={chart.color(item.color)}
            strokeWidth={2}
          />
        ))}
        <ReferenceLine
          y={chart.getMin("value")}
          stroke={chart.color("border.emphasized")}
          strokeDasharray="4 4"
          label={{
            value: chart.getMin("value"),
            position: "left",
            fill: chart.color("fg.muted"),
          }}
        />
        <ReferenceLine
          y={chart.getMax("value")}
          stroke={chart.color("border.emphasized")}
          strokeDasharray="4 4"
          label={{
            value: chart.getMax("value"),
            position: "right",
            fill: chart.color("fg.muted"),
          }}
        />
      </LineChart>
    </Chart.Root>
  )
}

Interaction

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

Weekly Downloads

345,000

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import { Box, Flex, FormatNumber, HStack, Text } from "@chakra-ui/react"
import { useState } from "react"
import { LuDownload } from "react-icons/lu"
import { Area, AreaChart, Tooltip } from "recharts"
import type { CategoricalChartState } from "recharts/types/chart/types"

const Demo = () => {
  const chart = useChart({
    data: [
      { value: 125000 },
      { value: 158000 },
      { value: 189000 },
      { value: 210000 },
      { value: 105000 },
      { value: 278000 },
      { value: 310000 },
      { value: 345000 },
    ],
    series: [{ name: "value", color: "teal.solid" }],
  })

  const lastIndex = chart.data.length - 1
  const lastValue = chart.data[lastIndex].value
  const [value, setValue] = useState(lastValue)

  const onMouseMove = (state: CategoricalChartState) => {
    const index = state.activeTooltipIndex ?? lastIndex
    const { value = lastValue } = chart.data[index]
    setValue(value)
  }

  const onMouseLeave = () => {
    setValue(lastValue)
  }

  return (
    <Flex align="flex-end" maxW="sm">
      <Box flex="1" fontWeight="medium">
        <HStack textStyle="sm" color="fg.muted">
          <LuDownload /> Weekly Downloads
        </HStack>
        <Text textStyle="xl" mt="2">
          <FormatNumber value={value} />
        </Text>
      </Box>
      <Chart.Root width="full" height="12" flex="1" chart={chart}>
        <AreaChart
          data={chart.data}
          onMouseMove={onMouseMove}
          onMouseLeave={onMouseLeave}
        >
          <Tooltip
            cursor={{ stroke: chart.color("teal.solid"), strokeWidth: 2 }}
            content={() => null}
          />
          {chart.series.map((item) => (
            <Area
              activeDot={{ stroke: chart.color("bg") }}
              key={item.name}
              isAnimationActive={false}
              dataKey={chart.key(item.name)}
              fill={chart.color(item.color)}
              fillOpacity={0.2}
              stroke={chart.color(item.color)}
              strokeWidth={2}
            />
          ))}
        </AreaChart>
      </Chart.Root>
    </Flex>
  )
}

Composition

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

AMZN

Amazon Inc.

$189.4630.28%

"use client"

import { Chart, useChart } from "@chakra-ui/charts"
import {
  Badge,
  Box,
  Card,
  FormatNumber,
  Span,
  Stack,
  Stat,
} from "@chakra-ui/react"
import { Area, AreaChart } from "recharts"

const Demo = () => {
  const chart = useChart({
    data: [
      { date: "2023-01", value: 145.43 },
      { date: "2023-02", value: 151.73 },
      { date: "2023-03", value: 157.65 },
      { date: "2023-04", value: 169.68 },
      { date: "2023-05", value: 173.75 },
      { date: "2023-06", value: 186.68 },
      { date: "2023-07", value: 181.99 },
      { date: "2023-08", value: 189.46 },
    ],
    series: [{ name: "value", color: "green.solid" }],
  })

  const closing = chart.data[chart.data.length - 1]
  const opening = chart.data[0]
  const trend = (closing.value - opening.value) / opening.value

  return (
    <Card.Root maxW="sm" size="sm">
      <Card.Body flexDirection="row" alignItems="center">
        <Stack gap="0" flex="1">
          <Box fontWeight="semibold" textStyle="sm">
            AMZN
          </Box>
          <Box textStyle="xs" color="fg.muted">
            Amazon Inc.
          </Box>
        </Stack>

        <Chart.Root width="28" height="12" chart={chart}>
          <AreaChart data={chart.data}>
            <defs>
              <Chart.Gradient
                id="sp-gradient"
                stops={[
                  { offset: 0, color: "green.solid", opacity: 0.8 },
                  { offset: 1, color: "green.solid", opacity: 0.2 },
                ]}
              />
            </defs>
            {chart.series.map((item) => (
              <Area
                key={item.name}
                isAnimationActive={false}
                dataKey={chart.key(item.name)}
                fill={`url(#sp-gradient)`}
                fillOpacity={0.2}
                stroke={chart.color(item.color)}
                strokeWidth={2}
              />
            ))}
          </AreaChart>
        </Chart.Root>

        <Stat.Root size="sm" alignItems="flex-end">
          <Span fontWeight="medium">
            <FormatNumber
              value={closing.value}
              style="currency"
              currency="USD"
            />
          </Span>
          <Badge colorPalette={trend > 0 ? "green" : "red"} gap="0">
            <Stat.UpIndicator />
            <FormatNumber
              value={trend}
              style="percent"
              maximumFractionDigits={2}
            />
          </Badge>
        </Stat.Root>
      </Card.Body>
    </Card.Root>
  )
}

Scatter Chart

Overview

Sparkline

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Usage

Usage