Sparkline

Simplified area chart to show trends

Import

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);
  }
}