시작하기

소개와 설치

Funnest Charts는 투자 서비스를 위한 오픈소스(Apache-2.0) 차트 라이브러리예요.
거래소 수준의 트레이딩 차트와, 대시보드에 쓰는 가벼운 SVG 차트 컴포넌트를 함께 제공해요.

설치

React에서는 패키지 하나면 트레이딩 차트와 차트 컴포넌트를 모두 쓸 수 있어요.

bash

npm i @funnest/charts-react

패키지 구성

@funnest/charts-reactReact용. 트레이딩 차트(FnChart)와 SVG 차트 컴포넌트

@funnest/charts-ui툴바·검색·지표·그리기 도구가 있는 트레이딩 위젯. 프레임워크와 상관없이 사용

@funnest/chartsCanvas 차트 엔진, 지표 계산, 실시간 연결 도구. UI 없이 직접 만들 때

@funnest/charts-viz스케일·눈금·경로 계산. 웹과 React Native가 함께 쓰는 순수 TypeScript

첫 트레이딩 차트

데이터를 주는 datafeed와 종목 코드만 있으면 돼요.
datafeed를 만드는 법은 데이터 연결에서 볼 수 있어요.

Trading.tsx

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

export function Trading() {
  return (
    <div style={{ height: 600 }}>
      <FnChart datafeed={myDatafeed} symbol="005930" resolution="1D" />
    </div>
  );
}

첫 차트 컴포넌트

수익률 카드나 관심종목처럼 트레이딩 화면까지는 필요 없을 때 써요.
서버 렌더링에도 안전해요.

ReturnCard.tsx

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

<LineChart
  series={[{ id: 'price', data: [52000, 53100, 52800, 54200, 55000] }]}
  area="gradient"
  scrubber
/>

라이브러리에는 특정 거래소·증권사 연결 코드가 들어 있지 않아요.
바이낸스, 업비트, 증권사 API는 Datafeed 인터페이스로 직접 연결해요.

트레이딩 차트 →옵션, 슬롯, 레이아웃 저장 차트 컴포넌트 →LineChart부터 Legend까지