Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Sparkline

Simplified area chart to show trends

Import

Source

View source code

Docs

Edit this page

Package

@mantine/charts

Usage

Sparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.

Color
Fill opacity
Stroke width
import { Sparkline } from '@mantine/charts';

function Demo() {
  return (
    <Sparkline
      w={200}
      h={60}
      data={[10, 20, 40, 20, 40, 10, 50]}
      curveType="linear"
      color="blue"
      fillOpacity={0.6}
      strokeWidth={2}
    />
  );
}

Change area color depending on color scheme

You can use CSS variables in color property. To define a CSS variable that changes depending on the color scheme, use light/dark mixins or light-dark function. Example of area that is dark orange in light mode and lime in dark mode:

.root {
  @mixin light {
    --chart-color: var(--mantine-color-orange-8);
  }

  @mixin dark {
    --chart-color: var(--mantine-color-lime-4);
  }
}

Trend colors

Use trendColors prop instead of color to change chart color depending on the trend. The prop accepts an object with positive, negative and neutral properties:

  • positive - color for positive trend (first value is less than the last value in data array)
  • negative - color for negative trend (first value is greater than the last value in data array)
  • neutral - color for neutral trend (first and last values are equal)

neutral is optional, if not provided, the color will be the same as positive.

Positive trend:

Negative trend:

Neutral trend:

import { Sparkline } from '@mantine/charts';
import { Stack, Text } from '@mantine/core';

const positiveTrend = [10, 20, 40, 20, 40, 10, 50];
const negativeTrend = [50, 40, 20, 40, 20, 40, 10];
const neutralTrend = [10, 20, 40, 20, 40, 10, 50, 5, 10];

function Demo() {
  return (
    <Stack gap="sm">
      <Text>Positive trend:</Text>
      <Sparkline
        w={200}
        h={60}
        data={positiveTrend}
        trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.5' }}
        fillOpacity={0.2}
      />

      <Text mt="md">Negative trend:</Text>
      <Sparkline
        w={200}
        h={60}
        data={negativeTrend}
        trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.5' }}
        fillOpacity={0.2}
      />

      <Text mt="md">Neutral trend:</Text>
      <Sparkline
        w={200}
        h={60}
        data={neutralTrend}
        trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.5' }}
        fillOpacity={0.2}
      />
    </Stack>
  );
}

Previous

ScatterChart

Next

CodeHighlight

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people