Histogram

Chart

Group continuous values into bins to visualize their frequency distribution.

cartesian

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

100%

응답 지연 분포

구간 수 조절

촘촘한 구간 (bins=16)

Histogram

Prop	Type	Default	Description
valuesRequired	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

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

BarChart

Charts

Compare values across categories with a bar chart.

AreaChart

Charts

Display trends and time series with filled areas and optional gradients.

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

ScatterChart

Charts

Compare two variables in a scatter plot and optionally size points with zKey.

WaterfallChart

Charts

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

Histogram

Chart

Group continuous values into bins to visualize their frequency distribution.

cartesian

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

Change the width and theme, then interact with the components.

100%

응답 지연 분포

구간 수 조절

촘촘한 구간 (bins=16)

Histogram

Prop	Type	Default	Description
valuesRequired	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