reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
DataBar
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

DataBar

Chart

Show proportional values in cells and cards with inline bars, a zero baseline, and diverging colors for negative ranges.

cartesian
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { DataBar } from "@reopt-ai/opt-charts";

Live preview

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

100%

테이블 인라인 바

Chrome
64
Safari
19
Edge
11
Firefox
6

음수 지원 (0 기준선)

월별 증감

1월
12
2월
-8
3월
24
4월
-3

DataBar

PropTypeDefaultDescription
valueRequirednumber—표시할 값
maxnumber100스케일 최대값
minnumber0스케일 최소값
colorstring"var(--opt-chart-1)"막대 색상. min < 0 < max인 diverging 모드의 기본은 diverging positive
negativeColorstring"var(--opt-chart-diverging-negative)"음수 구간 색상
heightnumber8막대 높이 (px)
widthnumber | string"100%"막대 트랙 너비
showValuebooleanfalse값 레이블 표시 여부
valueFormatter(value: number) => string—값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
localestring—기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블. 기본 "42 (0 – 100)"처럼 값과 범위
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-charts

LineChart

Charts

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

opt-charts

BarChart

Charts

Compare values across categories with a bar chart.

opt-charts

AreaChart

Charts

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

opt-charts

Sparkline

Charts

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

opt-charts

ScatterChart

Charts

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

opt-charts

WaterfallChart

Charts

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

PreviousHeatmapNextGanttChart