Sparkline

A sparkline component is a minimalist, inline graphic displaying trends or variations.

Source
@saas-ui/charts
2.8.1 (latest)

Import#

import { Sparkline } from '@saas-ui/charts'

Usage#

Basic#

Basic composition with Card and Stat components. Sparkline requires a fixed height (eg height="60px") to render properly.

import {
  Card,
  CardBody,
  Stat,
  StatLabel,
  StatArrow,
  StatNumber,
} from '@chakra-ui/react'
import { Sparkline } from '@saas-ui/charts'

const currencyFormatter = (value) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(value)
}

export default function Page() {
  return (
    <Card width="300px">
      <CardBody>
        <Stat>
          <StatLabel>Revenue</StatLabel>
          <StatNumber>
            {currencyFormatter(data[data.length - 1].value ?? 0)}
          </StatNumber>
          <Sparkline data={data} height="60px" mx="-4" />
        </Stat>
      </CardBody>
    </Card>
  )
}

const data = [
  {
    date: 'Jan 1',
    value: 1475,
  },
  {
    date: 'Jan 8',
    value: 1936,
  },
  {
    date: 'Jan 15',
    value: 1555,
  },
  {
    date: 'Jan 22',
    value: 1557,
  },
  {
    date: 'Jan 29',
    value: 1977,
  },
  {
    date: 'Feb 5',
    value: 2315,
  },
  {
    date: 'Feb 12',
    value: 1736,
  },
  {
    date: 'Feb 19',
    value: 1981,
  },
  {
    date: 'Feb 26',
    value: 2581,
  },
  {
    date: 'Mar 5',
    value: 2592,
  },
  {
    date: 'Mar 12',
    value: 2635,
  },
  {
    date: 'Mar 19',
    value: 2074,
  },
  {
    date: 'Mar 26',
    value: 2984,
  },
  {
    date: 'Apr 2',
    value: 2254,
  },
  {
    date: 'Apr 9',
    value: 3159,
  },
  {
    date: 'Apr 16',
    value: 2804,
  },
  {
    date: 'Apr 23',
    value: 2602,
  },
  {
    date: 'Apr 30',
    value: 2840,
  },
  {
    date: 'May 7',
    value: 3299,
  },
  {
    date: 'May 14',
    value: 3487,
  },
  {
    date: 'May 21',
    value: 3439,
  },
  {
    date: 'May 28',
    value: 3095,
  },
  {
    date: 'Jun 4',
    value: 3252,
  },
  {
    date: 'Jun 11',
    value: 4096,
  },
  {
    date: 'Jun 18',
    value: 4193,
  },
  {
    date: 'Jun 25',
    value: 4759,
  },
]

Multiple categories#

Multiple categories can be displayed in the same chart. Categories map to the data object keys.

import {
  Card,
  CardBody,
  Stat,
  StatLabel,
  StatHelpText,
  StatArrow,
  StatNumber,
} from '@chakra-ui/react'
import { Sparkline } from '@saas-ui/charts'

export default function Page() {
  const value = Number(data[data.length - 1].value ?? 0)
  const compareValue = Number(data[data.length - 1].compareValue ?? 0)

  const percentage = Math.round(((value - compareValue) / value) * 100)

  return (
    <Card width="300px">
      <CardBody>
        <Stat pos="relative">
          <StatLabel>New customers</StatLabel>
          <StatHelpText pos="absolute" top="0" right="0">
            <StatArrow type="increase" /> {percentage}%
          </StatHelpText>
          <StatNumber>{data[data.length - 1].value ?? 0}</StatNumber>
          <Sparkline
            data={data}
            categories={['value', 'compareValue']}
            height="60px"
            mx="-4"
          />
        </Stat>
      </CardBody>
    </Card>
  )
}

