ComponentsP3 본문

StockChart

애플 주식앱식 시계열 주가 차트 — 손익 색·개장가 기준선·정밀 스크럽 readout·기간 선택.

마지막 업데이트 2026-06-20

한눈에#

촘촘한 시계열(분·초 단위)을 면적으로 그리고, x축은 시간 간격으로 솎아 라벨링합니다. 차트에 마우스를 올리면 크로스헤어가 가장 가까운 시점에 스냅하며 정확한 시각과 가격을 보여주고, 부드럽게 따라 움직입니다.

구성#

  • 손익 색 — 마지막 가격이 기준선 위면 상승(초록), 아래면 하락(빨강). 선·면·강조점이 한 색으로 일관됩니다.
  • 개장가 기준선 — 기간 시작가를 가로 점선으로 그려 손익의 기준으로 삼습니다.
  • 정밀 스크럽 — 호버 시 최근접 데이터 점에 스냅하고, 그 시점의 시각·가격 readout이 크로스헤어를 따라옵니다.
  • 구간 선택 — 누르고 옆으로 드래그하면 두 시점 사이 변화(±금액·%)를 보여줍니다(애플 두 손가락 스프레드 대응).
  • 거래량 패널volume을 주면 가격 차트 하단에 거래량 막대를, 같은 x축에 정렬해 그립니다.
  • 캔들스틱candles(OHLC)를 주면 선 대신 캔들스틱 뷰(심지+몸통, 상승 초록/하락 빨강). 스크럽 시 OHLC를 보여줍니다.
  • 기간 선택 — 1일·1주·1개월 같은 세그먼트로 범위를 전환합니다.

접근성#

데이터 정본은 차트 아래의 스크린리더 전용 표입니다. 캔들 뷰는 시·고·저·종(OHLC), 거래량이 있으면 거래량까지 표에 편입됩니다. 크로스헤어·강조점·readout·캔들·거래량 막대는 마우스 전용(aria-hidden)이며, reduced-motion에서는 전환을 멈추고 즉시 스냅합니다.

데이터#

data{ x: 시각(timestamp), y: 가격, volume? } 점들의 배열(선/영역 뷰), candles{ x, open, high, low, close, volume? } OHLC 배열(캔들 뷰) — 둘 중 하나를 줍니다. baseline은 기준가(개장가·전일종가)입니다. valueFormat·timeFormat·xFormat으로 가격과 시각 표기를 제어합니다.