cl-react-graph
Version:
2 lines • 1.83 kB
JavaScript
"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[539],{5037:function(e,n,t){t.r(n);var a=t(7294),l=t(7345),i=t(912),r=t(6759),s=t(1358),h={bins:["Female","Male","Other"],counts:[{data:[79200,52400,13300],label:"Baseline"}]};n.default=function(){var e=(0,l.z8)("90%");e[0],e[1];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:h.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 />\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:h.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 />\n</Base>\n )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-axis-tsx-0bd5ef3597ddfeee0e81.js.map