reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
QueryResultChart
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.

QueryResultChart

Shell

Turn query rows into charts with suggested axes and numeric series, a single-value display, and caller-owned settings for saved queries.

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

Live preview

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

100%

The same rows, as a picture

Usage guidance

Best practices

  • Supply columns and rows from the same result. Keep numeric values as numbers or numeric strings, and specify the database type in each column's type.
  • Create the initial configuration with defaultQueryChartConfig and preserve users' axis and series choices through config/onConfigChange. Update the configuration when the result schema changes.
  • maxPoints limits only the chart. Explain it separately from the total result count and backend limits.

Usage to avoid

  • Do not force unaggregated string-only results into a numeric series. Show the empty-chart guidance instead.

Usage examples

Column types and chart configuration

QueryResultChart

PropTypeDefaultDescription
columnsRequiredQueryResultColumn[]—결과 컬럼
rowsRequiredArray<Record<string, unknown>>—결과 행
configRequiredQueryChartConfig—차트 종류, 축, 값 컬럼
onConfigChangeRequired(config: QueryChartConfig) => void—설정 변경
showControlsbooleantrue컨트롤 표시. 임베드 카드에서는 끔
heightnumber—차트 높이(px). 기본은 부모 채움
maxPointsnumber1000차트에 그릴 최대 행 수
labelsQueryResultChartLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (6)QueryResultChartline-chartbar-chartarea-chartpie-chartsegmented-controlselect
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-ui

SegmentedControl

Core

Show all options in a single-selection control with radio-group semantics and arrow-key navigation.

opt-ui

FaqAccordion

Shells

Organize FAQ questions and answers with Composite and Disclosure components.

opt-ui

PageAside

Shells

Add a sticky, fixed-width page aside with header, body, and footer slots.

opt-ui

EnvPanel

Shells

Browse environment variables with collapsible environment groups and Composite navigation.

opt-ui

BranchSelect

Shells

Choose a Git branch with a wrapper around the Select primitive.

opt-ui

DesignGuidePanel

Shells

Consult six design-system reference sections covering primitives, keyboard patterns, Tailwind selectors, and accessibility attributes.

PreviousQueryOutputPaneNextQueryFiltersMenu