시작하기

트레이딩 차트

캔들 차트에 툴바, 심볼 검색, 지표, 그리기 도구, 차트 설정까지 붙은 완성형 위젯이에요.
이 사이트 첫 화면의 차트가 바로 이 컴포넌트예요.

React

tsx

import { FnChart } from '@funnest/charts-react';

<FnChart
  datafeed={myDatafeed}
  symbol="005930"
  resolution="1D"
  style={{ height: 600 }}
/>

symbol, resolution, locale, theme, colorScheme는 바꾸면 바로 반영돼요.
datafeed가 바뀌면 차트를 새로 만들어요.

React 없이

tsx

import { createTradingChart } from '@funnest/charts-ui';

const widget = createTradingChart(document.getElementById('chart')!, {
  datafeed: myDatafeed,
  symbol: '005930',
});

widget.setSymbol('000660');
widget.destroy();

주요 옵션

속성	타입	기본값	설명
`datafeed`	`Datafeed`	—	과거 봉, 실시간 봉, 종목 검색을 주는 객체.
`symbol`	`string`	—	처음 보여줄 종목.
`resolution`	`string`	`'1D'`	봉 단위. '1', '5', '60', '1D', '1W' 등.
`colorScheme`	`'light' \| 'dark' \| 'system'`	`'system'`	OS 설정을 따르거나 고정.
`theme`	`Partial<ThemeTokens>`	—	색·글꼴 덮어쓰기. 라이트/다크 전환 후에도 유지.
`locale`	`'ko' \| 'en'`	`'ko'`	UI 언어. ko면 시간은 한국 시간(KST)으로.
`chartType`	`'candles' \| 'line' \| 'area' …`	`'candles'`	처음 차트 종류.
`favoriteIntervals`	`Resolution[]`	—	툴바에 바로 보일 봉 단위. 사용자가 ★로 바꿔요.
`storageKey`	`string \| null`	`'funnest-charts'`	즐겨찾기·최근 검색 저장 키. null이면 저장 안 함.
`symbolLogo`	`boolean`	`true`	SymbolInfo.logoUrl 로고 표시(없으면 이니셜).
`drawingToolbar`	`boolean`	`true`	왼쪽 그리기 도구 막대.
`attribution`	`boolean`	`true`	왼쪽 아래 작은 Funnest 로고.
`trading`	`TradingAdapter`	—	평단가, 주문, 체결 내역을 차트에 표시.

슬롯: 내 UI 끼워 넣기

위젯 안의 정해진 자리에 내 컴포넌트를 넣을 수 있어요.
위젯의 색 변수(--fnc-*)를 그대로 물려받아요.

속성	타입	기본값	설명
`toolbar`	`HTMLElement`	—	툴바에서 봉 단위 버튼 바로 뒤(시세 정보 등).
`toolbarEnd`	`HTMLElement`	—	툴바 오른쪽 끝, 설정(톱니바퀴) 옆. 아이콘 버튼용.
`belowToolbar`	`HTMLElement`	—	툴바 아래 한 줄 전체.
`footer`	`HTMLElement`	—	차트 아래 한 줄 전체(연결 상태 등).

이 사이트 첫 화면의 라이트/다크 버튼

import { FnChart, FnChartSlot } from '@funnest/charts-react';

const [scheme, setScheme] = useState<'dark' | 'light'>('dark');

<FnChart datafeed={feed} symbol="005930" colorScheme={scheme}>
  <FnChartSlot name="toolbarEnd">
    <button className="fnc-btn" onClick={() => setScheme(scheme === 'dark' ? 'light' : 'dark')}>
      {scheme === 'dark' ? '☀' : '☾'}
    </button>
  </FnChartSlot>
</FnChart>

레이아웃 저장과 복원

종목, 봉 단위, 차트 종류, 설정, 지표, 그리기가 하나의 JSON으로 저장돼요.
사용자 계정에 저장해두고 다음에 그대로 열 수 있어요.

tsx

const ref = useRef<TradingChart>(null);

<FnChart ref={ref} datafeed={feed} symbol="005930" />

const state = ref.current!.save();    // JSON으로 저장
await ref.current!.load(state);       // 그대로 복원

이벤트

tsx

import { useChartEvent } from '@funnest/charts-react';

// FnChart 안쪽 컴포넌트에서
useChartEvent('quoteChange', (quote) => setPrice(quote.price));
useChartEvent('symbolChange', (info) => setTitle(info.name));

무료로 쓰신다면 왼쪽 아래 로고(attribution)를 켜두시는 게 프로젝트에 가장 큰 응원이 돼요.

데이터 연결 →Datafeed 만들기와 실시간 연결 테마 →라이트/다크, 상승·하락 색