apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.36k stars 1.3k forks source link

Disable hover effect on Donut chart #2321

Closed pererasudarshani closed 3 years ago

pererasudarshani commented 3 years ago

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

But when the mouse hovers, it displays like this. image

image

github-actions[bot] commented 3 years ago

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 commented 1 year ago

I got the same issue

marcinsta commented 1 year ago

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 commented 6 months ago

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!