cl-react-graph/docs/component---src-pages-pie-tsx-a6c5bd2f8e5be90f97ca.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[682],{5745:function(n,e,t){t.d(e,{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;}"])},6824:function(n,e,t){t.r(e);var a=t(8833),i=t(7294),l=t(6453),r=t(256),c=t(6362),d=t(5745);const o={bins:["bin 1","bin 2","bin 3 with a long name","bin 4","bin 5","bin 6","bin 7"],counts:[{data:[1,2,3,4,5,6,7],label:"Set 1"},{data:[4,32,23,14,2,1,22],label:"Set 2"}]};e.default=()=>{const[n,e]=(0,l.z8)("90%");return i.createElement(c.A,null,i.createElement("h2",null,"Pie Chart"),i.createElement(d.V,null,i.createElement(l.De,{data:o,theme:a.Z,onSelect:()=>console.log("select"),visible:{}}),i.createElement("div",{ref:n},i.createElement(l.uc,{width:400,height:400,donutWidth:30,data:o,labelFormat:n=>n.percentage+"%"})),i.createElement(r.U,{exampleCode:"import {\n  PieChart,\n  useWidth,\n} from 'cl-react-graph;\n\nconst data = {\n  bins: [\n    'bin 1',\n    'bin 2',\n    'bin 3 with a long name',\n    'bin 4',\n    'bin 5',\n    'bin 6',\n    'bin 7'\n  ],\n  counts: [\n    {\n      data: [1, 2, 3, 4, 5, 6, 7],\n    },\n  ],\n};\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth('90%');\n  return(\n    <div ref={ref}>\n      <PieChart\n        width={400}\n        height={400}\n        labels={{\n          display: true,\n        }}\n        data={data} />\n    </div>\n  )\n};\n"})))}}}]);
//# sourceMappingURL=component---src-pages-pie-tsx-a6c5bd2f8e5be90f97ca.js.map