Search code examples
angulardatetime-formatamcharts4

12 hour time format in export(CSV, XLSX) using amchart 4 and angular


I am using amcharts 4 in angular for displaying graph, and i want to export graph data in CSV and XLSX with inbuilt export functionality of amcharts 4.

In that, i am not able to format date column in 12 hour format with AM/PM in exported CSV/XLSX file, following is the code i am trying:

  chart.exporting.menu = new am4core.ExportMenu();
  chart.exporting.menu.verticalAlign = 'bottom';
  chart.exporting.menu.items = [{
    label: '...',
    menu: [
      { type: 'csv', label: 'CSV' },
      { type: 'xlsx', label: 'XLSX' }
    ]
  }];

  chart.exporting.dataFields = exportColumnNames;
  // dateAxis.dateFormats.setKey("hour", "h a");
  // dateAxis.periodChangeDateFormats.setKey("hour", "h a");
  chart.exporting.dateFields.push('Date');
  chart.exporting.dateFormat = 'MM-d-YYYY h:m:s a';

When export using above code, exported file shows date in 24 hour time format.

I also used adapter to change date format as follows:

  chart.exporting.adapter.add('data', (data) => {
    data.data.map(signalObj => {
      signalObj.Date = moment(new Date(signalObj.Date)).format('YYYY-MM-DD hh:mm A');
      return signalObj;
    });
    console.log(data)   // this shows date in 12 hour format with AM/PM
    return data;
  });

With above code also i am getting date in 24 hour time format.

Please let me know what should be the solution for above problem.


Solution

  • Actually "Date" field is in string format, so we need to give input date format as follows:

    chart.dateFormatter.inputDateFormat = 'yyyy-MM-ddTHH:mm:ss';

    And it worked...