Sparkline

import { SparklineDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Sparkline);

Usage

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

<Demo data={SparklineDemos.usage} />

Change area color depending on color scheme

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

<Demo data={SparklineDemos.colorSchemeColor} />

Trend colors

Use the trendColors prop instead of color to change the 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 the data array)
• negative - color for negative trend (first value is greater than the last value in the 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.

<Demo data={SparklineDemos.trendColors} />