update

src/App.js

@@ -39,6 +39,7 @@ import SidebarDesign2 from "./components/Sidebar/SidebarDesign2";
 import SimpleBarChart from "./components/Chart/SimpleBarChart";
 
 import Switch from "./components/Switch";
+import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
 
 function App() {
   return (
@@ -78,6 +79,7 @@ function App() {
         {/* <SidebarMenu /> */}
         {/* <SidebarDesign2 /> */}
         <SimpleBarChart />
+        <SpecifiedDomainRadarChart/>
       </div>
     </Provider>
   );

src/components/Chart/SpecifiedDomainRadarChart/index.js

@@ -1,60 +1,61 @@
 import React, { PureComponent } from 'react';
 import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';
 
-const data = [
-  {
-    subject: 'Math',
-    A: 120,
-    B: 110,
-    fullMark: 150,
-  },
-  {
-    subject: 'Chinese',
-    A: 98,
-    B: 130,
-    fullMark: 150,
-  },
-  {
-    subject: 'English',
-    A: 86,
-    B: 130,
-    fullMark: 150,
-  },
-  {
-    subject: 'Geography',
-    A: 99,
-    B: 100,
-    fullMark: 150,
-  },
-  {
-    subject: 'Physics',
-    A: 85,
-    B: 90,
-    fullMark: 150,
-  },
-  {
-    subject: 'History',
-    A: 65,
-    B: 85,
-    fullMark: 150,
-  },
-];
 
-export default class Example extends PureComponent {
-  static demoUrl = 'https://codesandbox.io/s/radar-chart-specified-domain-mfl04';
-
-  render() {
-    return (
-      <ResponsiveContainer width="100%" height="100%">
+function SpecifiedDomainRadarChart ({ data })  {
+  return (
+    <section className="bg-white w-11/12 mx-auto my-20 p-7 rounded-lg shadow-lg">
+      <ResponsiveContainer width="100%" aspect={2}>
         <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
-          <PolarGrid />
-          <PolarAngleAxis dataKey="subject" />
-          <PolarRadiusAxis angle={30} domain={[0, 150]} />
-          <Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
-          <Radar name="Lily" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
-          <Legend />
+          <PolarGrid stroke="#A1CBFF"  />
+          <PolarAngleAxis dataKey="subject" tick={{stroke: "#A1CBFF"}}/>
+          {/* <PolarRadiusAxis angle={30} domain={[0, 150]} /> */}
+          <Radar name="Mike" dataKey="A" stroke="blue" fill="blue" fillOpacity={0.9} />
+          <Radar name="Lily" dataKey="B" stroke="#36C7EC" fill="#36C7EC" fillOpacity={0.1} strokeDasharray="7 7"/>
         </RadarChart>
-      </ResponsiveContainer>
-    );
-  }
-}
+      </ResponsiveContainer>    </section>
+  );
+};
+
+export default SpecifiedDomainRadarChart;
+
+SpecifiedDomainRadarChart.defaultProps = {
+  data: [
+    {
+      subject: 'پشتیبانی',
+      A: 107,
+      B: 113,
+      fullMark: 150,
+    },
+    {
+      subject: 'لجستیک',
+      A: 75,
+      B: 150,
+      fullMark: 150,
+    },
+    {
+      subject: 'زنجیره تامین',
+      A: 100,
+      B: 130,
+      fullMark: 150,
+    },
+    {
+      subject: 'اداری',
+      A: 120,
+      B: 120,
+      fullMark: 150,
+    },
+    {
+      subject: 'حسابداری',
+      A: 85,
+      B: 120,
+      fullMark: 150,
+    },
+    {
+      subject: 'بازاریابی',
+      A: 96,
+      B: 96,
+      fullMark: 150,
+    },
+  ]
+};