cl-react-graph/docs/component---src-pages-radar-tsx-8967259b03ba89844cef.js

React D3 Charts

"use strict";(self.webpackChunkdocs2=self.webpackChunkdocs2||[]).push([[531],{3172:function(e,a,n){n.r(a);var t=n(7294),l=n(1265),i=n(912),r=n(6759),s=n(1358),u=[{label:"Germany",axes:[{axis:"strength",value:13},{axis:"intelligence",value:6},{axis:"charisma",value:5},{axis:"dexterity",value:9},{axis:"luck",value:2}]},{label:"Argentina",axes:[{axis:"strength",value:6},{axis:"intelligence",value:7},{axis:"charisma",value:10},{axis:"dexterity",value:13},{axis:"luck",value:9}]}];a.default=function(){var e=(0,l.z8)("90%"),a=e[0],n=e[1];return t.createElement(r.A,null,t.createElement("h2",null,"Radar Chart"),t.createElement(s.V,null,t.createElement("div",{ref:a},t.createElement(l.HM,{id:"radar-demo",height:400,width:n,data:u})),t.createElement(i.U,{exampleCode:'import {\n  RadarChart,\n  useWidth,\n} from \'cl-react-graph;\n\nconst data: IRadarChartData[] = [{\n  label: \'Germany\',\n  axes: [\n    { axis: "strength", value: 13 },\n    { axis: "intelligence", value: 6 },\n    { axis: "charisma", value: 5 },\n    { axis: "dexterity", value: 9 },\n    { axis: "luck", value: 2 }\n  ]\n},\n{\n  label: \'Argentina\',\n  axes: [\n    { axis: "strength", value: 6 },\n    { axis: "intelligence", value: 7 },\n    { axis: "charisma", value: 10 },\n    { axis: "dexterity", value: 13 },\n    { axis: "luck", value: 9 }\n  ]\n}];\n\nconst MyComponent = () => {\n  const [ref, width] = useWidth(\'90%\');\n  return(\n    <div ref={ref}>\n      <RadarChart\n        id="radar-demo"\n        height={400}\n        width={width}\n        data={data} />\n    </div>\n  )\n}\n'})))}}}]);
//# sourceMappingURL=component---src-pages-radar-tsx-8967259b03ba89844cef.js.map