Amchart:multipanel horizon chart (Cubism chart) is not producing time on tool tip as balloon text

Question

Im not getting x axis value (time) on tooltip as ballon text on mouse hover in Amchart horizon chart with multiple panels. I need x axis time on tool tip on mouse over. Please find more on: https://www.amcharts.com/demos/multi-panel-horizon-chart/

function buildPanel(dim) {
    return {       
        "valueAxes": [{
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left",
            "gridCount": 2,
            "labelsEnabled": false,
            "labelFrequency": 1,
            "strictMinMax": true,
            "minimum": 0,
            "maximum": 2
        }, {
            "id": "actual",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left",
            "gridCount": 2,
            "labelsEnabled": false
        }],       
        "showCategoryAxis": true,
        "stockGraphs": [{
            "id": "pos_band1" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_1d",
            "fillAlphas": 0,
            "useDataSetColors": false,
            "visibleInLegend": false,
            "balloonText" :"Test Vale" // show Ballon Text
        }, {
            "fillAlphas": 1,
            "lineColor": "#c6dbef",
            "fillToGraph": "pos_band1" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_1u" + dim,
            "type": "step",
            "theme": "light",
            "useDataSetColors": false,
            "visibleInLegend": false
        }, {
            "id": "pos_band2" + dim,
            "lineAlpha": 0,
            "showBalloon": false,
            "valueField": "pos_2d",
            "fillAlphas": 0,
            "useDataSetColors": false,
            "visibleInLegend": false
        }]
    };
}

Can anyone please help me.

Answer 1

In your particular snippet you have to set showBalloon to true, but you might get the raw band value rather than the final value if you replace your balloonText to [[value]] will show you the balloon of the raw band value rather than the final value, which might not be what you want. Also note that [[category]] will get you the date/time.

If you want to modify the balloons in the demo you linked, you have to modify the balloonText as mentioned or create a balloonFunction if you want to fine-tune the date formatting using AmCharts.formatDate in the last two stockGraphs:

function buildPanel(dim) {
  return {
    // ..
    stockGraphs: [
      // bands omitted
     {
      "fillAlphas": 0,
      "lineAlpha": 0,
      "lineColor": "#eee",
      "showBalloonAt": "open",
      "balloonFunction": function(graphDataItem) { 
        return graphDataItem.values.value + "<br>" +
          AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
      },
      "valueField": "val" + dim,
      "openField": "mid",
      "type": "smoothedLine",
      "useDataSetColors": false,
      "visibleInLegend": false
    }, {
      "lineAlpha": 1,
      "lineColor": "#2171b5",
      "lineThickness": 2,
      //"showBalloonAt": "open", //remove from actual graph as it does not have an open value
      "balloonFunction": function(graphDataItem) { 
        return graphDataItem.values.value + "<br>" +
          AmCharts.formatDate(graphDataItem.category, "YYYY-MM-DD JJ:NN:SS");
      },
      "valueField": "actual" + dim,
      "type": "smoothedLine",
      "useDataSetColors": false,
      "visibleInLegend": false,
      "valueAxis": "actual"
    } ]
  }
}

Here's a demo