Histogram

visual

Group continuous values into bins to visualize their frequency distribution.

100%

응답 지연 분포

구간 수 조절

촘촘한 구간 (bins=16)

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

Histogram 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Histogram Props

Prop	타입	기본값	설명
`values`*	`number[]`	—	원시 값 배열
`bins`	`number`	`10`	구간 개수
`height`	number \| `${number}%`	`300`	차트 높이
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`color`	`string`	—	막대 색상. 기본은 첫 카테고리 슬롯 var(--opt-chart-1)
`showGrid`	`boolean`	`true`	그리드 표시 여부. 실선 헤어라인
`showTooltip`	`boolean`	`true`	툴팁 표시 여부
`showXAxis`	`boolean`	`true`	X축 표시 여부
`showYAxis`	`boolean`	`true`	Y축 표시 여부
`animate`	`boolean`	`true`	false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
`margin`	`ChartMargin`	`CHART_MARGIN`	차트 여백 (top/right/bottom/left)
`binLabelFormatter`	`(start: number, end: number) => string`	—	구간 레이블을 만드는 함수. 기본은 로케일 숫자 두 개를 대시로 잇는다
`countFormatter`	`(value: number) => string`	—	빈도 축 눈금 포맷터. 기본은 로케일 compact 숫자
`locale`	`string`	—	기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
`loading`	`boolean`	`false`	새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
`accessibleTable`	`boolean`	`false`	스크린 리더용 숨김 데이터 표를 함께 렌더
`emptyState`	`ReactNode`	—	데이터가 없을 때 보일 내용. 생략하면 labels.empty
`labels`	`HistogramLabels`	—	사용자 노출 문자열 (empty, summaryCaption, frequency, binColumn, chartName). 기본은 영어 — 시리즈 이름은 frequency
`tooltipOptions`	`ChartTooltipContentProps`	—	ChartTooltipContent에 그대로 넘길 옵션
`aria-label`	`string`	—	스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id

Import

tsx

import { Histogram } from "@reopt-ai/opt-ui";