cl-react-graph/docs/component---src-pages-bar-chart-tsx-4f331fb651e87bbd0b25.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[254],{8529:function(n,e,t){t.r(e),t.d(e,{axis:function(){return c}});var a=t(7294),i=t(1265),r=t(912),l=t(6759),o=t(1358),s=t(953),c={x:{scale:"linear",numberFormat:".2s",labelOrientation:i.Af.HORIZONTAL},y:{numberFormat:".2s",labelOrientation:i.Af.HORIZONTAL}},b={bins:["Female","Male","Other"],counts:[{data:[58483,52400,13300],label:"Baseline"},{data:[54932,34230,1e4],label:"Filtered"}]},h={fill:"#000",opacity:1,shapeRendering:"auto",stroke:"#000",strokeOpacity:1,strokeWidth:1,visible:!0},d={x:{height:1,style:Object.assign({},h,{fill:"none",stroke:"#bbb",strokeOpacity:.7,strokeWidth:1}),ticks:5,visible:!0},y:{style:Object.assign({},h,{fill:"none",stroke:"#bbb",strokeOpacity:.7,strokeWidth:5}),ticks:5,visible:!0}};e.default=function(){var n=(0,i.z8)("90%"),e=n[0],t=n[1];return a.createElement(l.A,null,a.createElement("h2",null,"Bar Chart"),a.createElement(o.V,null,a.createElement("div",{ref:e},a.createElement(i.vz,{animation:{duration:800},showLabels:[!1,!0],direction:i.b8.HORIZONTAL,data:b,height:400,tickValues:[0,4e4,89200],grid:d,colorScheme:[s.r.brightBlue800,s.r.green900],groupLayout:i.M9.GROUPED,xAxisLabelOrientation:i.Af.HORIZONTAL,width:t})),a.createElement(r.U,{exampleCode:"import {\n  BarChart,\n  EChartDirection,\n  EGroupedBarLayout,\n  ELabelOrientation,\n  IAxes,\n  IBarChartData,\n  useWidth,\n} from 'cl-react-graph;\n\n\nexport const axis: DeepPartial<IAxes> = {\n  x: {\n    scale: 'linear',\n    numberFormat: '.2s',\n    labelOrientation: ELabelOrientation.HORIZONTAL,\n  },\n  y: {\n    numberFormat: '.2s',\n    labelOrientation: ELabelOrientation.HORIZONTAL,\n  },\n};\n\nconst data: IBarChartData = {\n  bins: ['Female', 'Male', 'Other'],\n  counts: [\n    {\n      data: [58483, 52400, 13300],\n      label: 'Baseline',\n    },\n    {\n      data: [54932, 34230, 10000],\n      label: 'Filtered',\n    },\n  ]\n}\n\nexport const lineStyle: ISVGLineStyle = {\n  'fill': '#000',\n  'opacity': 1,\n  'shapeRendering': 'auto',\n  'stroke': '#000',\n  'strokeOpacity': 1,\n  'strokeWidth': 1,\n  'visible': true,\n};\n\nconst grid: IGrid = {\n  x: {\n    height: 1,\n    style: {\n      ...lineStyle,\n      'fill': 'none',\n      'stroke': '#bbb',\n      'strokeOpacity': 0.7,\n      'strokeWidth': 1,\n    },\n    ticks: 5,\n    visible: true,\n  },\n  y: {\n    style: {\n      ...lineStyle,\n      'fill': 'none',\n      'stroke': '#bbb',\n      'strokeOpacity': 0.7,\n      'strokeWidth': 5,\n    },\n    ticks: 5,\n    visible: true,\n  },\n};\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n\n  return (\n    <div ref={ref}>\n    <BarChart\n      animation={{\n        duration: 800,\n      }}\n      showLabels={[false, true]}\n      direction={EChartDirection.HORIZONTAL}\n      data={data}\n      height={400}\n      tickValues={[0, 40000, 89200]}\n      grid={grid}\n      colorScheme={[theme.brightBlue800, theme.green900]}\n      groupLayout={EGroupedBarLayout.GROUPED}\n      xAxisLabelOrientation={ELabelOrientation.HORIZONTAL}\n      width={width}\n    />\n  </div>\n  )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-bar-chart-tsx-4f331fb651e87bbd0b25.js.map