Search code examples
typescriptamcharts

Dateformat with category axis amcharts4

The dateformat property is not working in amcharts4.

I understand that the dateformat is inherited from the parent element, I've tried setting the dateformat at a chart level, axis level, and series level.

 chart.dateFormatter.dateFormat = "dd/MM/yyyy";

Please see codepen below:

https://codepen.io/alex-wells/pen/vQmWBz

Solution

  • Quote from @martynasma on github

    You are using CategoryAxis. This axis treats all of the categories as text, hence no formatting applied.

    If you need proper date axis, you need to use DateAxis, as well as use dateX for series' dataFields:

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

    ....

    series1.dataFields.dateX = "category";
series1.dataFields.valueY = "value1";

    Now, setting format for the DateAxis is not as straightforward as setting dateFormat. This axis type have multiple levels of granularity, so you need to set for your target one. In your case it's a day.

    dateAxis.dateFormats.setKey("day", "dd/MM/yyyy");
dateAxis.periodChangeDateFormats.setKey("day", "dd/MM/yyyy");

    More info:

    https://www.amcharts.com/docs/v4/reference/dateaxis/#dateFormats_property https://www.amcharts.com/docs/v4/reference/dateaxis/#periodChangeDateFormats_property

    And here's your pen updated as per above:

    https://codepen.io/team/amcharts/pen/pQPQdN?editors=0010