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' />