Amcharts multiple tooltips (ballon) on one chart in compare mode

Question

I have 4 stock graphs that I want to compare. When I tried to set a ballon properties for them I always get some redundant one.

My first idea was to specify only one StockGraph But I get one extra object.

 let chart = window.AmCharts.makeChart("chartdiv", {
          "path": AmCharts_path,
          "type": "stock",
          "theme": "light",

          "dataSets": portfolioData.map(function (port) {
            return {
              "title": port.name,
              "fieldMappings": [{
                "fromField": "value",
                "toField": "value"
              }],
              "dataProvider": port.data,
              "compared": true,
              "categoryField": "date"
            }
          }),

          "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,
            "stockGraphs": [
              {
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "Smart Gloabal A-[[title]]:<b>[[value]]</b>",
              }
             ]
          }],

          "chartScrollbarSettings": {
            "graph": "g1"
          },

          "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
          },

          "listeners": [{
            "event": "zoomed",
            "method": this.calulateMetrics
          }],

Then I decided to remove ballonText property. But still this extra object exist.

        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            //"balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
         ]

Then I decided to describe logic for every graph, but this only increased number of my of my objects.

        "stockGraphs": portfolioData.map(function (port, idx) {
          return {
           "id": "g"+(idx+1),
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
        }),

I tried to follow examples fros the official website but didn't find relevant one.

Answer 1

The extra balloon in your first screenshot comes from your first dataSet object. The first dataSet is visible by default so it does not need compared set to true; setting it to true will duplicate the balloon from the first dataSet (you can see the first dataSet repeat itself in the legend if it is enabled). You can fix this by tweaking your map call slightly:

      "dataSets": portfolioData.map(function (port, idx) {
        return {
          "title": port.name,
          "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
          }],
          "dataProvider": port.data,
          "compared": (idx === 0 ? false : true), //don't compare the first dataSet
          "categoryField": "date"
        }
      }),