Sparkline

The Sparkline component displays data as a small inline chart without axes, grid, or legend. Perfect for showing trends in compact spaces. Built with ApexCharts.

Demo

React

Vue

Usage

React

import { Sparkline } from '@fintech-sandpit/ui/react';

const data = [10, 15, 12, 18, 14, 20, 16, 22, 19, 25];

// Line chart (default)
return (
  <Sparkline
    data={data}
    type="line"
    width="200px"
    height="60px"
    color="#3b82f6"
    showTooltip={true}
  />
);

// Area chart
<Sparkline
  data={data}
  type="area"
  width="200px"
  height="60px"
  color="#14b8a6"
/>

// Bar chart
<Sparkline
  data={data}
  type="bar"
  width="200px"
  height="60px"
  color="#a855f7"
/>

Vue

<script setup lang="ts">
import { Sparkline } from '@fintech-sandpit/ui/vue';

const data = [10, 15, 12, 18, 14, 20, 16, 22, 19, 25];
</script>

<template>
  <!-- Line chart (default) -->
  <Sparkline
    :data="data"
    type="line"
    width="200px"
    height="60px"
    color="#3b82f6"
    :show-tooltip="true"
  />

  <!-- Area chart -->
  <Sparkline
    :data="data"
    type="area"
    width="200px"
    height="60px"
    color="#14b8a6"
  />

  <!-- Bar chart -->
  <Sparkline
    :data="data"
    type="bar"
    width="200px"
    height="60px"
    color="#a855f7"
  />
</template>

Props

Sparkline

React

Name	Type	Default	Description
data	number[]	—	Array of numeric values to display as a sparkline
type	SparklineType	'line'	Type of sparkline chart: 'line', 'area', or 'bar'
color	string	'#3b82f6'	Color of the sparkline
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘200px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘60px’, ‘50vh’)
showTooltip	boolean	true	Whether to display tooltips on hover

Vue

Name	Type	Default	Description
data	number[]	—	Array of numeric values to display as a sparkline
type	SparklineType	'line'	Type of sparkline chart: 'line', 'area', or 'bar'
color	string	'#3b82f6'	Color of the sparkline
width	CssUnit	'100%'	Width of the chart container (CSS unit string like ‘100%’, ‘200px’, ‘50rem’)
height	CssUnit	'400px'	Height of the chart container (CSS unit string like ‘60px’, ‘50vh’)
show-tooltip	boolean	true	Whether to display tooltips on hover

Types

type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`

type SparklineType = 'line' | 'area' | 'bar'