const data = [
  {
    date: 'Dec 1',
    value: 40,
    compareValue: 21,
  },
  {
    date: 'Dec 2',
    value: 38,
    compareValue: 22,
  },
  {
    date: 'Dec 3',
    value: 49,
    compareValue: 22,
  },
  {
    date: 'Dec 4',
    value: 48,
    compareValue: 29,
  },
  {
    date: 'Dec 5',
    value: 50,
    compareValue: 22,
  },
  {
    date: 'Dec 6',
    value: 42,
    compareValue: 30,
  },
  {
    date: 'Dec 7',
    value: 41,
    compareValue: 28,
  },
  {
    date: 'Dec 8',
    value: 44,
    compareValue: 23,
  },
  {
    date: 'Dec 9',
    value: 44,
    compareValue: 24,
  },
  {
    date: 'Dec 10',
    value: 44,
    compareValue: 30,
  },
  {
    date: 'Dec 11',
    value: 46,
    compareValue: 25,
  },
  {
    date: 'Dec 12',
    value: 48,
    compareValue: 25,
  },
  {
    date: 'Dec 13',
    value: 46,
    compareValue: 25,
  },
  {
    date: 'Dec 14',
    value: 50,
    compareValue: 28,
  },
  {
    date: 'Dec 15',
    value: 42,
    compareValue: 34,
  },
  {
    date: 'Dec 16',
    value: 58,
    compareValue: 33,
  },
  {
    date: 'Dec 17',
    value: 49,
    compareValue: 35,
  },
  {
    date: 'Dec 18',
    value: 44,
    compareValue: 33,
  },
  {
    date: 'Dec 19',
    value: 46,
    compareValue: 35,
  },
  {
    date: 'Dec 20',
    value: 44,
    compareValue: 35,
  },
  {
    date: 'Dec 21',
    value: 51,
    compareValue: 30,
  },
  {
    date: 'Dec 22',
    value: 58,
    compareValue: 36,
  },
  {
    date: 'Dec 23',
    value: 46,
    compareValue: 30,
  },
  {
    date: 'Dec 24',
    value: 61,
    compareValue: 30,
  },
  {
    date: 'Dec 25',
    value: 56,
    compareValue: 33,
  },
  {
    date: 'Dec 26',
    value: 55,
    compareValue: 33,
  },
  {
    date: 'Dec 27',
    value: 47,
    compareValue: 32,
  },
  {
    date: 'Dec 28',
    value: 55,
    compareValue: 33,
  },
  {
    date: 'Dec 29',
    value: 61,
    compareValue: 32,
  },
  {
    date: 'Dec 30',
    value: 62,
    compareValue: 29,
  },
  {
    date: 'Dec 31',
    value: 52,
    compareValue: 37,
  },
]

Customize colors#

Use the colors prop to customize the chart colors. Supported formats are primary, purple, purple.400, or #4FD1C5.

import {
  Card,
  CardBody,
  Stat,
  StatLabel,
  StatHelpText,
  StatArrow,
  StatNumber,
} from '@chakra-ui/react'
import { Sparkline } from '@saas-ui/charts'

export default function Page() {
  const value = Number(data[data.length - 1].value ?? 0)
  const compareValue = Number(data[data.length - 1].compareValue ?? 0)

  const percentage = Math.round(((value - compareValue) / value) * 100)

  return (
    <Card width="300px">
      <CardBody>
        <Stat pos="relative">
          <StatLabel>New customers</StatLabel>
          <StatHelpText pos="absolute" top="0" right="0">
            <StatArrow type="increase" /> {percentage}%
          </StatHelpText>
          <StatNumber>{data[data.length - 1].value ?? 0}</StatNumber>
          <Sparkline
            data={data}
            categories={['value', 'compareValue']}
            colors={['orange', 'gray']}
            height="60px"
            mx="-4"
          />
        </Stat>
      </CardBody>
    </Card>
  )
}

const data = [
  {
    date: 'Dec 1',
    value: 40,
    compareValue: 21,
  },
  {
    date: 'Dec 2',
    value: 38,
    compareValue: 22,
  },
  {
    date: 'Dec 3',
    value: 49,
    compareValue: 22,
  },
  {
    date: 'Dec 4',
    value: 48,
    compareValue: 29,
  },
  {
    date: 'Dec 5',
    value: 50,
    compareValue: 22,
  },
  {
    date: 'Dec 6',
    value: 42,
    compareValue: 30,
  },
  {
    date: 'Dec 7',
    value: 41,
    compareValue: 28,
  },
  {
    date: 'Dec 8',
    value: 44,
    compareValue: 23,
  },
  {
    date: 'Dec 9',
    value: 44,
    compareValue: 24,
  },
  {
    date: 'Dec 10',
    value: 44,
    compareValue: 30,
  },
  {
    date: 'Dec 11',
    value: 46,
    compareValue: 25,
  },
  {
    date: 'Dec 12',
    value: 48,
    compareValue: 25,
  },
  {
    date: 'Dec 13',
    value: 46,
    compareValue: 25,
  },
  {
    date: 'Dec 14',
    value: 50,
    compareValue: 28,
  },
  {
    date: 'Dec 15',
    value: 42,
    compareValue: 34,
  },
  {
    date: 'Dec 16',
    value: 58,
    compareValue: 33,
  },
  {
    date: 'Dec 17',
    value: 49,
    compareValue: 35,
  },
  {
    date: 'Dec 18',
    value: 44,
    compareValue: 33,
  },
  {
    date: 'Dec 19',
    value: 46,
    compareValue: 35,
  },
  {
    date: 'Dec 20',
    value: 44,
    compareValue: 35,
  },
  {
    date: 'Dec 21',
    value: 51,
    compareValue: 30,
  },
  {
    date: 'Dec 22',
    value: 58,
    compareValue: 36,
  },
  {
    date: 'Dec 23',
    value: 46,
    compareValue: 30,
  },
  {
    date: 'Dec 24',
    value: 61,
    compareValue: 30,
  },
  {
    date: 'Dec 25',
    value: 56,
    compareValue: 33,
  },
  {
    date: 'Dec 26',
    value: 55,
    compareValue: 33,
  },
  {
    date: 'Dec 27',
    value: 47,
    compareValue: 32,
  },
  {
    date: 'Dec 28',
    value: 55,
    compareValue: 33,
  },
  {
    date: 'Dec 29',
    value: 61,
    compareValue: 32,
  },
  {
    date: 'Dec 30',
    value: 62,
    compareValue: 29,
  },
  {
    date: 'Dec 31',
    value: 52,
    compareValue: 37,
  },
]

