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

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[682],{9485:function(n,e,t){t.r(e);var a=t(7294),i=t(7345),l=t(912),r=t(6759),b=t(1358),d={bins:["bin 1","bin 2","bin 3 with a long name","bin 4","bin 5","bin 6","bin 7"],counts:[{borderColors:["red"],data:[1,2,3,4,5,6,7],label:"Data 1"}],title:"Plot 1"};e.default=function(){var n=(0,i.z8)("90%"),e=n[0];n[1];return a.createElement(r.A,null,a.createElement("h2",null,"Pie Chart"),a.createElement(b.V,null,a.createElement("div",{ref:e},a.createElement(i.uc,{width:400,height:400,labels:{display:!0},data:d})),a.createElement(l.U,{exampleCode:"import {\n  Base, \n  Grid,\n} from 'cl-react-graph;\n\nconst data = {\n  bins: ['bin 1', 'bin 2', 'bin 3 with a long name', 'bin 4', 'bin 5', 'bin 6', 'bin 7'],\n  counts: [\n    {\n      borderColors: ['red'],\n      data: [1, 2, 3, 4, 5, 6, 7],\n      label: 'Data 1',\n    },\n  ],\n  title: 'Plot 1',\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      />\n    </div>\n  )\n}\n"})))}}}]);
//# sourceMappingURL=component---src-pages-pie-tsx-be2ddfe685fe455d13a6.js.map