cl-react-graph/docs/component---src-pages-grid-tsx-64e86b612a846fba2ead.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[853],{5745:function(e,t,n){n.d(t,{V:function(){return i}});const i=n(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;}"])},473:function(e,t,n){n.r(t);var i=n(7294),r=n(6453),l=n(256),s=n(6362),a=n(5745),d=n(5217);t.default=()=>{const[e,t]=(0,r.z8)("90%");return i.createElement(s.A,null,i.createElement("h2",null,"Grid"),i.createElement("p",null,"A grid must be placed inside a Base component."),i.createElement(a.V,null,i.createElement("div",{ref:e},i.createElement(r.XY,{width:t,height:200,title:"Grid example"},i.createElement(r.rj,{left:0,height:200,x:{height:1,style:{stroke:"#eee",strokeDasharray:"2 2",fill:d.r.grey400},ticks:5,visible:!0},y:{style:{stroke:"#eee",fill:d.r.grey400},ticks:10,visible:!0},width:t}))),i.createElement(l.U,{exampleCode:'import {\n  Base, \n  Grid,\n  useWidth,\n} from \'cl-react-graph;\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth(\'90%\');\n  return(\n    <Base\n    width={width}\n    height={200}\n    title="Grid example">\n      <Grid\n        left={0}\n        height={200}\n        x={{\n          height: 1,\n          style: {\n            stroke: "#eee",\n            strokeDasharray: "2 2",\n            fill: theme.grey400,\n          },\n          ticks: 5,\n          visible: true,\n        }}\n        y={{\n          style: {\n            stroke: "#eee",\n            fill: theme.grey400,\n          },\n          ticks: 10,\n          visible: true,\n        }}\n        width={width}\n      />\n    </Base>\n  )\n};\n'})))}}}]);
//# sourceMappingURL=component---src-pages-grid-tsx-64e86b612a846fba2ead.js.map