TypeScript icon, indicating that this package has built-in type declarations

2.4.1 • Public • Published

npm package NPM downloads Build Status



This is Graphin's library of pre-built React components for common analytical use cases. Graphin is a graph analysis solution based on G6 4.x.

Components list:

Component Category Description
ContextMenu Interactive Component Help users perform node or edge operations such as tagging or expansion
Tooltip Interactive Component Help users quickly browse node or edge information
MiniMap Interactive Component Help users to navigate around the canvas
Toolbar Interactive Component Help users with canvas operations: zoom out, zoom in, full screen etc.
RedoUndo Interactive Component Help users manage graph history
FishEye Interactive Component Help users to enlarge cluttered graph details
CreateEdge Interactive Component Help users draw connections between nodes
Legend Labeling Component Displays categorical information about nodes and/or edges
Hull Labeling Component Help users group similar nodes together
Statistic Labeling Component Help users monitor canvas information
SnapshotGallery Analytical Component Provide snapshot saving and replaying function as part of an image carousel
LayoutSelector Analytical Component Help users switch layouts and configure layout options for optimal display
Sheetbar Analytical Component Help users analyze and manage multiple canvases
TableMode Analytical Component Help users view relational data as tables
FindPathPanel Algorithm Based Component Help users calculate the shortest path and possible paths between two nodes
MapMode Advanced Analytical Component Help users analyze geospatial relational data
Timebar Advanced Analytical Component Help users analyze time series relational data


npm install @antv/graphin-components --save

UMD bundle is available in releases. Peer dependencies: react, react-dom, antd.


import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import { Toolbar } from '@antv/graphin-components';

// Do not forget to import required CSS

const App = () => {
  const data = Utils.mock(10).graphin();
  return (
    <div className="App">
      <Graphin data={data}>
        <Toolbar />

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);


Please refer to Graphin Docs - Components


Please refer to Graphin Components API Doc




Package Sidebar


npm i @antv/graphin-components

Weekly Downloads






Unpacked Size

181 kB

Total Files


Last publish


  • lvisei
  • yisi.wang
  • basketduck
  • biupiubiupiu
  • flash1
  • dreammy23
  • laixingui.lxg
  • zhangjunjie-loki
  • rainy25ghz
  • zeyuwang
  • yanxiong
  • susiwen8
  • freestyle21
  • soundquiet
  • elaine.q.10
  • sturuby
  • sakuya223
  • serializedowen
  • xdzhao
  • yangzhanmei
  • wjgogogo
  • leungwensen
  • dori
  • iaaron
  • yard
  • simaq
  • dxq613
  • intchous
  • susan_ann
  • jinke.li
  • lzxue
  • army8735
  • atool
  • baizn
  • dengfuping
  • neoddish
  • jeffy2012
  • zqlu
  • afc163
  • pomelo-nwu
  • kopiluwaky
  • ccnuzindex
  • panyuqi
  • bubkoo
  • zengyue
  • kasmine
  • boyu.zlj
  • l1ud0ngq1
  • newbyvector
  • winniexing
  • chenluli
  • kn9117
  • xdddst
  • semious2020
  • esora
  • nadia_liu
  • bbsqq
  • mxz96102
  • openwayne
  • pearmini
  • pddpd
  • yiqianyao
  • zhanba
  • cxxxxxn