Class: DataTable

Highcharts. DataTable

new DataTable( [options])

Class to manage columns and rows in a table structure. It provides methods to add, remove, and manipulate columns and rows, as well as to retrieve data from specific cells.

Highcharts allows passing a DataTable or a configuration object for a data table in the dataTable property, either chart-level dataTable or as series.dataTable. The DataTable is then used as a source for the series data points, mapped by the series.dataMapping option.

After chart instantiation, the data table can be accessed from the series as series.dataTable. CRUD operations on the data table will be reflected in the chart.

Parameters:
Name Type Argument Description
options Highcharts.DataTableOptionsObject <optional>

Options to initialize the new DataTable instance.
Example
const dataTable = new Highcharts.DataTable({
  columns: {
    year: [2020, 2021, 2022, 2023],
    cost: [11, 13, 12, 14],
    revenue: [12, 15, 14, 18]
  }
});

Methods

deleteRows(rowIndex [, rowCount])

Delete rows. Simplified version of the full DataTable.deleteRows method.

Parameters:
Name Type Argument Default Description
rowIndex number

The start row index
rowCount number <optional>
 1

The number of rows to delete
Fires:
  • event:#afterDeleteRows
Returns:
Try it

getColumns( [columnIds])

Retrieves all or the given columns. Simplified version of the full DataTable.getColumns method, always returning by reference.

Parameters:
Name Type Argument Description
columnIds Array.<string> <optional>

Column ids to retrieve.
Returns:
Highcharts.DataTableColumnCollection .

Collection of columns. If a requested column was not found, it is undefined.

getRowObject(rowIndex [, columnNames])

Retrieves the row at a given index.

Parameters:
Name Type Argument Description
rowIndex number

Row index to retrieve. First row has index 0.
columnNames Array.<string> <optional>

Column names to retrieve.
Returns:
Record.<string, (number|string|undefined)> | undefined .

Returns the row values, or undefined if not found.

setColumn(columnId)

Fetches the given column by the canonical column ID. Simplified version of the full DataTable.getRow method, always returning by reference.

Parameters:
Name Type Description
columnId string

ID of the column to get.
Returns:
Highcharts.DataTableColumn | undefined .

A copy of the column, or undefined if not found.

setColumn(columnId [, column] [, rowIndex] [, eventDetail])

Sets cell values for a column. Will insert a new column, if not found.

Parameters:
Name Type Argument Description
columnId string

Column name to set.
column Highcharts.DataTableColumn <optional>

Values to set in the column.
rowIndex number <optional>

Index of the first row to change. (Default: 0)
eventDetail Record.<string, (boolean|number|string|null|undefined)> <optional>

Custom information for pending events.
Fires:
  • event:#setColumns
  • event:#afterSetColumns

setColumns(columns [, rowIndex] [, eventDetail])

Sets cell values for multiple columns. Will insert new columns, if not found. Simplified version of the full DataTable.setColumns, limited to full replacement of the columns (undefined rowIndex).

Parameters:
Name Type Argument Description
columns Highcharts.DataTableColumnCollection

Columns as a collection, where the keys are the column names.
rowIndex number <optional>

Index of the first row to change. Ignored in the simplified DataTable, as it always replaces the full column.
eventDetail Record.<string, (boolean|number|string|null|undefined)> <optional>

Custom information for pending events.
Fires:
  • event:#setColumns
  • event:#afterSetColumns
Try it

setRow(row [, rowIndex] [, insert] [, eventDetail])

Sets cell values of a row. Will insert a new row if no index was provided, or if the index is higher than the total number of table rows. A simplified version of the full DateTable.setRow, limited to objects.

Parameters:
Name Type Argument Description
row Record.<string, (number|string|undefined)>

Cell values to set.
rowIndex number <optional>

Index of the row to set. Leave undefined to add as a new row.
insert boolean <optional>

Whether to insert the row at the given index, or to overwrite the row.
eventDetail Record.<string, (boolean|number|string|null|undefined)> <optional>

Custom information for pending events.
Fires:
  • event:#afterSetRows
Try it