G6
A JavaScript/TypeScript library for drawing and analyzing interactive graphs and network data in the browser.
- Stars
- 12.4k
- Forks
- 1.7k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 10 days ago
- Type
- Library
What it is
G6 is a graph visualization engine that helps developers draw networks of connected things, such as relationships between people, accounts, or devices. It provides building blocks for drawing nodes and edges, running layouts that arrange them, handling user interactions like dragging, and animating or theming the result. Developers use it to build their own graph-based analysis or visualization applications.
- Render a network of nodes and edges from your own dataset in a web page
- Apply a force-directed or other layout to organize a large set of connected items
- Add drag, zoom, and selection behaviors to let users explore a graph
- Group related nodes into combos and color them by a data field
- Embed a graph view inside a React application
Great for
- Frontend developers building interactive network or relationship diagrams in a web app
- Teams that need graph layouts such as force-directed arrangements in TypeScript or JavaScript projects
- Developers who want Canvas, SVG, or WebGL rendering options from one library
- Projects that need server-side rendering of graphs with Node.js
Not ideal for
- People who want a finished graph tool without writing code, since G6 is a library for developers
- Users who need only a simple static chart, where a lighter charting library would be less work
- Teams without JavaScript experience, because setup and customization require writing code
How to get it
- 1
Install with a package manager
You'll need: Node.js · npm or Yarn
Install G6 with npm
npm install @antv/g6 - 2
Run it
- Install the package with npm install @antv/g6.
- Add an empty div with an id of container to your HTML page.
- Import Graph from @antv/g6 and pass it a container id, a data object with nodes and edges, and a layout.
- Call graph.render() to draw the graph in the page.
- 3
Get the most out of it
- Use the palette option on nodes to color them by a data field such as cluster
- Add behaviors such as drag-canvas and drag-node to make the graph interactive
- Choose from the built-in layouts, such as force, to fit your data shape
- Use the light and dark built-in themes or the community color palettes
- Explore the official examples and API docs on the project homepage
Downloads
Strengths
- Broad built-in set of node, edge, layout, and interaction options according to the README
- Supports Canvas, SVG, and WebGL rendering, plus server-side rendering with Node.js
- Written in TypeScript and published under the permissive MIT license
Trade-offs
- The README is brief on detailed API usage, so you will rely on the external documentation site for depth
- Advanced features such as 3D rendering come through separate plugin packages
- Requires JavaScript or TypeScript knowledge to build anything
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| G6 (this) | 12.4k | Library | intermediate | 10 days ago | Frontend developers building interactive network or relationship diagrams in a web app |
| cytoscape.js | 11.3k | Library | intermediate | 6 days ago | Developers adding interactive network diagrams to a web app |
| sigma.js | 12.2k | Library | intermediate | 9 days ago | Web developers who need to display large network graphs in a browser |
| visx | 21.1k | Library | intermediate | 5 months ago | React developers who want full control over how a chart looks and behaves |
| plotly.js | 18.4k | Library | beginner | 7 days ago | Web developers who want interactive charts in their own site or app |
| deck.gl | 14.7k | Library | intermediate | 4 days ago | Developers building interactive maps or geospatial dashboards over large data sets |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.