TimeSeriesChart

Chart

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

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

100%

p50–p95 지연 시간 밴드와 결측 구간

선은 p50과 p95, 음영은 두 값 사이의 범위입니다. 03:00의 p95는 미수집 값이므로 밴드가 끊어집니다. 밴드는 별도 툴팁 항목이 아닙니다.

Time axis

Trailing bucket still filling

The last bar covers a day that is only half over. It is shaded rather than presented as a collapse.

Drag to zoom

Drag across the plot to pick a window.

Comparison period

Annotations and thresholds

Gaps in the data

Broken at the gap (default)

Drawn through the gap

Usage examples

p50–p95 latency range

Time series chart

TimeSeriesChart

Prop	Type	Default	Description
bands	TimeSeriesBand[]	—	두 데이터 키 사이 음영 범위. { lowerKey, upperKey, name, color?, opacity?, axis?, showInLegend? }. opacity 기본 0.15, axis 기본 left, showInLegend 기본 false. 한쪽 값이 null이면 connectNulls=false에서 밴드가 끊어진다. 툴팁에는 별도 항목으로 나오지 않는다
dataRequired	TimeSeriesPoint[]	—	t(epoch/ISO/Date)와 시리즈 값을 담은 데이터 배열
seriesRequired	TimeSeriesDef[]	—	시리즈 정의 (dataKey, name, color, type, comparison)
from	number \| string \| Date	—	축 시작 — 조회 구간에 축을 고정
to	number \| string \| Date	—	축 끝 — 조회 구간에 축을 고정
granularity	TimeGranularity \| "auto"	"auto"	버킷 단위
timeZone	string	—	축 라벨과 버킷 경계를 계산할 IANA 타임존
locale	string	—	축·툴팁의 시각 표기에 쓰는 로케일. 생략하면 브라우저 기본값
variant	"line" \| "area" \| "bar"	"line"	시리즈가 지정하지 않았을 때의 기본 마크
stacked	boolean	false	시리즈를 누적할지 여부
gradient	boolean	false	area 변형의 그라데이션 채우기 사용 여부
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
margin	ChartMargin	{ top: 8, right: 16, bottom: 4, left: 0 }	차트 여백 (top/right/bottom/left)
strokeWidth	number	2	선 두께 (px)
dot	boolean	false	각 데이터 점에 마커를 찍을지 여부
connectNulls	boolean	false	값이 없는 구간을 선으로 이을지 여부
showGrid	boolean	true	그리드 표시 여부
showLegend	boolean	—	범례 표시 여부. 미지정 시 시리즈가 2개 이상일 때만 표시
showXAxis	boolean	true	X축 표시 여부
showYAxis	boolean	true	Y축 표시 여부
showTooltip	boolean	true	툴팁 표시 여부
maxTicks	number	8	X축에 그릴 눈금의 최대 개수
yFormatter	(value: number) => string	—	Y축 눈금 값을 표시 문자열로 바꾸는 함수
yDomain	[number \| "auto" \| "dataMin", number \| "auto" \| "dataMax"]	—	Y축 범위. "auto"·"dataMin"·"dataMax"를 섞어 쓸 수 있다
partialBucket	boolean \| number \| "auto"	"auto"	아직 채워지는 중인 마지막 버킷 음영 표시
now	number	—	"지금"으로 볼 시각 (ms). partialBucket="auto" 판정과 테스트 고정에 쓰인다
selectable	boolean	false	드래그로 구간 선택 활성화
onRangeSelect	(range: { from: number; to: number }) => void	—	드래그 선택이 끝났을 때 호출
onPointClick	(time: number) => void	—	데이터 점을 클릭했을 때 그 시각(ms)을 받는 콜백
annotations	TimeSeriesAnnotation[]	—	시간축 위 마커/구간 (배포, 장애, 캠페인)
thresholds	ChartReferenceLine[]	—	Y축 임계선
brush	boolean	false	하단 범위 선택 브러시 표시 여부
syncId	string	—	같은 값을 가진 차트끼리 crosshair 동기화
tooltipOptions	Omit<TimeSeriesTooltipContentProps, "active" \| "payload" \| "label" \| "granularity" \| "timeZone" \| "locale">	—	TimeSeriesTooltipContent에 넘길 옵션. 차트가 스스로 채우는 값은 제외돼 있다
legendOptions	ChartLegendOptions	—	ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않습니다
legendToggle	boolean	true	범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
accessibleTable	boolean	false	스크린 리더용 숨김 데이터 표 렌더
accessibilityLayer	boolean	true	Recharts 키보드 레이어(포커스 가능한 svg). 패널 자체가 버튼인 SmallMultiples처럼 버튼 안에 포커스 요소를 둘 수 없을 때 끈다
labels	TimeSeriesChartLabels	—	차트가 직접 쓰는 문자열 (빈 상태·미완 구간·요약 표·범례). 지역화 지점
emptyState	React.ReactNode	—	데이터가 없을 때 그릴 노드. 생략하면 labels.empty 문구
aria-label	string	—	스크린 리더용 레이블
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

PathFlowChart

Charts

Explore staged user paths with transition ribbons, session starts and exits, grid or proportional Sankey layouts, and linked hover highlighting.

TimeSeriesTooltip

Charts

Read full timestamps and time zones, sorted values, totals, comparison deltas, and incomplete-bucket warnings.

SmallMultiples

Charts

Compare breakdowns in small time-series panels with a shared y-axis, synchronized crosshairs, top-value ordering, and a collapsed long tail.

