Enable showing segment labels only on hover

src/core/config/index.js

@@ -33,6 +33,10 @@ export const DEFAULT_PROPS = {
   // custom segment labels
   customSegmentLabels: [],
 
+
+  // show custom segment labels only on hover
+  showSegmentLabelsOnlyOnHover: false,
+
   // color strings
   needleColor: 'steelblue',
   startColor: '#FF471A',
@@ -117,6 +121,9 @@ export const getConfig = ({ PROPS, parentWidth, parentHeight }) => {
     // custom segment labels
     customSegmentLabels: PROPS.customSegmentLabels,
 
+    // show custom segment labels only on hover
+    showSegmentLabelsOnlyOnHover: PROPS.showSegmentLabelsOnlyOnHover,
+
     // max segment labels
     maxSegmentLabels: calculateSegmentLabelCount({
       maxSegmentLabelCount: PROPS.maxSegmentLabels,

src/core/render/index.js

@@ -219,7 +219,26 @@ function _renderCustomSegmentLabels({
 
   const position = outerRadius - (outerRadius - innerRadius) / 2
 
-  let lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
+  let lg;
+  if (config.showSegmentLabelsOnlyOnHover) {
+    lg = svg.append('g')
+      .attr('class', 'label custom-segment-labels')
+      .attr('transform', centerTx)
+      .style('opacity', 0) // Start with labels hidden
+
+    // Add hover events to the parent SVG
+    svg
+      .on('mouseenter', () => {
+        lg.style('opacity', 1)
+          .style('transition', 'opacity 0.2s ease-in-out')
+      })
+      .on('mouseleave', () => {
+        lg.style('opacity', 0)
+          .style('transition', 'opacity 0.2s ease-in-out')
+      })
+  } else {
+    lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
+  }
 
   lg.selectAll('text')
     .data(customSegmentLabels)

src/index.d.ts

@@ -82,6 +82,8 @@ declare module 'react-d3-speedometer' {
 
     customSegmentLabels?: CustomSegmentLabel[]
 
+    showSegmentLabelsOnlyOnHover?: boolean
+
     labelFontSize?: string
     valueTextFontSize?: string
     valueTextFontWeight?: string