Sparkline

Sparkline

트렌드를 보여주는 간소화된 영역 차트예요. 한 시리즈의 데이터를 작은 공간에 표시할 때 사용해요.

출처: 문서

본문

Usage

Sparkline은 AreaChart의 간소화된 버전이에요. 한 시리즈의 데이터를 작은 공간에 표시하는 데 사용할 수 있어요.

import { Sparkline } from '@mantine/charts';

function Demo() {
  return <Sparkline w={200} h={80} data={[10, 20, 40, 20, 40, 10, 50]} />;
}

Change area color depending on color scheme

color 속성에 CSS 변수를 사용할 수 있어요. 색상 스킴에 따라 달라지는 변수를 정의하려면 light/dark mixins 또는 light-dark function을 사용하세요.

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

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

Trend colors

color 대신 trendColors prop을 사용하면 추세에 따라 차트 색을 바꿀 수 있어요. 이 prop은 positive, negative, neutral 속성을 가진 객체를 받아요.

• positive – 긍정 추세 색(data 배열의 첫 값이 마지막 값보다 작을 때)
• negative – 부정 추세 색(data 배열의 첫 값이 마지막 값보다 클 때)
• neutral – 중립 추세 색(첫 값과 마지막 값이 같을 때)

neutral은 선택사항이에요. 제공하지 않으면 positive와 같은 색이 사용돼요.

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>
      <Text>Positive trend:</Text>
      <Sparkline w={200} h={80} data={positiveTrend} trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.6' }} />
      <Text>Negative trend:</Text>
      <Sparkline w={200} h={80} data={negativeTrend} trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.6' }} />
      <Text>Neutral trend:</Text>
      <Sparkline w={200} h={80} data={neutralTrend} trendColors={{ positive: 'teal.6', negative: 'red.6', neutral: 'gray.6' }} />
    </Stack>
  );
}

더 알아보기 (Learn more)

• RadialBarChart
• Heatmap