StockChart
WDS 시계열 주가 차트 — 손익 색·개장가 기준선·정밀 스크럽 readout·기간 선택.
마지막 업데이트 2026-06-20
한눈에#
촘촘한 시계열(분·초 단위)을 면적으로 그리고, x축은 시간 간격으로 솎아 라벨링합니다. 차트에 마우스를 올리면 크로스헤어가 가장 가까운 시점에 스냅하며 정확한 시각과 가격을 보여주고, 부드럽게 따라 움직입니다.
| 시각 | 6월 19일 AM 12:00 | 6월 19일 AM 12:05 | 6월 19일 AM 12:10 | 6월 19일 AM 12:15 | 6월 19일 AM 12:20 | 6월 19일 AM 12:25 | 6월 19일 AM 12:30 | 6월 19일 AM 12:35 | 6월 19일 AM 12:40 | 6월 19일 AM 12:45 | 6월 19일 AM 12:50 | 6월 19일 AM 12:55 | 6월 19일 AM 1:00 | 6월 19일 AM 1:05 | 6월 19일 AM 1:10 | 6월 19일 AM 1:15 | 6월 19일 AM 1:20 | 6월 19일 AM 1:25 | 6월 19일 AM 1:30 | 6월 19일 AM 1:35 | 6월 19일 AM 1:40 | 6월 19일 AM 1:45 | 6월 19일 AM 1:50 | 6월 19일 AM 1:55 | 6월 19일 AM 2:00 | 6월 19일 AM 2:05 | 6월 19일 AM 2:10 | 6월 19일 AM 2:15 | 6월 19일 AM 2:20 | 6월 19일 AM 2:25 | 6월 19일 AM 2:30 | 6월 19일 AM 2:35 | 6월 19일 AM 2:40 | 6월 19일 AM 2:45 | 6월 19일 AM 2:50 | 6월 19일 AM 2:55 | 6월 19일 AM 3:00 | 6월 19일 AM 3:05 | 6월 19일 AM 3:10 | 6월 19일 AM 3:15 | 6월 19일 AM 3:20 | 6월 19일 AM 3:25 | 6월 19일 AM 3:30 | 6월 19일 AM 3:35 | 6월 19일 AM 3:40 | 6월 19일 AM 3:45 | 6월 19일 AM 3:50 | 6월 19일 AM 3:55 | 6월 19일 AM 4:00 | 6월 19일 AM 4:05 | 6월 19일 AM 4:10 | 6월 19일 AM 4:15 | 6월 19일 AM 4:20 | 6월 19일 AM 4:25 | 6월 19일 AM 4:30 | 6월 19일 AM 4:35 | 6월 19일 AM 4:40 | 6월 19일 AM 4:45 | 6월 19일 AM 4:50 | 6월 19일 AM 4:55 | 6월 19일 AM 5:00 | 6월 19일 AM 5:05 | 6월 19일 AM 5:10 | 6월 19일 AM 5:15 | 6월 19일 AM 5:20 | 6월 19일 AM 5:25 | 6월 19일 AM 5:30 | 6월 19일 AM 5:35 | 6월 19일 AM 5:40 | 6월 19일 AM 5:45 | 6월 19일 AM 5:50 | 6월 19일 AM 5:55 | 6월 19일 AM 6:00 | 6월 19일 AM 6:05 | 6월 19일 AM 6:10 | 6월 19일 AM 6:15 | 6월 19일 AM 6:20 | 6월 19일 AM 6:25 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 가격 | 371,302 | 371,999 | 373,123 | 372,923 | 372,519 | 372,757 | 373,159 | 371,827 | 372,689 | 372,474 | 371,063 | 371,761 | 371,630 | 371,135 | 370,401 | 372,543 | 371,414 | 370,933 | 372,166 | 370,146 | 372,101 | 372,088 | 371,536 | 371,404 | 370,684 | 370,256 | 369,168 | 369,687 | 369,197 | 370,716 | 369,466 | 368,775 | 369,831 | 370,219 | 369,675 | 369,134 | 369,947 | 368,608 | 367,298 | 369,198 | 368,265 | 368,038 | 368,038 | 367,013 | 368,192 | 367,014 | 366,533 | 366,885 | 366,433 | 365,167 | 365,060 | 364,166 | 365,128 | 363,685 | 365,641 | 364,173 | 362,722 | 362,646 | 362,396 | 362,194 | 361,879 | 361,819 | 362,470 | 362,160 | 360,716 | 361,122 | 359,800 | 361,319 | 359,769 | 358,996 | 359,329 | 357,918 | 357,879 | 357,517 | 357,465 | 358,038 | 357,310 | 355,747 |
| 거래량 | 5,351,997 | 3,890,302 | 3,892,088 | 4,953,540 | 3,756,632 | 4,551,710 | 5,612,849 | 4,001,033 | 5,762,989 | 5,378,102 | 4,761,715 | 4,989,053 | 2,845,140 | 3,195,176 | 6,881,075 | 7,158,025 | 4,420,509 | 3,233,619 | 5,174,854 | 6,723,738 | 4,967,374 | 4,710,320 | 4,540,703 | 4,541,793 | 2,451,189 | 3,172,862 | 6,720,684 | 5,522,867 | 5,798,576 | 4,001,083 | 5,520,625 | 4,439,540 | 5,429,202 | 4,395,043 | 4,466,916 | 4,752,154 | 5,312,994 | 4,749,519 | 4,480,570 | 6,436,680 | 4,533,445 | 4,115,145 | 4,716,457 | 3,506,456 | 6,463,610 | 5,078,928 | 4,759,232 | 4,344,772 | 5,578,513 | 6,359,346 | 3,940,455 | 4,491,047 | 4,339,996 | 5,300,395 | 5,436,646 | 3,775,489 | 7,328,613 | 4,089,110 | 5,281,110 | 4,090,927 | 5,750,089 | 5,516,060 | 5,147,863 | 3,831,110 | 3,362,046 | 5,004,066 | 6,028,698 | 4,817,203 | 4,833,279 | 4,180,180 | 3,993,722 | 6,536,123 | 3,787,234 | 3,045,316 | 3,196,073 | 4,047,245 | 3,671,988 | 4,947,469 |
- 면적 시계열
- 크로스헤어 스크럽
- 손익 기준선
- 기간 세그먼트
주가 추이 — 크로스헤어가 가장 가까운 시점에 스냅, 손익 색·기준선
사용 시점#
주가·자산 가격의 시계열을 손익 색·기준선·정밀 스크럽과 함께 볼 때가 StockChart의 자리입니다. 손익 맥락이 없는 단순 추세라면 LineChart가 가볍습니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
| 항목 | 2024-06-24 03:33:20 | 2024-06-24 04:33:20 | 2024-06-24 05:33:20 | 2024-06-24 06:33:20 | 2024-06-24 07:33:20 | 2024-06-24 08:33:20 | 2024-06-24 09:33:20 | 2024-06-24 10:33:20 |
|---|---|---|---|---|---|---|---|---|
| 주가 추이 예시 | 100 | 102 | 99 | 104 | 108 | 106 | 112 | 115 |
가격 시계열(손익) — 기준가 대비 상승/하락 색 + 스크럽 — 금융 가격 데이터
| 항목 | 0 | 1 | 2 | 3 |
|---|---|---|---|---|
| 값 | 30 | 52 | 45 | 78 |
단순 추세는 선 — 손익·기준선이 무의미한 추세는 선(LineChart)이 가벼움
구성#
- 손익 색 — 마지막 가격이 기준선 위면 상승(초록), 아래면 하락(빨강). 선·면·강조점이 한 색으로 일관됩니다.
- 개장가 기준선 — 기간 시작가를 가로 점선으로 그려 손익의 기준으로 삼습니다.
- 정밀 스크럽 — 호버 시 최근접 데이터 점에 스냅하고, 그 시점의 시각·가격 readout이 크로스헤어를 따라옵니다.
- 구간 선택 — 누르고 옆으로 드래그하면 두 시점 사이 변화(±금액·%)를 보여줍니다.
- 거래량 패널 —
volume을 주면 가격 차트 하단에 거래량 막대를, 같은 x축에 정렬해 그립니다. - 캔들스틱 —
candles(OHLC)를 주면 선 대신 캔들스틱 뷰(심지+몸통, 상승 초록/하락 빨강). 스크럽 시 OHLC를 보여줍니다. - 기간 선택 — 1일·1주·1개월 같은 세그먼트로 범위를 전환합니다.
접근성#
데이터 정본은 차트 아래의 스크린리더 전용 표입니다. 캔들 뷰는 시·고·저·종(OHLC), 거래량이 있으면 거래량까지 표에 편입됩니다. 크로스헤어·강조점·readout·캔들·거래량 막대는 마우스 전용(aria-hidden)이며, reduced-motion에서는 전환을 멈추고 즉시 스냅합니다.
데이터 API#
data는 { x: 시각(timestamp), y: 가격, volume? } 점들의 배열(선/영역 뷰), candles는 { x, open, high, low, close, volume? } OHLC 배열(캔들 뷰) — 둘 중 하나를 줍니다. baseline은 기준가(개장가·전일종가)입니다. valueFormat·timeFormat·xFormat으로 가격과 시각 표기를 제어합니다.