toomuchdesign/react-minimal-pie-chart

label block onClick

Nichon4 opened this issue · 3 comments

Nichon4 commented

Do you want to request a feature or report a bug?

bug

What is the current behaviour?

when label and onClick props are used, clicks on label do nothing

What is the expected behaviour?

onClick function call

Steps to Reproduce the Problem

  1. Create PieChart with label and onClick props
  2. click
  3. ...

Specifications

  • Version: 5.0.1
  • Platform: Google Chrome 77.0.3865.90
  • Subsystem: Windows10
toomuchdesign commented

Hi @Nichon4, thanks for reporting!

I see at least 2 possible solutions:

  • assign labels a CSS pointer-events: none property
  • re-assign labels the interaction callbacks

I'd currently be inclined for the 2nd one.

toomuchdesign commented

Quick update:
I considered the options available to work around this issue and I changed my mind.

The most effective solution seems to be using the labelStyle property to assign a CSS pointer-events: none property to each label and make them non interactive:

<PieChart
  label={true}
  labelStyle={{
    pointerEvents: 'none',
  }}
/>

Re-assigning event listeners to the labels would work for click events but would trigger the events repeatedly while hovering in-between segments and labels.

@Nichon4 please close the issue if the solution provided works for you.
Cheers!

Nichon4 commented

@toomuchdesign your solution is work.
Thanks a lot!