Search code examples
angulardatetimetimeanychart

Anychart - Stock - Problem with correct date display


I have a problem with a correct date time display using AnyChart (stock chart) in Angular.

Sometimes AnyChart displays time correct, but sometimes it's not - I can not understand what it depends on.

The wrong format of datetime is '05 28 Mar 2019' and with the same code is 28 Mar 2019, 05:00

I'v already tried to use date with a time as a string, as a Date and as a Timestamp.

Sometimes it is ok with a tick size less than 500. Sometimes it doesn't work even with a couple ticks.

Sometimes it works when I zoom in a chart.

Code example:

draw(tickData: TickData, tickForChart: any[], container: ElementRef) {
  const table = AnyCharts.data.table();
  table.addData(tickForChart);

  const mapping = table.mapAs({
    x: 0,
    open: 1,
    high: 2,
    low: 3,
    close: 4
  });

  const chart = AnyCharts.stock();

  const prices = chart.plot(0).candlestick(mapping);
  prices.name(tickData.market.marketName);
  prices.risingStroke('#3ba158');
  prices.risingFill('#3ba158');
  prices.fallingStroke('#fa1a20');
  prices.fallingFill('#fa0f16');

  chart.plot(0).xGrid().enabled(true);
  chart.plot(0).yGrid().enabled(true);
  chart.plot(0).yGrid().stroke("#dee2e6");

  chart.title(this.getMarketName(tickData));
  chart.container(container.nativeElement);
  chart.scroller(true);
  chart.draw();
  container.nativeElement.style.height = '600px';
  return chart;
}

Did anyone have the same problem? How can I fix it?

Also, I attached image with wrong formatting.

wrong formatting

And with correct:

Correct formatting

Like example it works good with data:

['2019-03-28T05:00:00', 511.53, 514.98, 505.79, 506.40],
['2019-03-28T05:30:00', 512.53, 514.88, 505.69, 510.34],
['2019-03-28T06:00:00', 511.83, 514.98, 505.59, 507.23],
['2019-03-28T06:30:00', 511.22, 515.30, 505.49, 506.47],
...

but failed with data:

 ['2015-12-24T08:13:00', 511.53, 514.98, 505.79, 506.40],
 ['2015-12-24T09:13:00', 512.53, 514.88, 505.69, 510.34],
 ['2015-12-24T10:13:00', 511.83, 514.98, 505.59, 507.23],
 ['2015-12-24T11:13:00', 511.22, 515.30, 505.49, 506.47]
 ...

Solution

  • It happens because you set the dates in different formats. If you want to show not only a date but also time you should make all the x values have hours, minutes, etc. Please check this sample.