Stacked#

Categories can be stacked using the stack prop. Stacked charts are useful for displaying cumulative data of multiple categories over time.

import { Card, CardBody, CardHeader, Heading } from '@chakra-ui/react'
import { Sparkline } from '@saas-ui/charts'

export default function Page() {
  const total =
    data[data.length - 1].New +
    data[data.length - 1].Active +
    data[data.length - 1].Churned
  return (
    <Card width="300px">
      <CardBody>
        <Stat pos="relative">
          <StatLabel>Customers</StatLabel>
          <StatNumber>{total ?? 0}</StatNumber>
          <Sparkline
            data={data}
            categories={['New', 'Active', 'Churned']}
            colors={['green', 'blue', 'red']}
            height="60px"
            stack
          />
        </Stat>
      </CardBody>
    </Card>
  )
}

const data = [
  {
    date: 'Dec 1',
    New: 46,
    Active: 26,
    Churned: 2,
  },
  {
    date: 'Dec 2',
    New: 47,
    Active: 23,
    Churned: 2,
  },
  {
    date: 'Dec 3',
    New: 40,
    Active: 25,
    Churned: 2,
  },
  {
    date: 'Dec 4',
    New: 50,
    Active: 28,
    Churned: 2,
  },
  {
    date: 'Dec 5',
    New: 53,
    Active: 31,
    Churned: 2,
  },
  {
    date: 'Dec 6',
    New: 61,
    Active: 34,
    Churned: 2,
  },
  {
    date: 'Dec 7',
    New: 65,
    Active: 37,
    Churned: 2,
  },
  {
    date: 'Dec 8',
    New: 54,
    Active: 39,
    Churned: 3,
  },
  {
    date: 'Dec 9',
    New: 55,
    Active: 43,
    Churned: 3,
  },
  {
    date: 'Dec 10',
    New: 64,
    Active: 40,
    Churned: 2,
  },
  {
    date: 'Dec 11',
    New: 65,
    Active: 46,
    Churned: 2,
  },
  {
    date: 'Dec 12',
    New: 68,
    Active: 42,
    Churned: 3,
  },
  {
    date: 'Dec 13',
    New: 88,
    Active: 51,
    Churned: 4,
  },
  {
    date: 'Dec 14',
    New: 81,
    Active: 44,
    Churned: 3,
  },
  {
    date: 'Dec 15',
    New: 83,
    Active: 51,
    Churned: 3,
  },
  {
    date: 'Dec 16',
    New: 97,
    Active: 52,
    Churned: 4,
  },
  {
    date: 'Dec 17',
    New: 106,
    Active: 51,
    Churned: 4,
  },
  {
    date: 'Dec 18',
    New: 106,
    Active: 58,
    Churned: 5,
  },
  {
    date: 'Dec 19',
    New: 112,
    Active: 51,
    Churned: 4,
  },
  {
    date: 'Dec 20',
    New: 121,
    Active: 60,
    Churned: 4,
  },
  {
    date: 'Dec 21',
    New: 100,
    Active: 73,
    Churned: 5,
  },
  {
    date: 'Dec 22',
    New: 135,
    Active: 63,
    Churned: 5,
  },
  {
    date: 'Dec 23',
    New: 109,
    Active: 79,
    Churned: 4,
  },
  {
    date: 'Dec 24',
    New: 130,
    Active: 84,
    Churned: 5,
  },
  {
    date: 'Dec 25',
    New: 126,
    Active: 88,
    Churned: 6,
  },
  {
    date: 'Dec 26',
    New: 163,
    Active: 98,
    Churned: 5,
  },
  {
    date: 'Dec 27',
    New: 133,
    Active: 106,
    Churned: 7,
  },
  {
    date: 'Dec 28',
    New: 180,
    Active: 97,
    Churned: 7,
  },
  {
    date: 'Dec 29',
    New: 138,
    Active: 89,
    Churned: 7,
  },
  {
    date: 'Dec 30',
    New: 147,
    Active: 108,
    Churned: 6,
  },
  {
    date: 'Dec 31',
    New: 168,
    Active: 115,
    Churned: 8,
  },
]

Was this helpful?