Search code examples
javascriptanychart

Anychart does not display dates and times on x axis when data is spaced at hourly intervals

There are plenty of Anychart HTML examples available for download of line charts with a date-time x axis. All the examples I've seen have data spaced at intervals of weeks or months. When I modify the sample code such that the data spans only a few hours, nothing is printed on the x axis.

For instance, I've downloaded the example at https://playground.anychart.com/docs/v8/samples/AGST_DateTime_Axes_02, which uses the following data:

  var series = chart.line([
    {value: 1.172, x: Date.UTC(2003, 09, 14)},
    {value: 1.916, x: Date.UTC(2004, 09, 13)},
    {value: 5.57, x: Date.UTC(2005, 09, 13)},
    {value: 15.0, x: Date.UTC(2006, 09, 13)},
    {value: 144, x: Date.UTC(2007, 09, 13)}
  ]);

This works fine for me, with Jan 2004, Jul 2004 etc displayed on the x axis.

However, when I change this data to the following:

  var series = chart.line([
    {value: 1.172, x: Date.UTC(2003, 09, 13, 9, 40, 0)},
    {value: 1.916, x: Date.UTC(2003, 09, 13, 10, 41, 0)},
    {value: 5.57, x: Date.UTC(2003, 09, 13, 11, 41, 0)},
    {value: 15.0, x: Date.UTC(2003, 09, 13, 12, 40, 0)},
    {value: 144, x: Date.UTC(2003, 09, 13, 13, 39, 0)}
  ]);

The chart is displayed, but nothing is displayed on the x axis.

Solution

  • It's a kind of misconfiguration. In the sample you mentioned, line 18 is the following: dateTimeTicks.interval(0, 6); It means to show ticks every 6 hours on the xAxis. But in your second case, the whole range of data is less than 6 hours (between 9 and 13 hours), so that's why you see no ticks. To avoid it, just remove that line or adjust intervals according to your data range. Here is the result. You can learn more about this function in the API Reference.