Search code examples
datedatetimeamchartsamcharts4

How to get date format M/d/yyyy in graph using amcharts4?

I'm strugling with date format represented in X axis using amcharts4... I use timestamp miliseconds date time and in chart I want to represent date in format M/d/yyyy

This is my code:

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "value": 6557,
    "date":1601251200000 ,
}, {
  "value": 65,
    "date":  1603065600000,
}];

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

// Set date label formatting
dateAxis.dateFormats.setKey("day", "M/d/yyyy");
dateAxis.renderer.minGridDistance = 0;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "date";
        series.name = "test";
        series.dataFields.valueY = "value";
series.tooltip.getFillFromObject = true;
        series.tooltip.getStrokeFromObject = true;
        series.fillOpacity = 0.7;
        series.fill = am4core.color("#54A3CD");
        series.defaultState.transitionDuration = 1000;
        series.stacked = true;

What I get is only date in format month day like this enter image description here

What am I doing wrong here? Why there is no year shown on graph?

Thanks for help

Solution

  • The chart is using a week interval to display its axis due to the interval between your two datapoints. Since it's displaying weekly labels, you'll need to set your format on week as well:

    dateAxis.dateFormats.setKey("week", "M/d/yyyy");