Ngx-charts: Feature Request: Allow adding % to tooltips

[jclancy93]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Expected behavior
I have formatted my data to be in the form of % insteazd of absolute values. It would be nice if all charts had an @Input() percentage : boolean. It would default to false but if made True, it would add a % following the value on the tooltip.

What is the motivation / use case for changing the behavior?
Many people like to use relative numbers instead of absolute numbers, I think it would it would be a valuable feature for myself and other users.

I would submit a pull request, but I cannot find where the templates for the tooltips are defined. If someone would kindly point out where they are, I would gladly have a go at implementing this.

[JoshSchoen]

I am also look for % along with $. Working with https://github.com/Teradata/covalent and need to be able to display formatted values in tool tips. Happy to jump in and help as well.

[amcdnl]

What about a custom formatter?

[Hypercubed]

Which chart? In heat-maps we added a tooltipText input (https://github.com/swimlane/ngx-charts/blob/master/src/heat-map/heat-map.component.ts#L79) that can serve this purpose. See the calendar demo for example: https://github.com/swimlane/ngx-charts/blob/master/demo/app.component.ts#L410

[JoshSchoen]

Ideally it would be across all charts as you could show $ or % in most any of the available charts. The big ones currently are pie chart, stacked vertical and horizontal bar for our current use case. But I could see trend line charts as well in the immediate future. I like the idea of a custom formatter but not sure what that means exactly. For both % and $ I think it is also worth noting that the input value should be defined as a decimal for rounding and conversion to a % value or set an expectation that the values from the data are in a format where all that needs to happen is a prepend of $ or append a %. The latter of the two might be a simpler implementation but not as flexible and probably not great for different currencies . There has also been some thoughts around adding text for annotations and threshold type formatting in tooltips but that is probably a different issue. Please let me know how I can help, happy to pitch in here.

Side note, really enjoying working with NGX charts some really great work!

[jclancy93]

@Hypercubed yea @JoshSchoen hit the nail on the head here pretty much. Our two biggest needs are in the pie charts and horizontal bar charts. It would be great if there was some way to add special characters into the tooltips as needed by the data. The more flexibility the better as this would allow for more clarity in the graphs. Perhaps an @Input() unit : string that could allow for any sort of special text in the tooltips？

[Hypercubed]

We hope to implement tooltipText across all charts. That's a great first step. As I implemented it in the heat map the tooltipText input is a function. We might also allow it to accept some sort of string description. For example a d3.format specifier.

[Hypercubed]

@jclancy93 any reason this can't be done with tooltipText?

[marjan-georgiev]

We should allow passing templateRefs for tooltips, not just format functions. Tooltips need to be completely customizable. The example with the heatmap that we have now does the job, but templates are a better approach in this case IMO.

Also, there is already an issue for this: https://github.com/swimlane/ngx-charts/issues/65

[JoshSchoen]

Love the completely customizable addition. Is there a timeframe and a release targeted for adding the templateRef?

[jclancy93]

@Hypercubed im cool with using tooltipText, I have never used your heat maps before so wasn't aware of this functionality! However, I do agree that allowing templateRefs for tooltips would be the most helpful, as it would give the highest degree of control over the tooltips

[jclancy93]

@Hypercubed so I'm struggling to work out how to use tooltipText for pie charts since its not one of the supported Inputs. Can anyone point me in the right direction?

[Hypercubed]

@jclancy Sorry, tooltipText is currently only implemented in the heat-map.

[jclancy93]

@Hypercubed thats what I thought, do you have a timeframe or some advice for anyone trying to implement this type of functionality on pie charts? Thanks for your help 👍

[Hypercubed]

In progress: see #331

[tstock55]

@Hypercubed Is there something in progress for adding tooltipText to line charts? I might be able to help. Our x-values are in Unix time and we convert this locale time in the xTick function, but need to be able to format this value in the tooltip as well

[Hypercubed]

I've been adding such features as needed. If you are able to do a PR for line-charts that would be great!

[JoshSchoen]

@Hypercubed I'm sure you guys have a lot of other Priorities but wondering when #369 might be reviewed? Appreciate any info you have on this.

[marjan-georgiev]

This was implemented in https://github.com/swimlane/ngx-charts/pull/399.