How can I prevent amChart line chart from auto grouping data?

Question

I'm working with amChart 4 on Angular 8.0.1. The problem is that it auto groups data and give a vertical line representing the range of that day, instead of drawing out each point and show the trends. The latter is what I expect.

What I get:

What I expected:

I've commented all additional settings and keep only the essential codes:

ngAfterViewInit() {
  this.ngZone.runOutsideAngular(() => {
    this.chart = am4core.create(this.chartElement.nativeElement, XYChart);
    const dateAxis = this.chart.xAxes.push(new DateAxis());
    const valueAxis = this.chart.yAxes.push(new ValueAxis());
    const series = this.chart.series.push(new LineSeries());
    series.dataFields.dateX = this.dateField; // dateField = 'DATE_TIME'
    series.dataFields.valueY = this.valueField; // valueField = 'ALL'
    
    if (this.pending && this.pending.length) {
      this.chart.data = pending;
      this.pending = [];
    }
  });
}

ngOnInit() {
  this.data$.subscribe(data => {
    if (this.chart) {
      this.chart.data = data;
    } else {
      this.pending = data;
    }
  });
}

While my data is an array with about 15K points, format as below:

[
  {
    "DATE_TIME": "2020-03-13T07:04:34.410Z",
    "ALL": 4335
  },
  {
    "DATE_TIME": "2020-03-13T07:05:46.900Z",
    "ALL": 4332
  },
  {
    "DATE_TIME": "2020-03-13T07:06:58.720Z",
    "ALL": 4344
  },
  // ...
  {
    "DATE_TIME": "2020-03-25T17:53:08.720Z",
    "ALL": 5606.59
  },
  {
    "DATE_TIME": "2020-03-25T17:54:20.870Z",
    "ALL": 5575.9400000000005
  }
]

What I guess is that, the data is too large so amCharts automatically group data by date. But is there anyway that I can cancel this default setting?

score 1 · Accepted Answer · answered Mar 28 '20 at 04:13

For date-based charts, AmCharts assumes daily data (yyyy-MM-dd), which explains why your chart looks that way. Since your data has an accompanying timestamp (ISO8601), you need to modify the inputDateFormat to tell the chart to also parse out the time component. AmCharts provides a special i format code to automatically parse ISO dates:

chart.dateFormatter.inputDateFormat = 'i';

You can find more format codes here

You'll also want to specify a baseInterval on your date axis to match the granularity of your date data so the chart can draw the series and axis correctly.

dateAxis.baseInterval = {
  timeUnit: "minute",
  count: 1
};

How can I prevent amChart line chart from auto grouping data?

1 Answers1