TrendChart
visualCard + AreaChart 조합. 제목과 설명을 차트의 접근 가능한 이름/설명에 연결해 추세를 표시합니다.
컴포넌트 의존 관계
깊이
100%
Basic Usage
카드 제목과 설명은 차트 영역의 accessible name/description으로 자동 연결됩니다.
Revenue Trend
Monthly revenue and profit
Single Series
Weekly Visitors
Number of unique visitors per day
With Header Actions
Sales Overview
Last 6 months
Custom Height
height=200
Compact Chart
테스트 커버리지
2026년 7월 9일3/3 통과
3성공
0실패
3전체
- 제목을 렌더링한다
- 설명을 표시한다
- article role과 제목 기반 접근성 이름을 가진다
TrendChart Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
title* | string | — | 차트 제목 |
description | string | — | 차트 설명 |
data* | ChartDataPoint[] | — | 차트 데이터 배열 |
series* | ChartSeriesDef[] | — | 시리즈 정의 |
height | number | 250 | 차트 높이 |
chartProps | Omit<AreaChartProps, 'data' | 'series' | 'height'> | — | AreaChart 추가 props |
headerRight | ReactNode | — | 헤더 우측 커스텀 콘텐츠 |
Import
tsx
import { TrendChart } from "@reopt-ai/opt-ui";