New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hovering and clicking on dataLabels does not work when useHTML = true #5947

Closed
wojtekmaj opened this Issue Nov 8, 2016 · 3 comments

Comments

Projects
None yet
3 participants
@wojtekmaj

wojtekmaj commented Nov 8, 2016

Expected behaviour

When allowPointSelect is set to true, and dataLabels.useHTML is set to true,

  • when I hover over data label, I expect corresponding pie slice to be highlighted.
  • when I click on over data label, I expect corresponding pie slice to be selected.
    just like it works when useHTML is set to false.

Actual behaviour

When allowPointSelect is set to true, and dataLabels.useHTML is set to true,

  • when I hover over data label, nothing happens.
  • when I click on over data label, nothing happens.

Live demo with steps to reproduce

Working example (useHTML: false):
https://jsfiddle.net/u3w67y5m/
Not working example (useHTML) true):
https://jsfiddle.net/wmzsx55q/

Affected browser(s)

All

Affected versions

At least 4.2.2 and newest 5.x.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Nov 9, 2016

Collaborator

Apparently the event handlers are not passed on to HTML object. I tried adding them to the HTML.js file, but that didn't work out. This is what I've got so far:

                            // Set listeners to update the HTML div's position whenever the SVG group
                            // position is changed
                            extend(parentGroup, {
                                on: function () {
                                    wrapper.on.apply({ element: htmlGroup }, arguments);
                                    return parentGroup;
                                },
                                translateXSetter: function (value, key) {
                                    htmlGroupStyle.left = value + 'px';
                                    parentGroup[key] = value;
                                    parentGroup.doTransform = true;
                                },
                                translateYSetter: function (value, key) {
                                    htmlGroupStyle.top = value + 'px';
                                    parentGroup[key] = value;
                                    parentGroup.doTransform = true;
                                }
                            });
Collaborator

TorsteinHonsi commented Nov 9, 2016

Apparently the event handlers are not passed on to HTML object. I tried adding them to the HTML.js file, but that didn't work out. This is what I've got so far:

                            // Set listeners to update the HTML div's position whenever the SVG group
                            // position is changed
                            extend(parentGroup, {
                                on: function () {
                                    wrapper.on.apply({ element: htmlGroup }, arguments);
                                    return parentGroup;
                                },
                                translateXSetter: function (value, key) {
                                    htmlGroupStyle.left = value + 'px';
                                    parentGroup[key] = value;
                                    parentGroup.doTransform = true;
                                },
                                translateYSetter: function (value, key) {
                                    htmlGroupStyle.top = value + 'px';
                                    parentGroup[key] = value;
                                    parentGroup.doTransform = true;
                                }
                            });

@TorsteinHonsi TorsteinHonsi added the Bug label Nov 9, 2016

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 9, 2016

Contributor

Duplicate of #3398

Contributor

pawelfus commented Nov 9, 2016

Duplicate of #3398

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Nov 28, 2016

Contributor

Issue with click events is a separate one (internal note: tracker groups), so it will be fixed as #3398.

Contributor

pawelfus commented Nov 28, 2016

Issue with click events is a separate one (internal note: tracker groups), so it will be fixed as #3398.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment