ChartContainer
ChartsWrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.
Visualize row-by-column intensity while retaining table headings and values for screen readers.
bun add @reopt-ai/opt-chartsimport { Heatmap } from "@reopt-ai/opt-charts";Change the width and theme, then interact with the components.
| 매출 | 방문 | 체류 | 전환 | |
|---|---|---|---|---|
| 매출 | 1 | 0.82 | 0.31 | -0.12 |
| 방문 | 0.82 | 1 | 0.47 | 0.05 |
| 체류 | 0.31 | 0.47 | 1 | 0.63 |
| 전환 | -0.12 | 0.05 | 0.63 | 1 |
| 6 | 9 | 12 | 15 | 18 | 21 | |
|---|---|---|---|---|---|---|
| 금 | 2 | 5 | 8 | 12 | 9 | 4 |
| 토 | 3 | 7 | 11 | 15 | 10 | 5 |
| 일 | 1 | 4 | 9 | 14 | 12 | 6 |
Refreshing keeps the previous matrix visible. Hidden values remain available through cell names and hover text. Tab into the matrix and use arrow keys to move between cells.
| 6 | 9 | 12 | 15 | 18 | 21 | |
|---|---|---|---|---|---|---|
| 금 | 2 | 5 | 8 | 12 | 9 | 4 |
| 토 | 3 | 7 | 11 | 15 | 10 | 5 |
| 일 | 1 | 4 | 9 | 14 | 12 | 6 |
생성된 테스트 결과를 찾지 못했습니다.
Heatmap 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.
Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.
Display chart legends as lists, with real buttons for interactive series toggles.
Show daily activity across a year in a GitHub-style calendar heatmap.
Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.
Compare cohort retention using color intensity in a heatmap.