Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Time Series

This section covers how to chart time series data using Integrated Charts.

Integrated Charts supports the charting of time series data using line and area charts when a time axis is chosen instead of a category or numeric axis.

Time vs Category Axis

A Time Axis is used to plot continuous date / time values, whereas a Category Axis is used to plot discrete values or categories.

The example below highlights the differences between time and category axes. Notice that the time axis contains all days for the range of values provided, whereas the category axis only shows axis labels for the discrete values provide.

Time Axis Configuration

Columns that contain date object values will be automatically plotted using a Time Axis unless it has been explicitly changed through the chartDataType column definition property.

Numeric timestamps in a unix format are also allowed, but the column should be explicitly configured to use a time axis via chartDataType='time' on the column definition.

The following snippet shows how different time series values can be configured to enable a time axis:

const rowData = [
        someDate: new Date(2019, 0, 1), // date object
        someTimestamp: 1167609600000, // numeric timestamp (unix format)
    // ... more rows

<AgGridReact rowData={rowData}>
    {/* date objects are treated as time by default */}
    <AgGridColumn field="someDate" />
    <AgGridColumn field="someTimestamp" chartDataType="time" />

Notice that no configuration is necessary for date objects but numeric timestamps and calendar date string require that chartDataType='time' is set on the column definitions.

The following example demonstrates how a column containing numeric timestamps can be configured to use a time axis using the chartDataType='time' property on the 'timestamp' column definition:

Next Up

Continue to the next section to learn about: Chart Events.