Extra ballons in compare mode

[daniilc-magnumwm]

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

My first idea was to specify only one StockGraph object but this lead to one extra ballon 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.

[amcharts]

New comment from Zendesk by Anthony Piris on ticket 38349. (replying here will automatically notify amCharts support agent)

Hi there,

I responded to your stackoverflow question here but here it is reposted for your convenience:

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"
            }
          }),

I hope this helps.

Best,

Anthony Piris amCharts

[daniilc-magnumwm]

@amcharts Thank you for a quick response.

[amcharts]

New comment from Zendesk by Anthony Piris on ticket 38349. (replying here will automatically notify amCharts support agent)

You're welcome.

Best,

Anthony Piris amCharts