How to make custom variables go into the tooltip

Question

Hello Support,i have the task to build a tooltip that shows some more properties. Currently i'm struggling wiht how to do that. The screenshot shows what the tooltip in the old version of our page does. The goal for the new page is to rebuild that:As the screenshot shows, the tooltip operates in a "shared" mode where properties about all three datapoints in a colum are shown (as distinguishable by color). Additionally there are two more properties that are computed across the three values. (shown in black text in the bottom row of the tooltip)In the areas for "cost" and "earnings" the price is computed from external factors combined with an additional property of the datapoint which is not to be rendered in the chart itself. To achieve auch a result, i need at least:a custom "data" property on the individual data-entry so i can hold these additional values (like the three values shown in "cost" or the value shown in "Reading")a way to enter data per columna more flexible template where i can access these data propertiesCurrently i cannot find such tools in the Charting on your framework. Do you have a solution available?If not: Is there going to be such a solution sometime until roughly May this year?

Durga Gopalakrishnan · Accepted Answer

Hi Benjamin, We have created sample based on your requirement. We request you to use tooltip template to customize tooltip based on your need and using tooltipRender event, you can access other properties of datasource using its index. Please check with below sample and screenshot. public tooltip: TooltipSettingsModel = { enable: true, template: '' }; public tooltipRender(args : ITooltipRenderEventArgs ): void { args.template = ''; }; Sample : https://stackblitz.com/edit/angular-cdtj1s Please revert us if you have any concerns. Regards, Durga G

Benjamin Fritz · Answer

Hello Support,just as an update:While i submitted this as a rather urgent blocker (i need tooltips to work as specified by mid-year) the urgency has now dissipated:Now i intend to use a workaround using the "pointMove" event and forwarding that to a separate angular component that will then do all the tooltip business.That causes a bit more effort regarding positioning and i need to take care to also detect the mouseLeave events but i feel like it gives me more control than my suggestion form earlier would. Personally i still think that the charts here could benefit from using a similarly powerful templating like MustacheJs has and from having a way to insert custom-data into the datapoints. It's just no longer a burning topic on my end here. :)Best regards

Durga Gopalakrishnan · Answer

Hi Benjamin,

We have analyzed your queries. We suggest you use tooltipRender event to customize the tooltip text based on your requirement. For an example, we have added percent field along with x and y values and in tooltipRender event appended the percent to tooltip text. If you are using tooltip template, you need to pass html elements as string and you can customize its text using args.template argument.

Sample : https://stackblitz.com/edit/angular-mf8gu3
Online Demo : https://ej2.syncfusion.com/angular/demos/#/material/chart/tooltip-template

Please revert us if the provided solution doesn't meet your requirement.

Regards,
Durga G

Benjamin Fritz · Answer

Hi Durga,thanks for the effort but it would only solve my issues if i could use it to have this: 3 timeseries shown as linse in a chart: Population UK, Belgium, Netherlandsa tooltip that shows: each of the three populations and the average GDP per capita (not displayed in the linechart) and some info about the average GDP per capita of teh whole world

(not displayed in the linechart) and the current literacy rate of Luxemburg

(not displayed in the linechart)

That is about the kind of requirement we have here. A simple thing would be to put additional props into the data-point-items and have the tooltip context take it from there. That was my intention with providing a field for "custom data". As that isn't possible we'd need to create an impure function that gets provided to the rendering util repeatedly or something dirty like it. Currently we are investigating whether to take a workaround or to switch to a different framework. Bes