Skip to content
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

Refactor radar scales to expose label position data #6549

Closed
simoncoggins opened this issue Oct 3, 2019 · 1 comment · Fixed by #8588
Closed

Refactor radar scales to expose label position data #6549

simoncoggins opened this issue Oct 3, 2019 · 1 comment · Fixed by #8588

Comments

@simoncoggins
Copy link

A common request for the radar chart type is the ability to locate the labels in order to interact (hover, click, etc). For example:

#5344
#3049
https://stackoverflow.com/questions/50470784/make-chart-js-radar-labels-clickable
https://stackoverflow.com/questions/37028924/how-to-add-onclick-event-on-labels-in-chart-js-v2-0

As suggested by @etimberg here a good solution would be for the library to expose label position data via a public API. This would make it possible for event handlers to get the data they need without having to duplicate the internal calculations.

I was able to hack together a solution for what I need by replicating parts of the core code:

https://jsfiddle.net/simoncoggins/7r08uLk9/

But worry about having to maintain it as chartjs moves forward. Therefore I’m considering writing a patch to:

  • Abstract the label positioning logic out of drawPointLabels() into a new method (say calculatePointLabelInfo())
  • Expose the data via a public API.
  • Update drawPointLabels() to use the new method when rendering the labels

The idea would be to provide an object something like this:

pointLabelInfo = [
    {
        labelText {
            x: 10,
            y: 10
            textAlign: ‘left’,
        },
        boundingBox {
            width: 75,
            height: 20,
            top: 200,
            bottom: 220,
            left: 300,
            right: 375,
        }
    }
    // repeat for other labels. Array indexes match scale.pointLabels
]

drawPointLabels() would make use of the labelText, while event handlers would be more likely to be interested in the boundingBox data, but they would be calculated together so consistent with each other.

If accepted it would provide a step towards support for label event handlers, and a similar solution could be applied to other scale types.

Before I start just wanted to check if that patch would be likely to be considered for integration?

@egocarib
Copy link

egocarib commented Jun 1, 2020

Would love to have this general feature for all chart types. Had to hack my own solution to detect click on horizontalBar labels by passing a fake event object to getElementAtEvent() with an altered clientY value.

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

Successfully merging a pull request may close this issue.

2 participants