Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Sparklines - Axis Types

This section compares the different horizontal axis types that are available to all sparklines.

In order to select an appropriate sparkline axis type, it is important to consider the data the sparkline is displaying. This ensures that X values are scaled correctly along the x-axis.

The following axis types are available to all sparklines:

  • Category Axis - data points are evenly spread along the x-axis.
  • Number Axis - data is spaced based on the magnitude of the X values.
  • Time Axis - data is spaced according to the time between data points.

The Y values supplied in the sparkline data will always be plotted using the Number Axis on a continuous scale.

Here's an illustration showing how sparklines can look visually different when different axis types are configured.

Time axis
Time Axis
Category axis
Category Axis
  • Note that the same data is used for both sparklines.
  • On the left, X values are plotted using a Time Axis, whereas on the right, X values are plotted using a Category Axis.

Category Axis

The Category Axis is the default x-axis. X values will be plotted on a band scale which means the data points will be evenly spaced out along the horizontal axis making it ideal for small datasets with discrete values or categories.

The Category Axis is configured through the SparklineAxisOptions as follows:

const rateOfChangeCellRendererParams = {
    sparklineOptions: {
        axis: {
            // use Category Axis (Optional)
            type: 'category'
        }
    }
};

<AgGridReact>
    <AgGridColumn field="rateOfChange" cellRenderer="agSparklineCellRenderer" cellRendererParams={rateOfChangeCellRendererParams} />
</AgGridReact>

In the snippet above, the x-axis type is set to 'category' but this is optional as the x-axis uses the 'category' axis by default.

The example below demonstrates the Category Axis used in an Area Sparkline. Note the following:

  • The rateOfChange column is mapped to data containing an Array of Tuples of type [string, number][].
  • The string X values are evenly spaced across the x-axis using a fixed width between each data point.
  • The string X values are included in the tooltip title.

Number Axis

The Number Axis is used as a value axis. When the Number Axis is used, the horizontal distance between the data points depends on the magnitude of the X values. X values must be number values as they are plotted on a continuous scale with numeric intervals.

The Number Axis is configured through the SparklineAxisOptions as follows:

const historyCellRendererParams = {
    sparklineOptions: {
        axis: {
            // use Number Axis
            type: 'number'
        }
    }
};

<AgGridReact>
    <AgGridColumn field="history" cellRenderer="agSparklineCellRenderer" cellRendererParams={historyCellRendererParams} />
</AgGridReact>

In the snippet above, the x-axis type is set to 'number' to select a Number Axis instead of the default Category Axis.

The example below demonstrates the Number Axis used in an Area Sparkline. Note the following:

  • The rateOfChange column is mapped to data containing an Array of Tuples of type [number, number][].
  • The numeric X values are placed and spread along the x-axis based on the magnitude of the value.
  • The numeric X values are included in the tooltip title.

Time Axis

The Time Axis is similar to the Number Axis in the sense that it is also used to plot continuous values. X values can be number or Date objects, where number values are interpreted as timestamps derived from Unix time.

The Time Axis is configured through the SparklineAxisOptions as follows:

const rateOfChangeCellRendererParams = {
    sparklineOptions: {
        axis: {
            // use Time Axis
            type: 'time'
        }
    }
};

<AgGridReact>
    <AgGridColumn field="rateOfChange" cellRenderer="agSparklineCellRenderer" cellRendererParams={rateOfChangeCellRendererParams} />
</AgGridReact>

In the snippet above, the x-axis type is set to 'time' to select a Time Axis instead of the default Category Axis.

The example below demonstrates the Time Axis used in an Area Sparkline. Note the following:

  • The rateOfChange column is mapped to data containing an Array of Tuples of type [Date, number][].
  • The Date X values are placed in chronological order and spread along the x-axis based on the time between data points.
  • The Date X values are included in the tooltip title.

Interfaces

SparklineAxisOptions

type
string
The type of the x-axis.
Default: 'category'
Options: 'category', 'number', 'time'
stroke
string
The CSS colour value for the outline of the horizontal axis line.
Default: 'rgb(204, 214, 235)'
strokeWidth
number
The thickness in pixels for the stroke of the horizontal axis line.
Default: 1

Next Up

Continue to the next section to learn about: Sparkling Tooltips.