Dateformat with category axis amcharts4

2
votes

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

1
typescriptamcharts
Is that codepen is your code? - Aroon
@Aroon I've updated the codepen example I think I might've made an error when creating the question. - Alex Wells
The dates are coming from json or manually by you? If it is json you should change the dateformat from json file end - Aroon
I could format the date before I send it to amcharts, but my intention was to pass the data and use the dateformatter class to configure the format - Alex Wells

1 Answers

1
votes

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