Cartesian
행 데이터와 시리즈로 비교·추세·복합 시각화
Package Docs · data visualization
opt-ui에서 분리된 데이터 시각화 패키지입니다. Recharts 의존성, chart data 타입, SVG 기반 분석 시각화, chart-specific shell을 한 곳에서 관리합니다. 기존 opt-ui chart export는 호환 re-export로 남아 있지만 새 코드는 opt-charts에서 직접 import합니다.
시계열/카테고리 비교는 ChartDataPoint + ChartSeriesDef로 시작하고, 퍼널/게이지/히트맵처럼 의미가 다른 차트는 전용 타입을 사용합니다.
LineChart, BarChart, PieChart 같은 visuals는 순수 시각화 경계로 두고, MetricsCard, TrendChart, ReportWidget은 제품 화면의 카드/위젯 조합에만 사용합니다.
height, aria-label, formatter, empty state, animation, lazy loading을 PR 기준으로 점검해 대시보드 회귀를 줄입니다.
Recharts 기반 차트, SVG 시각화, chart-specific shell, 시각화 메타데이터와 예제를 담당합니다.
매출 추이, 채널 비교, 코호트 유지율처럼 수치를 읽고 비교하는 분석 화면에 사용합니다. 선 차트는 시간 변화, 막대 차트는 범주 비교, 히트맵은 행·열 분포를 읽는 데 적합합니다.
질문과 데이터 형태를 먼저 정한 뒤 차트를 고르세요. 행을 직접 편집해야 한다면 opt-datagrid를 함께 사용하고, 여러 지표를 한 화면에 배치할 때는 opt-ui나 opt-shell로 레이아웃을 구성하세요.
opt-deck에 35종 차트를 등록하고 행렬·그래프·누적 변동 데이터를 편집하는 예제와 내보내기 계약을 확인합니다.
설치, import boundary, 첫 차트, opt-ui compatibility re-export에서 직접 import로 옮기는 기준을 정리합니다.
visuals와 shells의 책임, ChartContainer, Recharts 접근성 계층, token 기반 색상 흐름을 설명합니다.
ChartDataPoint, ChartSeriesDef, 특수 차트 타입, formatter, empty state, 색상 할당 전략을 코드 기준으로 분류합니다.
반응형 크기, SSR/client 경계, 성능, 접근성, release smoke를 배포 전 체크리스트로 묶습니다.
ChartContainer는 ResponsiveContainer를 감싸며 기본 role="img", interactive일 때 role="group"으로 상호작용 요소를 보존합니다.
Cartesian 계열은 Recharts accessibilityLayer를 켜고, showGrid/showTooltip/showLegend/showAxis 플래그로 운영 화면 밀도를 조절합니다.
ReportWidget은 chart type별 동적 import와 loading/empty label을 갖춘 builder용 얇은 shell입니다.
seriesColor는 테마의 16색 categorical 토큰을 사용하고 이후 계열에는 중립색을 할당합니다. 명시적 color가 우선하며 크기·양극성은 별도 색상 도메인을 사용합니다.
행 데이터와 시리즈로 비교·추세·복합 시각화
좌표와 숫자 표본으로 관계·분포·이상값 표현
구성비, 다축 비교, 계층과 집합의 교집합
행렬, 코호트, 날짜별 밀도를 전용 데이터로 표현
단계별 전환, 누적 변동, 노드·링크 기반 흐름
시계열, 반복 패널, 일정·추적 구간과 OHLC
범위·목표 대비 수치와 작은 추세 표현
지표 카드와 보고서용 조합
차트 프레임, 툴팁, 범례와 로딩 상태 — 별도 슬라이드 유형이 아닌 보조 컴포넌트
root export는 visuals와 shells를 함께 노출합니다. 번들 경계를 더 명확히 하고 싶다면 subpath export를 사용합니다.
import { LineChart, ChartContainer } from "@reopt-ai/opt-charts";
import type { ChartDataPoint, ChartSeriesDef } from "@reopt-ai/opt-charts";import { LineChart } from "@reopt-ai/opt-charts/visuals";
import { ReportWidget } from "@reopt-ai/opt-charts/shells";opt-ui는 Core, Shells, Surfaces를 소유하고, 차트는 opt-charts가 소유합니다. opt-ui visuals의 legacy chart export는 기존 소비자를 깨지 않기 위한 호환 경로입니다. 신규 문서, 신규 코드, 배포 검증은 opt-charts를 source of truth로 봅니다.