Disable hover effect on Donut chart

[pererasudarshani]

I set a string[] to total, to display it in the middle of the chart. I need to display it always like this

But when the mouse hovers, it displays like this.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ductmOfficial]

I got the same issue

[marcinsta]

I am experiencing the same issue. I'd like to display static label that never changes, eg show single value only, no matter what is clicked or hovered. It shows all right initially but line break is removed when hovered over chart.

My configuration:

      pie: {
        startAngle: -90,
        endAngle: 270,
        expandOnClick: false,
        donut: {
          size: '75%',
          labels: {
            show: true,
            total: {
              show: true,
              showAlways: true,
              formatter: (w) => [`${w.config?.series?.[3] || 0}%`, 'Complete'],
            },
            value: {
              show: true,
              color: theme.palette.neutral[400],
              fontSize: oneRem * 0.7,
              offsetY: -oneRem*0.1,
              fontWeight: 600
            },
            name: {
              show: false
            }
          }
        }
      }
    },

Edit: Disabling css pointer events in wrapping element makes the job done.

[ericlara22]

I am experiencing the same issue. I'd like to display static label that never changes, eg show single value only, no matter what is clicked or hovered. It shows all right initially but line break is removed when hovered over chart.

My configuration:

      pie: {
        startAngle: -90,
        endAngle: 270,
        expandOnClick: false,
        donut: {
          size: '75%',
          labels: {
            show: true,
            total: {
              show: true,
              showAlways: true,
              formatter: (w) => [`${w.config?.series?.[3] || 0}%`, 'Complete'],
            },
            value: {
              show: true,
              color: theme.palette.neutral[400],
              fontSize: oneRem * 0.7,
              offsetY: -oneRem*0.1,
              fontWeight: 600
            },
            name: {
              show: false
            }
          }
        }
      }
    },

Edit: Disabling css pointer events in wrapping element makes the job done.

worked perfectly. Thanks!