diff --git a/samples/App.tsx b/samples/App.tsx
index 841a267..5fc5e1d 100644
--- a/samples/App.tsx
+++ b/samples/App.tsx
@@ -1,3 +1,5 @@
+// App.tsx
+
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import NavBar from './utils/NavBar';
@@ -8,6 +10,9 @@ import DoubleLayerPieChart from './pages/DoubleLayerPieChart';
 import PieChart from './pages/PieChart';
 import StraightAnglePieChart from './pages/StraightAnglePieChart';
 import PieChartWithPaddingAngle from './pages/PieChartWithPaddingAngle';
+import PieChartWithCustomizedLabel from './pages/PieChartWithCustomizedLabel';
+import CustomActiveShapePieChart from './pages/CustomActiveShapePieChart';
+
 
 const App = () => {
   return (
@@ -21,7 +26,9 @@ const App = () => {
           <Route path="/double-layer-pie" element={<DoubleLayerPieChart />} />
           <Route path="/pie-chart" element={<PieChart />} />
           <Route path="/straight-angle-pie" element={<StraightAnglePieChart />} />
-          <Route path="/padding-angle-pie" element={<PieChartWithPaddingAngle />} />
+          <Route path="/pie-chart-with-padding-angle" element={<PieChartWithPaddingAngle />} />
+          <Route path="/pie-chart-with-customized-label" element={<PieChartWithCustomizedLabel />} />
+          <Route path="/custom-active-shape-pie" element={<CustomActiveShapePieChart />} />
         </Routes>
       </div>
     </Router>
diff --git a/samples/pages/CustomActiveShapePieChart.tsx b/samples/pages/CustomActiveShapePieChart.tsx
new file mode 100644
index 0000000..a70dc41
--- /dev/null
+++ b/samples/pages/CustomActiveShapePieChart.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data01 = [
+  { name: 'Group A', value: 400 },
+  { name: 'Group B', value: 300 },
+  { name: 'Group C', value: 300 },
+  { name: 'Group D', value: 200 },
+  { name: 'Group E', value: 278 },
+  { name: 'Group F', value: 189 },
+];
+
+const CustomActiveShapePieChart: React.FC = () => {
+  const [pies, setPies] = useState([
+    {
+      id: 1,
+      innerRadius: 0,
+      outerRadius: 80,
+      cx: '50%',
+      cy: '50%',
+      showLabels: true,
+      startAngle: 0,
+      endAngle: 360,
+      label: 'percent',
+      activeShape: true,
+    },
+  ]);
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">Custom Active Shape Pie Chart</h1>
+      <div className="flex gap-6">
+        <PieChartControls pies={pies} setPies={setPies} showPolarGrid={showPolarGrid} setShowPolarGrid={setShowPolarGrid} />
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          {pies.map((pie) => (
+            <Pie
+              key={pie.id}
+              data={data01}
+              dataKey="value"
+              nameKey="name"
+              cx={pie.cx}
+              cy={pie.cy}
+              innerRadius={pie.innerRadius}
+              outerRadius={pie.outerRadius}
+              startAngle={pie.startAngle}
+              endAngle={pie.endAngle}
+              fill="#8884d8"
+              label={pie.label}
+              activeShape={pie.activeShape}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default CustomActiveShapePieChart;
diff --git a/samples/pages/PieChartWithCustomizedLabel.tsx b/samples/pages/PieChartWithCustomizedLabel.tsx
new file mode 100644
index 0000000..fe0cc53
--- /dev/null
+++ b/samples/pages/PieChartWithCustomizedLabel.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PieChart from '../../src/PieChart';
+import Pie from '../../src/Pie';
+import PolarGrid from '../../src/PolarGrid';
+import Tooltip from '../../src/Tooltip';
+import Legend from '../../src/Legend';
+import PieChartControls from '../utils/PieChartControls';
+
+const data01 = [
+  { "name": "Group A", "value": 400 },
+  { "name": "Group B", "value": 300 },
+  { "name": "Group C", "value": 300 },
+  { "name": "Group D", "value": 200 },
+  { "name": "Group E", "value": 278 },
+  { "name": "Group F", "value": 189 }
+];
+
+const PieChartWithCustomizedLabel: React.FC = () => {
+  const [pies, setPies] = useState([
+    {
+      id: 1,
+      innerRadius: 0,
+      outerRadius: 80,
+      cx: '50%',
+      cy: '50%',
+      showLabels: true,
+      startAngle: 0,
+      endAngle: 360,
+      label: ['A', 'B', 'C', 'D', 'E', 'F'],
+    },
+  ]);
+  const [showPolarGrid, setShowPolarGrid] = useState(true);
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-semibold mb-4">PieChart With Customized Label</h1>
+      <div className="flex">
+        <PieChartControls 
+          pies={pies} 
+          setPies={setPies} 
+          showPolarGrid={showPolarGrid} 
+          setShowPolarGrid={setShowPolarGrid} 
+        />
+        <PieChart width={730} height={250}>
+          {showPolarGrid && <PolarGrid />}
+          {pies.map((pie) => (
+            <Pie
+              key={pie.id}
+              data={data01}
+              dataKey="value"
+              nameKey="name"
+              cx={pie.cx}
+              cy={pie.cy}
+              innerRadius={pie.innerRadius}
+              outerRadius={pie.outerRadius}
+              startAngle={pie.startAngle}
+              endAngle={pie.endAngle}
+              fill="#8884d8"
+              label={pie.showLabels ? pie.label : false}
+            />
+          ))}
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+    </div>
+  );
+};
+
+export default PieChartWithCustomizedLabel;
diff --git a/samples/utils/NavBar.tsx b/samples/utils/NavBar.tsx
index a3a3c0b..d300817 100644
--- a/samples/utils/NavBar.tsx
+++ b/samples/utils/NavBar.tsx
@@ -1,3 +1,4 @@
+// NavBar.tsx
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -21,10 +22,12 @@ const NavBar = () => {
     {
       category: 'Pie Charts',
       items: [
-        { name: 'Double Layer Pie Chart', path: '/double-layer-pie' },
         { name: 'Pie Chart', path: '/pie-chart' },
+        { name: 'Double Layer Pie Chart', path: '/double-layer-pie' },
         { name: 'Straight Angle Pie Chart', path: '/straight-angle-pie' },
-        { name: 'Pie Chart with Padding Angle', path: '/padding-angle-pie' },
+        { name: 'Pie Chart with Padding Angle', path: '/pie-chart-with-padding-angle' },
+        { name: 'Pie Chart with Customized Label', path: '/pie-chart-with-customized-label' },
+        { name: 'Custom Active Shape Pie Chart', path: '/custom-active-shape-pie' },
       ],
     },
   ];
diff --git a/samples/utils/PieChartControls.tsx b/samples/utils/PieChartControls.tsx
index bbc8216..cc5f0b7 100644
--- a/samples/utils/PieChartControls.tsx
+++ b/samples/utils/PieChartControls.tsx
@@ -3,28 +3,32 @@ import React from 'react';
 interface PieChartControlsProps {
   pies: Array<{
     id: number;
-    innerRadius: number;
-    outerRadius: number;
-    cx: string | number;
-    cy: string | number;
-    showLabels: boolean;
-    startAngle: number;
-    endAngle: number;
-    paddingAngle: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cx?: string | number;
+    cy?: string | number;
+    showLabels?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    label?: 'percent' | string[] | boolean;
+    paddingAngle?: number;
+    activeShape?: boolean;
   }>;
   setPies: React.Dispatch<React.SetStateAction<Array<{
     id: number;
-    innerRadius: number;
-    outerRadius: number;
-    cx: string | number;
-    cy: string | number;
-    showLabels: boolean;
-    startAngle: number;
-    endAngle: number;
-    paddingAngle: number;
+    innerRadius?: number;
+    outerRadius?: number;
+    cx?: string | number;
+    cy?: string | number;
+    showLabels?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    label?: 'percent' | string[] | boolean;
+    paddingAngle?: number;
+    activeShape?: boolean;
   }>>>;
-  showPolarGrid: boolean;
-  setShowPolarGrid: (show: boolean) => void;
+  showPolarGrid?: boolean;
+  setShowPolarGrid?: (show: boolean) => void;
 }
 
 const PieChartControls: React.FC<PieChartControlsProps> = ({ pies, setPies, showPolarGrid, setShowPolarGrid }) => {
@@ -34,97 +38,149 @@ const PieChartControls: React.FC<PieChartControlsProps> = ({ pies, setPies, show
     setPies(updatedPies);
   };
 
+  const handleLabelChange = (index: number, value: string) => {
+    const updatedPies = [...pies];
+    if (value === 'percent') {
+      updatedPies[index].label = 'percent';
+    } else if (value) {
+      updatedPies[index].label = value.split(',');
+    } else {
+      updatedPies[index].label = true;
+    }
+    setPies(updatedPies);
+  };
+
   return (
     <div className="bg-white p-6 shadow-lg rounded-lg mb-5 max-w-md">
       <h2 className="text-2xl font-semibold mb-6 text-purple-600">Chart Settings</h2>
       <form className="space-y-6">
-        <div className="space-y-2">
-          <label className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
-            <input
-              type="checkbox"
-              checked={showPolarGrid}
-              onChange={(e) => setShowPolarGrid(e.target.checked)}
-              className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
-            />
-            <span className="text-sm">Show Polar Grid</span>
-          </label>
-        </div>
+        {setShowPolarGrid && (
+          <div className="space-y-2">
+            <label className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
+              <input
+                type="checkbox"
+                checked={showPolarGrid}
+                onChange={(e) => setShowPolarGrid?.(e.target.checked)}
+                className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
+              />
+              <span className="text-sm">Show Polar Grid</span>
+            </label>
+          </div>
+        )}
         {pies.map((pie, index) => (
           <div key={pie.id} className="bg-gray-100 p-4 rounded-lg mb-4">
             <h3 className="text-lg font-medium text-purple-600 mb-2">Pie {index + 1} Settings</h3>
             <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">Inner Radius</label>
-                <input
-                  type="number"
-                  value={pie.innerRadius}
-                  onChange={(e) => handlePieChange(index, 'innerRadius', parseInt(e.target.value, 10))}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">Outer Radius</label>
-                <input
-                  type="number"
-                  value={pie.outerRadius}
-                  onChange={(e) => handlePieChange(index, 'outerRadius', parseInt(e.target.value, 10))}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">Start Angle</label>
-                <input
-                  type="number"
-                  value={pie.startAngle}
-                  onChange={(e) => handlePieChange(index, 'startAngle', parseInt(e.target.value, 10))}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">End Angle</label>
-                <input
-                  type="number"
-                  value={pie.endAngle}
-                  onChange={(e) => handlePieChange(index, 'endAngle', parseInt(e.target.value, 10))}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">Padding Angle</label>
-                <input
-                  type="number"
-                  value={pie.paddingAngle}
-                  onChange={(e) => handlePieChange(index, 'paddingAngle', parseInt(e.target.value, 10))}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">cx</label>
-                <input
-                  type="text"
-                  value={pie.cx}
-                  onChange={(e) => handlePieChange(index, 'cx', e.target.value)}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-purple-600 mb-1">cy</label>
-                <input
-                  type="text"
-                  value={pie.cy}
-                  onChange={(e) => handlePieChange(index, 'cy', e.target.value)}
-                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
-                />
-              </div>
-              <label className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
-                <input
-                  type="checkbox"
-                  checked={pie.showLabels}
-                  onChange={(e) => handlePieChange(index, 'showLabels', e.target.checked)}
-                  className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
-                />
-                <span className="text-sm">Show Labels</span>
-              </label>
+              {pie.innerRadius !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">Inner Radius</label>
+                  <input
+                    type="number"
+                    value={pie.innerRadius}
+                    onChange={(e) => handlePieChange(index, 'innerRadius', parseInt(e.target.value, 10))}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.outerRadius !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">Outer Radius</label>
+                  <input
+                    type="number"
+                    value={pie.outerRadius}
+                    onChange={(e) => handlePieChange(index, 'outerRadius', parseInt(e.target.value, 10))}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.startAngle !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">Start Angle</label>
+                  <input
+                    type="number"
+                    value={pie.startAngle}
+                    onChange={(e) => handlePieChange(index, 'startAngle', parseInt(e.target.value, 10))}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.endAngle !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">End Angle</label>
+                  <input
+                    type="number"
+                    value={pie.endAngle}
+                    onChange={(e) => handlePieChange(index, 'endAngle', parseInt(e.target.value, 10))}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.cx !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">cx</label>
+                  <input
+                    type="text"
+                    value={pie.cx}
+                    onChange={(e) => handlePieChange(index, 'cx', e.target.value)}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.cy !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">cy</label>
+                  <input
+                    type="text"
+                    value={pie.cy}
+                    onChange={(e) => handlePieChange(index, 'cy', e.target.value)}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.paddingAngle !== undefined && (
+                <div>
+                  <label className="block text-sm font-medium text-purple-600 mb-1">Padding Angle</label>
+                  <input
+                    type="number"
+                    value={pie.paddingAngle}
+                    onChange={(e) => handlePieChange(index, 'paddingAngle', parseInt(e.target.value, 10))}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.showLabels !== undefined && (
+                <label className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
+                  <input
+                    type="checkbox"
+                    checked={pie.showLabels}
+                    onChange={(e) => handlePieChange(index, 'showLabels', e.target.checked)}
+                    className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
+                  />
+                  <span className="text-sm">Show Labels</span>
+                </label>
+              )}
+              {pie.label !== undefined && (
+                <div className="col-span-2">
+                  <label className="block text-sm font-medium text-purple-600 mb-1">Labels (percent or comma-separated)</label>
+                  <input
+                    type="text"
+                    placeholder="percent or values"
+                    onChange={(e) => handleLabelChange(index, e.target.value)}
+                    className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                  />
+                </div>
+              )}
+              {pie.activeShape !== undefined && (
+                <label className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
+                  <input
+                    type="checkbox"
+                    checked={pie.activeShape}
+                    onChange={(e) => handlePieChange(index, 'activeShape', e.target.checked)}
+                    className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
+                  />
+                  <span className="text-sm">Active Shape</span>
+                </label>
+              )}
             </div>
           </div>
         ))}
diff --git a/src/Pie/index.tsx b/src/Pie/index.tsx
index 11e587b..4088283 100644
--- a/src/Pie/index.tsx
+++ b/src/Pie/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 interface PieProps {
@@ -10,10 +10,11 @@ interface PieProps {
     innerRadius?: number;
     outerRadius: number;
     fill: string;
-    label?: boolean;
+    label?: 'percent' | string[];
     startAngle?: number;
     endAngle?: number;
     paddingAngle?: number;
+    activeShape?: boolean;
 }
 
 const Pie: React.FC<PieProps> = ({
@@ -25,10 +26,11 @@ const Pie: React.FC<PieProps> = ({
     innerRadius = 0,
     outerRadius,
     fill,
-    label = false,
+    label = [],
     startAngle = 0,
     endAngle = 360,
     paddingAngle = 0,
+    activeShape = false,
 }) => {
     const computedCx = typeof cx === 'string' && cx.endsWith('%') ? (parseFloat(cx) / 100) * 730 : cx;
     const computedCy = typeof cy === 'string' && cy.endsWith('%') ? (parseFloat(cy) / 100) * 250 : cy;
@@ -38,6 +40,8 @@ const Pie: React.FC<PieProps> = ({
 
     let currentAngle = startAngle + 180;
 
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
     return (
         <g transform={`translate(${computedCx}, ${computedCy})`}>
             {data.map((entry, index) => {
@@ -62,19 +66,41 @@ const Pie: React.FC<PieProps> = ({
 
                 currentAngle = nextAngle + paddingAngle;
 
+                let labelText = '';
+                if (label === 'percent') {
+                    labelText = `${((value / totalValue) * 100).toFixed(1)}%`;
+                } else if (Array.isArray(label) && label[index]) {
+                    labelText = label[index];
+                } else {
+                    labelText = `${value}`;
+                }
+
+                const isActive = activeShape && activeIndex === index;
+                const adjustedOuterRadius = isActive ? outerRadius + 10 : outerRadius;
+
                 return (
-                    <g key={uuidv4()}>
-                        <path d={pathData} fill={fill} stroke='#fff' strokeWidth={1} />
+                    <g
+                        key={uuidv4()}
+                        onMouseEnter={() => setActiveIndex(index)}
+                        onMouseLeave={() => setActiveIndex(null)}
+                    >
+                        <path
+                            d={pathData}
+                            fill={fill}
+                            stroke='#fff'
+                            strokeWidth={1}
+                            style={{ transform: isActive ? 'scale(1.05)' : 'scale(1)', transition: 'transform 0.2s' }}
+                        />
                         {label && (
                             <text
-                                x={Math.cos((Math.PI / 180) * (currentAngle - angle / 2)) * (outerRadius + 10)}
-                                y={Math.sin((Math.PI / 180) * (currentAngle - angle / 2)) * (outerRadius + 10)}
+                                x={Math.cos((Math.PI / 180) * (currentAngle - angle / 2)) * (adjustedOuterRadius + 10)}
+                                y={Math.sin((Math.PI / 180) * (currentAngle - angle / 2)) * (adjustedOuterRadius + 10)}
                                 textAnchor='middle'
                                 dominantBaseline='middle'
                                 fill={fill}
                                 fontSize='10'
                             >
-                                {entry[dataKey]}
+                                {labelText}
                             </text>
                         )}
                     </g>