Cl React Graphs

Getting Started

Getting started

Common Components

Charts

Chord Chart

[40] Ireland → [30] Britain[43] Spain → [23] Ireland[30] Ireland → [20] France[20] Britain → [10] France[23] Spain → [2] Britain[12] France → [10] SpainFranceBritainIrelandSpain
import {
  Chord,
  useWidth,
} from 'cl-react-graph;


const MyComponent = () => {
  const [ref, width] = useWidth('90%');


  return (
    <div ref={ref}>
      <Chord
        width={width}
        height={400}
        data={
          {
            'France': [0, 10, 20, 12],
            'Britain': [20, 0, 30, 2],
            'Ireland': [30, 40, 0, 23],
            'Spain': [10, 23, 43, 0]
          }
        } />
    </div>
  )
};