TraceWaterfall

Charts

Inspect nested trace spans on one timeline with collapsible branches, explicit failure markers, and compressed idle gaps that preserve reported durations.

VennDiagram

Charts

Compare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.

EventSparkline

Charts

Show an event label, value, change, and miniature trend chart together.

TimeSeriesChart

Chart

Explore time series with fixed query ranges, automatic ticks, incomplete buckets, drag zoom, annotations, thresholds, and comparison overlays.

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

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

100%

p50–p95 지연 시간 밴드와 결측 구간

선은 p50과 p95, 음영은 두 값 사이의 범위입니다. 03:00의 p95는 미수집 값이므로 밴드가 끊어집니다. 밴드는 별도 툴팁 항목이 아닙니다.

Time axis

Trailing bucket still filling

The last bar covers a day that is only half over. It is shaded rather than presented as a collapse.

Drag to zoom

Drag across the plot to pick a window.

Comparison period

Annotations and thresholds

Gaps in the data

Broken at the gap (default)

Drawn through the gap

Usage examples

p50–p95 latency range

Time series chart

TimeSeriesChart

Prop	Type	Default	Description
bands	TimeSeriesBand[]	—	두 데이터 키 사이 음영 범위. { lowerKey, upperKey, name, color?, opacity?, axis?, showInLegend? }. opacity 기본 0.15, axis 기본 left, showInLegend 기본 false. 한쪽 값이 null이면 connectNulls=false에서 밴드가 끊어진다. 툴팁에는 별도 항목으로 나오지 않는다
dataRequired	TimeSeriesPoint[]	—	t(epoch/ISO/Date)와 시리즈 값을 담은 데이터 배열
seriesRequired	TimeSeriesDef[]	—	시리즈 정의 (dataKey, name, color, type, comparison)
from	number \| string \| Date	—	축 시작 — 조회 구간에 축을 고정
to	number \| string \| Date	—	축 끝 — 조회 구간에 축을 고정
granularity	TimeGranularity \| "auto"	"auto"	버킷 단위
timeZone	string	—	축 라벨과 버킷 경계를 계산할 IANA 타임존
locale	string	—	축·툴팁의 시각 표기에 쓰는 로케일. 생략하면 브라우저 기본값
variant	"line" \| "area" \| "bar"	"line"	시리즈가 지정하지 않았을 때의 기본 마크
stacked	boolean	false	시리즈를 누적할지 여부
gradient	boolean	false	area 변형의 그라데이션 채우기 사용 여부
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
margin	ChartMargin	{ top: 8, right: 16, bottom: 4, left: 0 }	차트 여백 (top/right/bottom/left)
strokeWidth	number	2	선 두께 (px)
dot	boolean	false	각 데이터 점에 마커를 찍을지 여부
connectNulls	boolean	false	값이 없는 구간을 선으로 이을지 여부
showGrid	boolean	true	그리드 표시 여부
showLegend	boolean	—	범례 표시 여부. 미지정 시 시리즈가 2개 이상일 때만 표시
showXAxis	boolean	true	X축 표시 여부
showYAxis	boolean	true	Y축 표시 여부
showTooltip	boolean	true	툴팁 표시 여부
maxTicks	number	8	X축에 그릴 눈금의 최대 개수
yFormatter	(value: number) => string	—	Y축 눈금 값을 표시 문자열로 바꾸는 함수
yDomain	[number \| "auto" \| "dataMin", number \| "auto" \| "dataMax"]	—	Y축 범위. "auto"·"dataMin"·"dataMax"를 섞어 쓸 수 있다
partialBucket	boolean \| number \| "auto"	"auto"	아직 채워지는 중인 마지막 버킷 음영 표시
now	number	—	"지금"으로 볼 시각 (ms). partialBucket="auto" 판정과 테스트 고정에 쓰인다
selectable	boolean	false	드래그로 구간 선택 활성화
onRangeSelect	(range: { from: number; to: number }) => void	—	드래그 선택이 끝났을 때 호출
onPointClick	(time: number) => void	—	데이터 점을 클릭했을 때 그 시각(ms)을 받는 콜백
annotations	TimeSeriesAnnotation[]	—	시간축 위 마커/구간 (배포, 장애, 캠페인)
thresholds	ChartReferenceLine[]	—	Y축 임계선
brush	boolean	false	하단 범위 선택 브러시 표시 여부
syncId	string	—	같은 값을 가진 차트끼리 crosshair 동기화
tooltipOptions	Omit<TimeSeriesTooltipContentProps, "active" \| "payload" \| "label" \| "granularity" \| "timeZone" \| "locale">	—	TimeSeriesTooltipContent에 넘길 옵션. 차트가 스스로 채우는 값은 제외돼 있다
legendOptions	ChartLegendOptions	—	ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않습니다
legendToggle	boolean	true	범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
accessibleTable	boolean	false	스크린 리더용 숨김 데이터 표 렌더
accessibilityLayer	boolean	true	Recharts 키보드 레이어(포커스 가능한 svg). 패널 자체가 버튼인 SmallMultiples처럼 버튼 안에 포커스 요소를 둘 수 없을 때 끈다
labels	TimeSeriesChartLabels	—	차트가 직접 쓰는 문자열 (빈 상태·미완 구간·요약 표·범례). 지역화 지점
emptyState	React.ReactNode	—	데이터가 없을 때 그릴 노드. 생략하면 labels.empty 문구
aria-label	string	—	스크린 리더용 레이블
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

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

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

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