Charts Plugin

Charting in AdapTable is provided courtesy of the Infragistics Charting Library.

Charts can be provided either at design-time through Predefined Config or built at run-time.

There are a huge number of options available when creating charts and all charts are automatically persisted as part of Adaptable State.


Charts are 'live' so they will update in real time as the underlying data changes.

Using the Charts Plugin

To use the AdapTable plugins you need to do the following:

  1. Install the package you need in npm:

    npm install @adaptabletools/adaptable-plugin-charts
    You must install the same version of the Plugin as you use for the 'core' AdapTable package. AdapTable will send a warning message to the console if these are different
  2. Import the Plugin in your code when instantiating AdapTable:

    import charts from "@adaptabletools/adaptable-plugin-charts";
  3. Add the Plugin to the plugins property in AdaptableOptions:

    const adaptableOptions: AdaptableOptions = {
    primaryKey: "OrderId",
    adaptableId: "Plugin Demo",
    // call the plugins functions and pass them to plugins array
    plugins: [charts()],

Chart Types

The currently available Charts are:

Category Charts

Category Charts are charts that let you see data in a typical X and Y axis form.

In the Category Chart wizard you need to select:

  • One or more Y Axis (Vertical) Columns (numeric only)

  • An X Axis (Horizontal) Column


You can create a Query to reduce the number of values retrieved in the X Axis (see Queries for more details on creating queries).


There are a huge amount of different options and properties you can set for Category Charts including Chart Type (e.g. column, line etc), Annotations, Callouts, Transitions and much else.

Pie Charts

This Module allows you to see the contents of a Column in Pie or Doughnut Chart form.

In the Pie Chart wizard you need to select:

  • Primary Column

  • Secondary Column (optional)

You can choose whether to see the chart as Pie Chart or Doughnut. You are also able to specify 'Others' to group together the smallest set of values.


As well as being able to create a saveable Pie Chart, you are also able to see a whole column as a Pie Chart (via the Column Header menu) or a range of selected cells (via the Context menu).


If there are too many values to view individually (e.g. if its a numeric column) then AdapTable will group the values into ranges for you.


Sparklines are ideal for seeing data as a range.


Like with Pie Charts, as well as being able to create a saveable Sparkline, you are also able to see a whole column as a Sparkline (via the Column Header menu) or a range of selected cells (via the Context menu).

You can choose whether to see the Sparkline as Line, Column or Area.

Financial Charts


Chart Menu Items

There are 2 sets of extra menu items available if using the Chart Plugin


These are available in both the Column Menu and the Context Menu

View As Pie Chart

This allows users to select a column - or highlight a group of cells in a column - and see them as a Pie Chart.

View As Sparkline

The (View As) Sparkline Module enables users to highlight a column or group of cells in a column and see them as a Sparkline.

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

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

User Interface Elements

ModuleWizardToolbarTool PanelColumn MenuContext Menu
Sparkline ColumnNoNoNoYesYes

Chart Plugin Options

There are a few Options available for managing Charts in Adaptable:

displayOnStartUpWhether a chart is displayed at start-up; only applies if CurrentChartName property in Chart State is setfalse
pieChartMaxItemsMaximum number of items to show in a pie chart.50
showModalDisplays charts in a modal popup; if false, charts appear in the div specified im chartContainer property of Container Optionsfalse

A few of these are of interest...

Display On StartUp

Specifies whether a chart is displayed at start up.


This property only applies if the CurrentChartName property in Chart State is not empty

Show Modal

Set whether to show charts in a modal popup.

If set to true, then we ignore the chartContainer property in Container Options when working out where to display the chart.


If the property is false, charts will appear in the div element that is specified in chartContainer property

Pie Chart Max Items

Sets the maximum number of items to show in a pie chart.


This only applies to non numeric columns, because for numeric columns we create bands automatically.


Avoid making the number too big, as then the pie chart will be difficult to read


chartPluginOptions = {
displayOnStartUp: true,
showModal: false,
pieChartMaxItems: 30,

Chart Predefined Config

The Predefined Configuration for the Chart Module


Chart API

Provides run-time access to the Chart Plugin.

getAllChartDefinitions()Returns all the Chart Definitions in the State
getChartState()Retrieves the Chart section of Adaptable State
showChartPopup()Opens the Chart popup screen


How many Charts Type are there?

Currently 2 (Category and Doughnut) but more to come in due course.

The Charts package is very large - can I avoid using and downloading it?

Yes, Charting as of Version 6 (January 2020) is provided as an Adaptable Plugin; so if you don't want to use Charting then simply don't request the Charting Plugin.

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

Visit the Charts Demos to see AdapTable running with the Charts plugin.