Amcharts: How to pass title in balloonFunction?

Question

I want to format the data before passing it would be shown as a tooltip. For this purpose I use balloonFunction and compareGraphBalloonFunction

        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender,
            // This is works
            //"balloonText": [[title]]
            //"compareGraphBalloonText": [[title]]
          }]

But when I send a title as a parameter to my ballonRender function I can't find the property that shows the name of my graph among title object.

  ballonRender(title) {
    let sign = (title["percents"]["value"]>0) ? "+" : "-";
    let values = (title["values"]["value"]).toFixed(4)
    let percentage =  (title["percents"]["value"]).toFixed(2)
    let newTitle = 'Product <b>%s</b> (%s %s%)'.format(values, sign, percentage)
    return newTitle
  },

If I print title inside my ballonRender function I observe the following object.

category : Mon Oct 02 2017 00:00:00 GMT+0800 (Гонконг, стандартное время) {}
dataContext : amCategoryIdField: "1506873600000"
dataContext : {__ob__: Observer}
date : Mon Oct 02 2017 08:00:00 GMT+0800 (Гонконг, стандартное время) {}
rawData : (5) [{…}, {…}, {…}, {…}, {…}]
valueAbsHigh : 1.0477245421
valueAverage : 1.04665801056
valueClose : 1.0466455011
valueCount : 5
valueHigh : 1.0477245421
valueLow : 1.0451341501
valueOpen : 1.0451341501
valueSum : 5.2332900528
graph : {id: "g1", valueField: "value", comparable: true, compareField: "value", balloonFunction: ƒ, …}
index : 40
isNegative : false
percents : {value: 4.664550109999993, percents: 23.826681846132807, total: 339.27455273}
serialDataItem : {dataContext: {…}, category: Mon Oct 02 2017 00:00:00 GMT+0800 (Гонконг, стандартное время), time: 1506873600000, axes: {…}, x: {…}}
values : {value: 1.0466455011, percents: 23.826681846132807, total: 4.3927455273}
x : 608
y : 359.7633884380001

I can't understand why [[title]] in balloonText works fine, but when I pass this parameter to the function I can't retrieve the graphs title.

Also I'm a bit confused about input parameters in ballonFunction in general. It wound be nice if you share a resource with explanation and best-practicies.

Answer 1

The title comes from the graph object itself. In the stock chart's case, the graph inherits the title from the dataSet, but the same property is populated. All you have to do is access the graph object that is passed as a second parameter to the balloonFunction, which you don't have in your function currently, to get the title data:

    "balloonFunction": function(graphDataItem, graph) {  
      return "<u>" + graph.title + "</u>: <b>" + graphDataItem.values.value + "</b>";
    },
    "compareGraphBalloonFunction": function(graphDataItem, graph) {  
      return "<u>" + graph.title + "</u>: <b>" + graphDataItem.values.value + "</b>";
    }

Demo