Search code examples
javascriptamchartsamcharts4

amCharts dateAxis displays only time and not date


chart data date is the following example format: 5/17/19 18:00

However, the chart only shows time on the date axis like: 18:00

I wish to be able to show the complete date with time, same as the way it is in the data object.

i tried setting input date format, and chart date format. didnt help.

here is the working code: https://codepen.io/pthakkar/pen/dEzOJo

chart.dateFormatter.dateFormat = "M/dd/yy H:mm";
chart.dateFormatter.inputDateFormat = "M/dd/yy H:mm";
  1. Hoping to show full date on chart.

Additional minor issues unable to fix:

  1. Click and drag does not result into zoom, it only selects / highlights the area. Wish to achieve zoom.

Solution

  • Your charts baseInterval is hour so you should set the date format for hour key (docs):

    categoryAxis.dateFormats.setKey("hour", "M/dd/yy H:mm");
    

    Maybe you want to set the format for other keys. Therefore take a look at the previously linked docs.

    The inputDateFormat is only for reading the data.

    For zooming you have set your cursor behavior to this:

    chart.cursor.behavior = "selectX";
    

    You should just remove that line or set it to zoomX (docs):

    chart.cursor.behavior = "zoomX";
    

    Alternatively you can use zoomY or zoomXY.

    Here I forked your code pen and updated it.