Gravity UI Charts ·

10가지 이상의 차트 유형(영역, 막대, 선, 파이, 산점도, 트리맵 등)을 지원하는 React 차트 라이브러리입니다.

설치

npm install @gravity-ui/uikit @gravity-ui/charts

@gravity-ui/uikit은 필수 피어 종속성입니다. 차트가 의존하는 테마 및 스타일을 제공합니다.

사용법

진입점에서 @gravity-ui/uikit 스타일을 한 번 임포트하고, 앱을 ThemeProvider로 감싼 후, 명시적인 높이를 가진 컨테이너 안에 Chart를 렌더링하세요.

import {ThemeProvider} from '@gravity-ui/uikit';
import {Chart} from '@gravity-ui/charts';

import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

const data = {
  series: {
    data: [
      {
        type: 'line',
        name: 'Temperature',
        data: [
          {x: 0, y: 10},
          {x: 1, y: 25},
          {x: 2, y: 18},
          {x: 3, y: 30},
        ],
      },
    ],
  },
};

export default function App() {
  return (
    <ThemeProvider theme="light">
      <div style={{height: 300}}>
        <Chart data={data} />
      </div>
    </ThemeProvider>
  );
}

Chart는 부모 요소의 크기에 맞춰 조정되므로, 감싸는 요소에는 높이가 지정되어야 합니다.

차트 설정 도구

이 패키지는 차트 설정 유효성 검사, 생성 및 Monaco 통합을 위한 TypeScript 선언과 JSON 스키마를 제공합니다. 설정 및 사용 방법에 대한 자세한 내용은 차트 설정 도구 문서를 참조하세요.

문서

라이선스

MIT 라이선스에 따라 배포됩니다. 자세한 내용은 LICENSE를 참조하세요.

AI 에이전트용

Gravity UI 앱을 위한 선언적 React 차트 라이브러리 — 단일 data 설정으로 선, 영역, 막대, 파이, 산점도, 트리맵 및 기타 차트를 렌더링하며, 앱의 나머지 부분과 일치하도록 테마가 적용됩니다.

언제 사용해야 할까요?

표준 비즈니스 차트: line, area, bar-x/bar-y, pie, scatter, treemap, waterfall, sankey, radar, heatmap, funnel, x-range.
Gravity UI 테마(밝음/어두움)를 따르고 @gravity-ui/uikit 앱과 토큰을 공유해야 하는 시각화.
명령형으로 그리는 대신 선언적 데이터에서 차트를 렌더링하는 경우.

언제 사용하지 않아야 할까요?

아직 @gravity-ui/chartkit을 사용하는 프로젝트 — 이는 이전 어댑터 기반 래퍼(YAGR/Highcharts/D3)이며, 이 패키지는 최신 독립형 렌더러이며 직접적인 대체품이 아닙니다.
일반적인 표 형식 데이터 — @gravity-ui/table을 사용하세요.
React가 아니거나 서버 전용 렌더링 — Chart는 React SVG를 렌더링하며 DOM이 필요합니다.

일반적인 주의사항

컴포넌트 이름은 Chart이며 ChartKit이 아닙니다. @gravity-ui/charts에서 {Chart}를 임포트하세요. ChartKit은 별도의 레거시 @gravity-ui/chartkit 패키지에 속합니다.
data prop은 {series: {data: [...]}} 형식의 data입니다. series.data의 각 항목은 자체 type과 data 배열을 가진 하나의 시리즈이며, 최상위 시리즈 배열은 없습니다.
크기가 지정되지 않은 컨테이너 없이는 아무것도 렌더링되지 않습니다. Chart는 부모를 채우므로, 래퍼에 명시적인 높이를 지정하세요.
uikit 설정이 필요합니다. ThemeProvider로 감싸고 @gravity-ui/uikit/styles/styles.css를 임포트하세요. @gravity-ui/uikit은 필수 피어 종속성입니다.

유용한 문서

AI 에이전트용 문서

설치된 버전에 대한 에이전트가 읽을 수 있는 문서는 node_modules/@gravity-ui/charts/dist/docs/INDEX.md에 있습니다.

Charts

§Gravity UI Charts ·

§설치

§사용법

§차트 설정 도구

§문서

§라이선스

§AI 에이전트용

§언제 사용해야 할까요?

§언제 사용하지 않아야 할까요?

§일반적인 주의사항

§유용한 문서

§AI 에이전트용 문서