cl-react-graph/docs/component---src-pages-axis-tsx-185cb574d1e4c818e9f4.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[539],{5745:function(e,n,t){t.d(n,{V:function(){return a}});const a=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;}"])},5044:function(e,n,t){t.r(n);var a=t(7294),l=t(6453),i=t(256),r=t(6362),s=t(5745);const c={bins:["Female","Male","Other"],counts:[{data:[79200,52400,13300],label:"Baseline"}]};n.default=()=>{const[e,n]=(0,l.z8)("90%");return a.createElement(r.A,null,a.createElement("h2",null,"Axis"),a.createElement("p",null,"An axis must be placed inside a Base component. Axis can be either XAxis or YAxis"),a.createElement("h3",null,"XAxis"),a.createElement(s.V,null,a.createElement(l.XY,{width:220,height:50},a.createElement(l.Kc,{width:200,height:20,top:0,left:20,labelOrientation:l.Af.HORIZONTAL,scale:"band",values:c.bins})),a.createElement(i.U,{exampleCode:"import {\n  BarChart, \n} from 'cl-react-graph;\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  return(\n    <Base\n    width={220}\n    height={50}>\n      <XAxis\n        width={200}\n        height={20}\n        top={0}\n        left={20}\n        labelOrientation={ELabelOrientation.HORIZONTAL}\n        scale=\"band\"\n        values={['Female', 'Male', 'Other']} />\n    </Base>\n  )\n};\n"})),a.createElement("h3",null,"YAxis"),a.createElement(s.V,null,a.createElement(l.XY,{width:220,height:50},a.createElement(l.B2,{width:20,height:200,top:0,left:20,labelOrientation:l.Af.HORIZONTAL,scale:"band",values:c.bins})),a.createElement(i.U,{exampleCode:"import {\n  BarChart, \n} from 'cl-react-graph;\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  return(\n    <Base\n      width={220}\n      height={50}>\n      <YAxis\n        width={20}\n        height={200}\n        top={0}\n        left={20}\n        labelOrientation={ELabelOrientation.HORIZONTAL}\n        scale=\"band\"\n        values={data.bins} />\n    </Base>\n  )\n};\n"})))}}}]);
//# sourceMappingURL=component---src-pages-axis-tsx-185cb574d1e4c818e9f4.js.map