How to format timestamp unix into date in amcharts4

Question

I'm looking to format 1555596901 into a readable date like 2019/04/19 11h52. Here is the code :

am4core.useTheme(am4themes_animated);

function createChart(htmlElement){
  var chart = am4core.create(htmlElement, am4charts.XYChart);
  chart.dateFormatter.dateFormat = "dd/MM/yyyy";

  chart.data = [
    {
      category: "1555596901",
      value1: 1,
      value2: 5,
      value3: 3,
      value4: 3
    },
    {
      category: "1555611301",
      value1: 10,
      value2: 8,
      value3: 6,
      value4: 4
    }
  ];

  chart.cursor = new am4charts.XYCursor();

  chart.colors.step = 2;

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.dateFormatter.dateFormat = "dd/MM/yyyy";

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());  
  valueAxis.min = 0;
  valueAxis.renderer.minWidth = 35;

  var series1 = chart.series.push(new am4charts.ColumnSeries());
  series1.columns.template.width = am4core.percent(80);
  series1.columns.template.tooltipText = "{name}: {valueY.value}";
  series1.name = "Series 1";
  series1.dataFields.categoryX = "category";
  series1.dataFields.valueY = "value1";
  series1.stacked = true;
  series1.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series2 = chart.series.push(new am4charts.ColumnSeries());
  series2.columns.template.width = am4core.percent(80);
  series2.columns.template.tooltipText = "{name}: {valueY.value}";
  series2.name = "Series 2";
  series2.dataFields.categoryX = "category";
  series2.dataFields.valueY = "value2";
  series2.stacked = true;
  series2.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series3 = chart.series.push(new am4charts.ColumnSeries());
  series3.columns.template.width = am4core.percent(80);
  series3.columns.template.tooltipText = "{name}: {valueY.value}";
  series3.name = "Series 3";
  series3.dataFields.categoryX = "category";
  series3.dataFields.valueY = "value3";
  series3.stacked = true;
  series3.dateFormatter.dateFormat = "dd/MM/yyyy";

  var series4 = chart.series.push(new am4charts.ColumnSeries());
  series4.columns.template.width = am4core.percent(80);
  series4.columns.template.tooltipText = "{name}: {valueY.value}";
  series4.name = "Series 4";
  series4.dataFields.categoryX = "category";
  series4.dataFields.valueY = "value4";
  series4.stacked = true;
  series4.dateFormatter.dateFormat = "dd/MM/yyyy";
  
  return chart;
}

let chart1 = createChart("chartdiv");

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

As you can see it doesn't format the timestamp. I saw in the doc I need to use chart.dateFormatter.dateFormat = "dd/MM/yyyy"; for formatting.

Answer 1

You can format the unix timestamp to JavaScript Date object by doing this.

const date1 = new Date(1555596901 * 1000);
console.log(date1);

Then, you can format it to dd/mm/yyyy by doing this;

    
const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    } 
    if (month < 10) {
      month = '0' + month;
    } 
    const formattedDate = `${day}/${month}/${year}`
    return formattedDate;
}

//formatDate(1555596901);
console.log(formatDate(1555596901));

And now, on your original code, you simply need to add the formatDate function stated above, and then map it over your chart.data as shown below.

chart.data = [
    {
      category: "1555596901",
      value1: 1,
      value2: 5,
      value3: 3,
      value4: 3
    },
    {
      category: "1555611301",
      value1: 10,
      value2: 8,
      value3: 6,
      value4: 4
    }
  ];

const formatDate = inputDate => {
    const date1 = new Date(inputDate * 1000);

    let day = date1.getDate();
    let month = date1.getMonth() + 1;
    const year = date1.getFullYear();
    if (day < 10) {
      day = '0' + dd;
    } 
    if (month < 10) {
      month = '0' + month;
    } 
    const formattedDate = `${day}/${month}/${year}`
    return formattedDate;
}

chart.data = chart.data.map(element => {
  element.category = formatDate(element.category)
  return element;
});

console.log(chart.data)