Changing dateformat in stockcharts from amchart

Question

I created a stockchart from amchart and saved it here: jsfiddle

Now I want to change (a) the date format of the chart cursor to "DD.MM.YYYY" and (b) the date format of the category axis to german format, e.g. "01. Mai 2018". I assume that (a) can somehow be solved with "categoryBalloonDateFormat", but I wasn't able to find the correct place to put it.

chart.ChartCursor.categoryBalloonDateFormat = "DD.MM.YYYY";

Unfortunately this doesn't work.

For (b) I have no clue at all.

Answer 1

For (a) you have to set it in the chartCursorSettings.categoryBalloonDateFormats array for the desired period(s) represented in your chart. If your data is daily, at least set the DD and WW periods (daily and weekly), but depending on the amount of data, you might want to set the MM (monthly) period as well. For example:

chart.chartCursorSettings.categoryBalloonDateFormats = [
  {period:"YYYY", format:"YYYY"},
  {period:"MM", format:"MMM, YYYY"},
  {period:"WW", format:"DD.MM.YYYY"},
  {period:"DD", format:"DD.MM.YYYY"}, 
  {period:"hh", format:"JJ:NN"},
  {period:"mm", format:"JJ:NN"},
  {period:"ss", format:"JJ:NN:SS"},
  {period:"fff", format:"JJ:NN:SS"}
]

Similarly for (b), you have to set the categoryAxesSettings.dateFormats array in the same manner as categoryBalloonDateFormats:

chart.categoryAxesSettings.dateFormats = [
  {period:"YYYY", format:"YYYY"},
  {period:"MM", format:"MMM, YYYY"},
  {period:"WW", format:"DD.MM.YYYY"},
  {period:"DD", format:"DD.MM.YYYY"}, 
  {period:"hh", format:"JJ:NN"},
  {period:"mm", format:"JJ:NN"},
  {period:"ss", format:"JJ:NN:SS"},
  {period:"fff", format:"JJ:NN:SS"}
]

Demo:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",

  "categoryAxesSettings": {
    "dateFormats": [{
        period: "YYYY",
        format: "YYYY"
      },
      {
        period: "MM",
        format: "DD.MM.YYYY"
      },
      {
        period: "WW",
        format: "DD.MM.YYYY"
      },
      {
        period: "DD",
        format: "DD.MM.YYYY"
      },
      {
        period: "hh",
        format: "JJ:NN"
      },
      {
        period: "mm",
        format: "JJ:NN"
      },
      {
        period: "ss",
        format: "JJ:NN:SS"
      },
      {
        period: "fff",
        format: "JJ:NN:SS"
      }
    ]
  },

  "chartCursorSettings": {
    "categoryBalloonDateFormats": [{
        period: "YYYY",
        format: "YYYY"
      },
      {
        period: "MM",
        format: "DD.MM.YYYY"
      },
      {
        period: "WW",
        format: "DD.MM.YYYY"
      },
      {
        period: "DD",
        format: "DD.MM.YYYY"
      },
      {
        period: "hh",
        format: "JJ:NN"
      },
      {
        period: "mm",
        format: "JJ:NN"
      },
      {
        period: "ss",
        format: "JJ:NN:SS"
      },
      {
        period: "fff",
        format: "JJ:NN:SS"
      }
    ],
    "valueBalloonsEnabled": true
  },

  "dataSets": [{
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],

    "dataProvider": generateChartData(),
    "categoryField": "date"
  }],

  "panels": [{
    "stockGraphs": [{
      "valueField": "value",
      "type": "smoothedLine"
    }]
  }]
});


function generateChartData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 1000);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 30; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(i);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i;

    chartData.push({
      date: newDate,
      value: a
    });
  }
  return chartData;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>