Sparkline
A sparkline component is a minimalist, inline graphic displaying trends or variations.
Source
@saas-ui/charts
- 2.8.9 (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><Sparklinedata={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><Sparklinedata={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].Churnedreturn (<Card width="300px"><CardBody><Stat pos="relative"><StatLabel>Customers</StatLabel><StatNumber>{total ?? 0}</StatNumber><Sparklinedata={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?