Amcharts: category data is not shown while changing the cursor

Question

In an Amstock examples (1,2) I saw that the category field block is enabled during moving a cursor.

However I didn't manage to replicate this logic in my project

My chartCursorSettings are following

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

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

      "panels": [{
        "showCategoryAxis": false,
        "title": "Value",
        "percentHeight": 70,
        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender
          }]
      }],

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

      "categoryAxis": {
        "parseDates": true
      },

      "balloon": {
          "fixedPosition": true,
          "maxWidth": 10000
      },

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "categoryBalloonEnabled": true,
        "categoryBalloonAlpha": 0.2,
        "bulletsEnabled": true,
        "bulletSize": 10,
        "categoryBalloonDateFormats": [
            {period:'fff',format:'JJ:NN:SS'},
            {period:'ss',format:'JJ:NN:SS'},
            {period:'mm',format:'JJ:NN'},
            {period:'hh',format:'JJ:NN'},
            {period:'DD',format:'MMM DD'},
            {period:'WW',format:'MMM DD'},
            {period:'MM',format:'MMM'},
            {period:'YYYY',format:'YYYY'}
          ]
      },

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

      "periodSelector": {
        "position": "bottom",
        "periods": [{
          "period": "MM",
          "count": 1,
          "label": "1 month"
        }, {
          "period": "MM",
          "count": 3,
          "label": "3 month"
        }, {
          "period": "MM",
          "count": 6,
          "label": "6 month"
        }, {
          "period": "YYYY",
          "count": 1,
          "label": "1 year"
        }, {
          "period": "YTD",
          "label": "YTD"
        }, {
          "period": "MAX",
          "selected": true,
          "label": "All"
        }]
      },
    });
  },

Also I set parseDates to true

"categoryAxis": {
  "parseDates": true
},

I tried to specify the "dataDateFormat": "YYYY-MM-DD" but it didn't help me either.

How can I enable this field?

I pass the JavaScript Date object to category field.

Answer 1

The categoryBalloon from the chartCursor requires that the categoryAxis be visible. Setting showCategoryAxis: false in your panel effectively removes the balloon since you're removing the category axis.

If you don't want the categoryAxis labels but want the category balloon, set labelsEnabled to false in your categoryAxesSettings.

AmCharts.makeChart("...", {
  // ...
  panels: [{
    //showCategoryAxis: false, //comment/remove this
    // ...
  }],
  // ...
  categoryAxesSettings: {
    labelsEnabled: false //if you want to remove the axis labels but keep the balloon
  },
  // ...
});

Demo

Some helpful clarifications:

• categoryAxis doesn't do anything at the top level of the stock chart and all stock charts has parseDates enabled by default. categoryAxesSettings is the equivalent in this case.

• dateDateFormat tells AmCharts how to parse your string-based dates in your dataProvider. Since you're using Date objects, this doesn't do anything.