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

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[422],{5745:function(n,e,t){t.d(e,{V:function(){return r}});const r=t(9).default.div.withConfig({displayName:"TwoColumns",componentId:"sc-1oyhsq-0"})(["display:grid;grid-template-columns:1fr 1fr;@media (max-width:640px){grid-template-columns:1fr;}"])},5193:function(n,e,t){t.r(e);var r=t(7294),a=t(6453),i=t(256),d=t(6362),l=t(5745);e.default=()=>{const[n,e]=(0,a.z8)("90%");return r.createElement(d.A,null,r.createElement("h2",null,"Chord Chart"),r.createElement(l.V,null,r.createElement("div",{ref:n},r.createElement(a.VC,{width:Number(e)<=0?300:e,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-56e22290f4941c066ee0.js.map