react-relation-graph

React Relation Graph

Demo

import ReactRelationGraph from 'react-relation-graph'

export const SubRelations = () => (
  <ReactRelationGraph
    width={600}
    height={600}
    relations={[{
      name: 'Root',
      value: 0,
      color: '#000000',
      bgColor: 'blue',
      relations: [
        {
          name: 'Peer1',
          value: 5,
          color: '#ff0000',
          bgColor: 'yellow',
          relations: [
            { name: 'Peer1-1', value: 3, color: '#222222', bgColor: 'darkgreen' },
            { name: 'Peer1-2', value: 1, color: '#222222', bgColor: 'pink' }
          ]
        }, {
          name: 'Peer2',
          value: 8,
          color: '#00ff00',
          bgColor: 'orange',
          relations: [
            { name: 'Peer2-1', value: 1, color: '#222222', bgColor: 'darkgreen' },
            { name: 'Peer2-2', value: 1, color: '#222222', bgColor: 'pink' },
            { name: 'Peer2-3', value: 1, color: '#222222', bgColor: 'blue' },
            { name: 'Peer2-4', value: 1, color: '#222222', bgColor: 'darkgrey' }
          ]
        },
        { name: 'Peer3', value: 5, color: '#0000ff', bgColor: 'purple' },
      ]
    }]}
    onClick={(relation) => console.log('clicked: ', relation.name)}
    bgColor='#E5E7E9'
  />