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

    2.4.0 • 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




    npm i @antv/graphin-components

    DownloadsWeekly Downloads






    Unpacked Size

    277 kB

    Total Files


    Last publish


    • flash1
    • dreammy23
    • laixingui.lxg
    • zhangjunjie-loki
    • rainy25ghz
    • zeyuwang
    • yanxiong
    • susiwen8
    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • 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