CODEWITHSUNDEEP
javascriptchartsamcharts
regisls
regisls

Reputation: 529

Dynamic Tooltip Text amChart

I have a Gantt chart made with amCharts and it works fine. As showed below, I set the TooltipText from my ColumnSeries.

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "Load nº: {Load}\nStart: {openDateX}\nEnd: {dateX}\nType: {PartType}";

This part is OK. But now I need dynamically change the TooltipText according to an rule. I read on the documentation about the adapters and i wrote this code.

series1.columns.template.adapter.add('getTooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {data.Load}\nStart: {data.openDateX}\nEnd: {data.dateX}\nType: {data.PartType}";
    else
        return "Start: {data.openDateX}\nEnd: {data.dateX}";
});

But this code is not working. The Tooltip doesn't appear anymore. What I'm doing wrong? Can anyone help me?

Upvotes: 2

Views: 4761

Answers (1)

notacouch
notacouch

Reputation: 3655

Real close!

If you've seen getTooltipText, that was probably for Axis Tooltips.

For your columns, just tooltipText ought to do it, so try this instead:

series1.columns.template.adapter.add('tooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {Load}\nStart: {openDateX}\nEnd: {dateX}\nType: {PartType}";
    else
        return "Start: {openDateX}\nEnd: {dateX}";
});

Also note I didn't nest the data above via data.fieldName, just fieldName. Check out our guide on Data to learn more about how the charts determine where to look for fieldName, i.e. string placeholders.

In the demo below I use this:

series.columns.template.adapter.add('tooltipText', function(text, target) {
    var data = target.tooltipDataItem.dataContext;
    if (data.Load != null )
       return "Load nº: {categoryX}: [bold]{valueY}[/]";
    else
        return "Start: {categoryX}: [bold]{valueY}[/]";
});

Demo:

https://codepen.io/team/amcharts/pen/ea9f73243aed2d62b768ad168a2e1dcc

This works with the Chart Cursor (am4charts.XYCursor), too.

Upvotes: 7

Related Questions