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

"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