plotly/react-plotly.js

Plotly.js를 React에서 쉽게 쓸 수 있는 공식 차트 컴포넌트

개발 재료맘대로 써도 됨 · MIT투자·금융난이도
1,085+0이번 주137150JavaScript
중간맛 분석

스택: React + Plotly.js (D3 기반)
난이도: 중간 (Plotly 학습 필요)
바로 쓸 수 있나: 네. 설치 후 <Plot data={...} layout={...} /> 형태로 즉시 렌더링 가능
데모: Live Demo 제공, 소스코드도 공개됨
핵심: 30개 이상의 차트 타입, 줌/팬 등 사용자 인터랙션 자동 지원, 반응형 레이아웃 지원(useResizeHandler), 상태 관리는 부모 컴포넌트에서 onUpdate 콜백으로 처리

이런 레포예요

이럴 때 쓰면 좋아요

  • 재무 대시보드에서 시계열 데이터와 여러 차트 타입 동시 렌더링
  • 생명과학 분석 도구에서 3D 산점도와 히트맵 표시
  • 데이터 분석 웹앱에서 사용자 드래그/줌 인터랙션을 통한 동적 탐색

핵심 기능

30+ 차트 타입 지원 (산점도, 막대, 라인, 3D, 애니메이션 등)줌, 팬, 범위 선택 등 내장 인터랙션반응형 레이아웃 및 카스텀 번들 지원

대안 대비 차별점

Plotly 공식 React 바인딩으로 완벽한 호환성과 최신 기능을 보장하며, 금융·과학 분야 고급 시각화(3D, 애니메이션, 다양한 통계 차트)를 즉시 활용 가능합니다.

준비물
  • React 기초 지식
  • Node.js 및 npm
바로 시작하기
  1. npm으로 react-plotly.js와 plotly.js 설치
npm install react-plotly.js plotly.js
  1. React 파일에서 Plot 컴포넌트 임포트 후 데이터와 레이아웃 props로 차트 렌더링
import React from 'react';
import Plot from 'react-plotly.js';

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
      />
    );
  }
}

export default App;
  1. 반응형 레이아웃을 원하면 useResizeHandler 활성화 및 스타일 설정
<Plot
  data={[...]}  
  layout={{autosize: true, title: 'Responsive Plot'}}
  useResizeHandler={true}
  style={{width: '100%', height: '100%'}}
/>
별 추이 · 7일
1,085+0 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2017년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기