Sparkline Column

A Sparkline Column is a column which contains an array of numbers as its value.

As a result, each cell in the column can be represented as an inline Sparkline chart.


Sparkline Columns are particularly useful if you have pricing or historical data.


By their nature Sparkline columns require more intensive rendering than normal columns so use sparingly or take into account the extra time it will take to render the Sparkline.


The Column Type of a Sparline Column should be abColDefNumberArray

Sparkline Column Properties

Each Sparkline Column contains the following properties:

ColumnIdId of the Column
LineColorColour of Sparkline line (if Type is 'Line')
MaximumValueMaximum value for Sparkline chart of column
MinimumValueMinimum value for Sparkline chart of column
ShowToolTipShows tooltip displaying underlying Sparkline values
SparklineTypeType of Sparkline Chart: 'Line', 'Column' or 'Area'
// Create 2 Sparkline Columns
// 1. 'Prices' - which uses default settings
// 2. 'Values' - which sets a min and max value, makes the Sparkline type 'Line'
// and also displays the tooltip
export default {
SparklineColumn: {
SparklineColumns: [
ColumnId: 'Prices',
ColumnId: 'Values',
MinimumValue: 20,
MaximumValue: 1000,
SparklineType: 'Line'
ShowToolTip: true
} as PredefinedConfig;

Sparkline Column API Methods

getAllSparklineColumn()Returns all Sparkline columns in Adaptable State
getSparklineByColumn(columnId)Returns a Sparkline column by id
getSparklineColumnState()Retrieves SparklineColumn section from Adaptable State
isSparklineColumn(columnId)True if the Column with given columnId is Sparkline Column

Sparkline Column Config

SparklineColumnsList of columns to be displayed as Sparkline

UI Elements

To Do


To Do


Can I create a Sparkline Column at runtime?

No, they can only be created at design time as they only work on columns which contain an array of number values.

For the same reason you cannot delete a Sparkline column at runtime (but you can edit one).

More Information

Sparkline Columns Demo