Get started with antv-x6-react-shape CDN

MIT licensed

AntV-X6-React-Shape is a library for creating interactive and data-driven vector graphics in React applications using AntVs X6 graph layout engine.

Tags:
  • shape
  • react
  • render
  • x6
  • antv

Stable version

Copied!

How to start using antv-x6-react-shape CDN


import React from 'react';
import { Graph, Shape } from 'antv-x6-react';

const data = {
  nodes: [
    { id: 'node1', x: 100, y: 100 },
    { id: 'node2', x: 300, y: 100 },
  ],
  edges: [
    { source: 'node1', target: 'node2' },
  ],
};

const MyGraph = () => {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Graph data={data}>
        <Shape
          type="rect"
          position={{ x: 150, y: 50 }}
          style={{
            stroke: '#1890ff',
            fill: '#f5f5f5',
            width: 100,
            height: 50,
          }}
        >
          <Text textAlign="center" text="Rectangle" fontSize={12} />
        </Shape>
      </Graph>
    </div>
  );
};

export default MyGraph;

All versions