Chart 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.

important

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

note

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

tip

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 function 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.

tip

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).

caution

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

Sparklines are ideal for seeing data as a range.

tip

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

TODO...

Chart Menu Items

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

note

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 Function enables users to highlight a column or group of cells in a column and see them as a Sparkline.

User Interface Elements

AdaptableFunctionWizardToolbarTool PanelColumn MenuContext Menu
ChartsYesYesYesNoNo
Sparkline ColumnNoNoNoYesYes

FAQ

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.

Demo

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