diff --git a/src/core/config/index.js b/src/core/config/index.js
index dd25d98..ca58a57 100644
--- a/src/core/config/index.js
+++ b/src/core/config/index.js
@@ -72,6 +72,8 @@ export const DEFAULT_PROPS = {
 
   // Accessibility related props
   svgAriaLabel: 'React d3 speedometer', // aria-label of speedometer
+
+  onSegmentClick: () => {}, // Default no-op function
 }
 
 // default config
@@ -150,6 +152,8 @@ export const getConfig = ({ PROPS, parentWidth, parentHeight }) => {
 
     // Accessibility related props
     svgAriaLabel: PROPS.svgAriaLabel, // aria-label of speedometer
+
+    onSegmentClick: PROPS.onSegmentClick,
   }
 
   return Object.assign({}, DEFAULT_CONFIG, config)
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 4947e51..20d9cc2 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -105,6 +105,30 @@ function _renderArcs({ config, svg, centerTx }) {
       return config.arcColorFn(d * i)
     })
     .attr('d', arc)
+    .attr('data-label', (d, i) => {
+      return config.customSegmentLabels[i]?.text || 'Default Label';
+    })
+    .attr('data-sstop', (d, i) => {
+      const startStop = config.customSegmentStops[i];
+      const endStop = config.customSegmentStops[i + 1];
+    
+      // Check if startStop or endStop are undefined, null, or not numbers
+      if (typeof startStop !== 'number' || startStop === null || isNaN(startStop) ||
+          typeof endStop !== 'number' || endStop === null || isNaN(endStop)) {
+        // Provide a default value or skip setting the attribute
+        return 'unknown'; 
+      } else {
+        // Both startStop and endStop are valid numbers
+        return `${startStop}-${endStop}`;
+      }
+    })
+    .on('click', function (event, d) {
+      const label = event.target.getAttribute('data-label');
+      const value = event.target.getAttribute('data-sstop');
+      if (config.onSegmentClick) {
+        config.onSegmentClick(label,value);
+      }
+    });
 }
 
 export function _renderLabels({ config, svg, centerTx, r }) {
diff --git a/src/stories/ReactSpeedometer.stories.jsx b/src/stories/ReactSpeedometer.stories.jsx
index 22080c9..c2e6e79 100644
--- a/src/stories/ReactSpeedometer.stories.jsx
+++ b/src/stories/ReactSpeedometer.stories.jsx
@@ -38,83 +38,93 @@ export const ConfiguringValues = () => (
   />
 )
 
-export const CustomSegmentLabels = () => (
-  <div>
-    <div>
-      <ReactSpeedometer
-        width={500}
-        needleHeightRatio={0.7}
-        value={777}
-        currentValueText="Happiness Level"
-        customSegmentLabels={[
-          {
-            text: 'Very Bad',
-            position: 'INSIDE',
-            color: '#555',
-          },
-          {
-            text: 'Bad',
-            position: 'INSIDE',
-            color: '#555',
-          },
-          {
-            text: 'Ok',
-            position: 'INSIDE',
-            color: '#555',
-            fontSize: '19px',
-          },
-          {
-            text: 'Good',
-            position: 'INSIDE',
-            color: '#555',
-          },
-          {
-            text: 'Very Good',
-            position: 'INSIDE',
-            color: '#555',
-          },
-        ]}
-        ringWidth={47}
-        needleTransitionDuration={3333}
-        needleTransition="easeElastic"
-        needleColor={'#90f2ff'}
-        textColor={'#d8dee9'}
-      />
-    </div>
+export const CustomSegmentLabels = () => {
+
+  const handleSegmentClick = (segmentLabel, segmentValue) => {
+    console.log('Segment clicked:', segmentLabel, segmentValue);
+    // Perform actions based on the segment clicked, like updating state or displaying a message
+  };
+
+  return (
     <div>
-      <ReactSpeedometer
-        width={500}
-        needleHeightRatio={0.7}
-        value={777}
-        customSegmentStops={[0, 250, 750, 1000]}
-        segmentColors={['#9399ff', '#14ffec', '#00bbf0']}
-        currentValueText="How are you?"
-        customSegmentLabels={[
-          {
-            text: 'Good',
-            position: 'OUTSIDE',
-            color: '#d8dee9',
-          },
-          {
-            text: 'Great',
-            position: 'OUTSIDE',
-            color: '#d8dee9',
-          },
-          {
-            text: 'Awesome!',
-            position: 'OUTSIDE',
-            color: '#d8dee9',
-          },
-        ]}
-        ringWidth={47}
-        needleTransitionDuration={3333}
-        needleTransition="easeElastic"
-        needleColor={'#a7ff83'}
-        textColor={'#d8dee9'}
-      />
+      <div>
+        <ReactSpeedometer
+          width={500}
+          needleHeightRatio={0.7}
+          value={777}
+          currentValueText="Happiness Level1"
+          customSegmentLabels={[
+            {
+              text: 'Very Bad',
+              position: 'INSIDE',
+              color: '#555',
+            },
+            {
+              text: 'Bad',
+              position: 'INSIDE',
+              color: '#555',
+            },
+            {
+              text: 'Ok',
+              position: 'INSIDE',
+              color: '#555',
+              fontSize: '19px',
+            },
+            {
+              text: 'Good',
+              position: 'INSIDE',
+              color: '#555',
+            },
+            {
+              text: 'Very Good',
+              position: 'INSIDE',
+              color: '#555',
+            },
+          ]}
+          ringWidth={47}
+          needleTransitionDuration={3333}
+          needleTransition="easeElastic"
+          needleColor={'#90f2ff'}
+          textColor={'#d8dee9'}
+          onSegmentClick={handleSegmentClick} // Here is your click handler
+        />
+      </div>
+      <div>
+        <ReactSpeedometer
+          width={500}
+          needleHeightRatio={0.7}
+          value={777}
+          customSegmentStops={[0, 250, 750, 1000]}
+          segmentColors={['#9399ff', '#14ffec', '#00bbf0']}
+          currentValueText="How are you?"
+          customSegmentLabels={[
+            {
+              text: 'Good',
+              position: 'OUTSIDE',
+              color: '#d8dee9',
+            },
+            {
+              text: 'Great',
+              position: 'OUTSIDE',
+              color: '#d8dee9',
+            },
+            {
+              text: 'Awesome!',
+              position: 'OUTSIDE',
+              color: '#d8dee9',
+            },
+          ]}
+          ringWidth={47}
+          needleTransitionDuration={3333}
+          needleTransition="easeElastic"
+          needleColor={'#a7ff83'}
+          textColor={'#d8dee9'}
+          onSegmentClick={handleSegmentClick} // Here is your click handler
+        />
+      </div>
     </div>
-  </div>
-)
+  );
+};
 
 export const CustomSegmentColors = () => (
   <div>