스파크라인

스파크라인 (Sparkline)

축이나 좌표 없이 데이터 변동의 대략적인 모양만 보여주는 작고 단순한 차트예요. 주로 텍스트와 함께 인라인으로 쓰거나, 작은 공간 안에서 사용해요.

출처: 문서

본문

사용법 (Usage)

import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart } from "recharts"

<Chart.Root>
  <AreaChart>
    <Area />
  </AreaChart>
</Chart.Root>

예제 (Examples)

막대 차트 (Bar Chart)

스파크라인은 막대 차트로도 만들 수 있어요.

<defs>
  <Chart.Gradient
    id="custom-gradient"
    stops={[
      { offset: "0%", color: "teal.solid", opacity: 1 },
      { offset: "100%", color: "teal.solid", opacity: 0.01 },
    ]}
  />
</defs>