MCP HubMCP Hub
스킬 목록으로 돌아가기

highcharts-with-react

vamseeachanta
업데이트됨 Yesterday
1 조회
3
2
3
GitHub에서 보기
기타reactdata

정보

이 스킬은 React 애플리케이션에서 선언적 차트 통합을 가능하게 하는 Highcharts용 React 컴포넌트 래퍼를 제공합니다. useEffect 훅을 사용하여 차트의 생성과 소멸을 자동으로 처리함으로써 차트 라이프사이클 관리를 담당합니다. React 컴포넌트 내부에 인터랙티브한 Highcharts 시각화를 포함하면서도 깔끔한 언마운트를 유지해야 할 때 사용하세요.

빠른 설치

Claude Code

추천
기본
npx skills add vamseeachanta/workspace-hub -a claude-code
플러그인 명령대체
/plugin add https://github.com/vamseeachanta/workspace-hub
Git 클론대체
git clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/highcharts-with-react

Claude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요

GitHub 저장소

vamseeachanta/workspace-hub
경로: .claude/skills/data/visualization/highcharts/with-react
0

연관 스킬

d3js

기타

이 스킬은 개발자들이 D3.js를 사용하여 완전히 사용자 정의된 인터랙티브 데이터 시각화를 만들 수 있게 해주며, SVG 요소와 데이터 바인딩에 대한 완전한 제어권을 제공합니다. 표준 라이브러리로는 구현할 수 없는 정교한 전환 효과와 상호작용을 갖춘 독특하고 복잡한 차트를 구축하는 데 이상적입니다. 단순한 사전 스타일링된 차트가 아닌 맞춤형 데이터 기반 시각화가 필요할 때 사용하세요.

스킬 보기

plotly-vertical-legends-avoid-toolbar-clash

기타

이 스킬은 범례를 수평 툴바와 겹치지 않도록 오른쪽에 세로로 배치하는 Plotly 레이아웃 구성을 제공합니다. 여기에는 범례에 충분한 공간을 보장하기 위한 특정 여백 조정과 간결한 스타일링이 포함됩니다. 또한 이 스킬은 다중 데이터셋 플롯에서 범례 항목을 논리적으로 그룹화하기 위한 트레이스 순서 지정 전략을 권장합니다.

스킬 보기

highcharts-1-basic-line-chart

기타

이 Claude 기술은 최소한의 설정으로 기본 라인 차트를 생성할 수 있는 바로 사용 가능한 Highcharts 구현을 제공합니다. 개발자가 직접 복사하고 수정할 수 있는 구성 가능한 데이터 시리즈, 축, 레이블이 포함된 완전한 HTML 템플릿을 포함하고 있습니다. 웹 애플리케이션에서 간단한 시계열 또는 범주형 데이터 시각화를 빠르게 생성하거나 설명해야 할 때 이 기술을 사용하세요.

스킬 보기

chartjs-1-use-responsive-containers

기타

이 스킬은 반응형 차트 컨테이너와 적절한 라이프사이클 관리를 위한 Chart.js 모범 사례를 제공합니다. 적절한 종횡비 제어를 통해 차트를 반응형 div로 감싸는 방법과 메모리 누수를 방지하기 위해 재생성 전에 차트를 제거하는 방법을 보여줍니다. 웹 애플리케이션에서 동적이거나 크기 조절 가능한 Chart.js 시각화를 구현할 때 사용하세요.

스킬 보기