moda-chart - React·Vue·Svelte·Vanilla 멀티 프레임워크 차트 라이브러리 | ModaOlive Tools

35종 차트 타입을 React·Vue·Svelte·순수 JS 어디서든 똑같이 그리는, 헤드리스 차트 라이브러리.

moda-chart는 스케일 계산·인터랙션·이벤트 등 모든 로직을 순수 TypeScript 코어(ChartCore)에 두고, 각 프레임워크 어댑터는 얇은 반응형 바인딩만 담당합니다. 모든 렌더러가 같은 DOM 계약(.mc-*)을 만들어 결과가 항상 같습니다.

줌/네비게이터/드릴다운/주석 그리기/차트 동기화처럼 상용 차트에서 유료인 기능을 포함하고, 내장 세계 지도·스파크라인까지 — 번들 약 250KB로 가볍습니다.

라이브 데모

CDN에서 불러온 실제 코어로 동작합니다. 라인·막대·파이부터 캔들스틱· 생키·선버스트·세계 지도까지 전 차트 타입을 전환해 볼 수 있고, 범례·툴팁·줌·브러시·네비게이터·포인트 선택·우클릭 메뉴·드릴다운· 주석 그리기(추세선/피보나치/구간 측정)를 직접 써볼 수 있습니다. 아래 패널에는 지금 설정을 재현하는 코드가 실시간으로 표시됩니다.

환경별 패키지

3단계로 시작하기

1. 1

   패키지 설치

   npm i @moda-chart/react처럼 어댑터를 설치하거나, CDN <script> 한 줄로 코어를 로드합니다.

2. 2

   타입 + 데이터

   type과 series·categories만 넘기면 됩니다. points·ohlc·tree·links처럼 타입별 데이터 필드는 필요할 때 추가합니다.

3. 3

   렌더링·조작

   어댑터는 <ChartView> 하나면 끝. vanilla는 mountChart(el, options)가 DOM과 인터랙션을 전부 배선합니다.

// npm i @moda-chart/react
import { ChartView, useChartCore } from "@moda-chart/react";
import "@moda-chart/react/styles.css";

function App() {
  const { chart, snapshot } = useChartCore({
    type: "line",
    series: [
      { name: "매출", values: [12, 24, 16, 30] },
      { name: "비용", values: [8, 14, 12, 20] },
    ],
    categories: ["1월", "2월", "3월", "4월"],
    legend: { position: "top" },
    tooltip: { mode: "shared" },
    zoom: true,
  });
  return <ChartView chart={chart} />;
}
// 이후 변경은 chart.setData / chart.setType 같은 코어 메서드로

기능별 사용법

상황별 레시피

new ChartCore({
  type: "bar",
  series: [{ name: "월별", values: [12, 24, 16] }],
  categories: ["1월", "2월", "3월"],
  drilldown: {
    "1월": {
      series: [{ name: "1월 주별", values: [3, 4, 2, 3] }],
      categories: ["1주", "2주", "3주", "4주"],
      title: "1월 주별 매출",
    },
  },
});

chart.drillUp();   // 한 레벨 복귀

chart.setDrawMode("fibonacci"); // 드래그 → 0~100% 되돌림 레벨
chart.setDrawMode("channel");   // 평행 채널 + 음영 밴드
chart.setDrawMode("measure");   // Δx/Δy 자동 라벨

chart.getDrawings();      // DrawingInput[] (데이터 좌표)
chart.clearDrawings();
chart.setDrawMode(null);  // 해제 (Esc도 가능)

setInterval(() => {
  series[0].values.push(rand()); series[0].values.shift();
  chart.setData(series, categories);   // 참조가 새 배열이면 리렌더
}, 1000);

// 게이지처럼 단일 포인트만 바꿀 때
chart.updatePoint(seriesId, 0, nextValue);

mountChart(elA, { type: "line", series, categories, sync: "dash" });
mountChart(elB, { type: "bar",  series, categories, sync: "dash" });

// 한쪽에서 줌/호버하면 다른 쪽에도 같은 도메인 기준으로 전파
// (전파된 변경은 다시 전파되지 않아 루프 없음)

new ChartCore({
  type: "candlestick",
  categories: ["10/1", "10/2", "10/3"],
  series: [{
    name: "주가",
    ohlc: [
      [100, 108, 97, 105],   // [open, high, low, close]
      [105, 110, 101, 103],
      [103, 112, 102, 111],
    ],
  }],
});

import { WORLD_TOPOLOGY } from "@moda-chart/core"; // CDN은 window.ModaChart.WORLD_TOPOLOGY

new ChartCore({
  type: "map",
  series: [{
    name: "국가별 사용자",
    mapData: { KOR: 92, JPN: 64, USA: 88, DEU: 40 },
  }],
  map: { topology: WORLD_TOPOLOGY, projection: "mercator" },
});
// 조인 안 된 지역은 .mc-map-no-data, 우하단에 그라데이션 범례

소스·문서

가이드 문서(차트 타입 전체 표, 인터랙션, 테마 변수, 마이그레이션 매핑)는 공개 릴리즈 레포에서 관리됩니다.