cl-react-graph/docs/component---src-pages-chord-tsx-a935aecc5f75b8a3f964.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[422],{8816:function(n,e,t){t.r(e);var r=t(7294),a=t(7345),i=t(912),d=t(6759),c=t(1358);e.default=function(){var n=(0,a.z8)("90%"),e=n[0],t=n[1];return r.createElement(d.A,null,r.createElement("h2",null,"Chord Chart"),r.createElement(c.V,null,r.createElement("div",{ref:e},r.createElement(a.VC,{width:t,height:400,data:{France:[0,10,20,12],Britain:[20,0,30,2],Ireland:[30,40,0,23],Spain:[10,23,43,0]}})),r.createElement(i.U,{exampleCode:"import {\n  Chord,\n  useWidth,\n} from 'cl-react-graph;\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n\n  return (\n    <div ref={ref}>\n      <Chord\n        width={width}\n        height={400}\n        data={\n          {\n            'France': [0, 10, 20, 12],\n            'Britain': [20, 0, 30, 2],\n            'Ireland': [30, 40, 0, 23],\n            'Spain': [10, 23, 43, 0]\n          }\n        } />\n  </div>\n  )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-chord-tsx-a935aecc5f75b8a3f964.js.map