AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Columns

Overview

Columns of the data grid are defined as instances of the anychart.core.ui.DataGrid.Column class.

To access a column, combine dataGrid() with column() and specify its index:

// access the first data grid column
var column_1 = chart.dataGrid().column(0);

By default, there are two columns, numbered from left to right. The first column displays linear indexes of data items, and the second one displays their names.

As explained in the sections below, you can change the text as well as other parameters of default columns or create completely custom columns. Also, you can use column presets - see the Column Presets article.

Enabling / Disabling

Passing true / false to the enabled() method allows enabling or disabling a column:

// disable the first data grid column
chart.dataGrid().column(0).enabled(false);

Playground

Width

The total width of the data grid is defined by the sum of its columns' widths. To set the width of a column, call the width() method.

Note: Also, you can adjust the position of the splitter between the data grid and timeline to show more or less of the data grid - see Basic Settings: Splitter.

In this sample, the width of both default columns is adjusted:

// set the width of data grid columns
chart.dataGrid().column(0).width(25);
chart.dataGrid().column(1).width(130);

Playground

Title

To configure titles of columns, use the title() method with methods of the anychart.core.ui.Title class - for example, enabled(), text(), fontColor(), fontWeight(), etc.:

// configure the title of the first data grid column
var column_1 = chart.dataGrid().column(0);
column_1.title().enabled(false);

// configure the title of the second data grid column
var column_2 = chart.dataGrid().column(1);
column_2.title().text("TASK");
column_2.title().fontColor("#64b5f6");
column_2.title().fontWeight(600);

Playground

Text (Labels)

To adjust the text of columns, combine labels() with methods of the anychart.core.ui.LabelsFactory class - for example, fontColor(), fontWeight(), fontSize(), etc.

The format() method, combined with text formatters, allows setting the text format - read the sections below to learn more.

Alternatively, you can configure the text (and width) with the help of column presets - see Column Presets.

Note: To learn more about formatting dates, see Date and Time Formats: format().

Tokens

To format the text of columns, combine the format() method with tokens.

Please keep in mind that in addition to default tokens you can always use a custom token corresponding to a custom field in your data.

Also, if you need to enable HTML in tokens, pass true to useHtml().

Project Tokens

For the Project Gantt chart, the following tokens are available:

  • {%id}
  • {%name}
  • {%actualStart}
  • {%actualEnd}
  • {%baselineStart}
  • {%baselineEnd}
  • {%progress}
  • {%linearIndex}

In the sample below, the text format of both default columns is set with the help of tokens. In the second column a custom token is used. Also, the text font of the first column is adjusted.

// set the text of the first data grid column
var column_1 = chart.dataGrid().column(0);
column_1.labels().fontColor("#64b5f6");
column_1.labels().fontWeight(600);
column_1.labels().format("{%linearIndex}.");

// set the text of the second data grid column
var column_2 = chart.dataGrid().column(1);
column_2.labels().useHtml(true);
column_2.labels().format(
  "<span style='color:#dd2c00;font-weight:bold'>{%custom_field} </span>" +
  "{%name}: <span style='color:#64b5f6'>{%progress}</span>"
);

Playground

Resource Tokens

The Resource Gantt chart supports these tokens:

  • {%id}
  • {%name}
  • {%start}
  • {%end}
  • {%linearIndex}

In the following sample, tokens are used to format the text of both default columns. In the second column a custom token is used. Also, the text font of the first column is adjusted.

// set the text of the first data grid column
var column_1 = chart.dataGrid().column(0);
column_1.labels().fontColor("#64b5f6");
column_1.labels().fontWeight(600);
column_1.labels().format("{%linearIndex}.");

// set the text of the second data grid column
var column_2 = chart.dataGrid().column(1);
column_2.labels().useHtml(true);
column_2.labels().format(
  "<span style='color:#dd2c00;font-weight:bold'>" +
  "{%custom_field}</span> {%name}"
);

Playground

Formatting Functions

You can configure the text of columns by combining the format() method with formatting functions.

In these functions, a number of default context fields is available. Also, you can use getData() to refer to a custom field in your data and methods of the tree data model to perform operations on data.

If you need to enable HTML in formatting functions, pass true to useHtml().

Project Fields

For the Project Gantt chart, the following fields are available in formatting functions:

  • id
  • name
  • actualStart
  • actualEnd
  • baselineStart
  • baselineEnd
  • progress
  • linearIndex

In the sample below, formatting functions are used to display different column labels for different types of tasks:

Playground

A special context field item and the numChildren() method of the Tree Data Model are used to get the number of the current data item's children and distinguish regular tasks from parent ones. To distinguish regular tasks from milestones, the duration of tasks is calculated.

This is how the first column is configured - please note that both text font and text format are set:

// set the text of the first data grid column

var column_1 = chart.dataGrid().column(0);
column_1.labels().fontWeight(600);
column_1.labels().useHtml(true);

column_1.labels().format(function() {

  var children = this.item.numChildren();
  var duration = this.actualEnd - this.actualStart;
  var index = this.linearIndex;

  var parentText = "<span style='color:#dd2c00'>" + index + ".</span>";
  var milestoneText = "<span style='color:#ffa000'>" + index + ".</span>";
  var taskText =  "<span style='color:#64b5f6'>" + index + ".</span>";

  // identify the task type and display the corresponding text
  if (children > 0) {
    return parentText;
  } else {
    if (duration == 0) {
      return milestoneText;
    } else {
      return taskText;
    }
  }

});

The text of the second column includes the content of a custom data field:

// set the text of the second data grid column

var column_2 = chart.dataGrid().column(1);
column_2.labels().useHtml(true);

column_2.labels().format(function() {

  var numChildren = this.item.numChildren();
  var duration = (this.actualEnd - this.actualStart) / 1000 / 3600 / 24;
  var progress = this.progress * 100 + "%";
  var customField = "";
  if (this.getData("custom_field")) {
    customField = "<span style='font-weight:bold'>" +
             this.getData("custom_field") + " </span>";
  }

  var parentText = "<span style='color:#dd2c00;font-weight:bold'>" +
                   this.name + ": " + duration + "d</span>";
  var milestoneText = "<span style='color:#ffa000;font-weight:bold'>" + 
                      customField + this.name + "</span";
  var taskText = "<span style='color:#64b5f6'>" + customField + 
                 this.name + ": " + progress + "</span>";

  // identify the task type and display the corresponding text
  if (numChildren > 0) {
    return parentText;
  } else {
    if (duration == 0) {
      return milestoneText;
    } else {
      return taskText;
    }
  }

});

Resource Fields

Here are the fields supported by the Resource Gantt chart:

  • id
  • name
  • start
  • end
  • linearIndex

In this sample, formatting functions are used to display different column labels for parent and child resources:

Playground

A special context field item and the numChildren() method of the Tree Data Model are used to get the number of the current data item's children and distinguish regular resources from parent ones.

This is how the first column is configured - please note that both text font and text format are set:

// set the text of the first data grid column

var column_1 = chart.dataGrid().column(0);
column_1.labels().fontWeight(600);
column_1.labels().useHtml(true);

column_1.labels().format(function() {

  var children = this.item.numChildren();
  var index = this.linearIndex;

  // identify the resource type and display the corresponding text
  if (children > 0) {
    return "<span style='color:#dd2c00'>" + index + ".</span>";
  } else {
    return "<span style='color:#64b5f6'>" + index + ".</span>";
  }

});

The text of the second column includes the content of a custom data field:

// set the text of the second data grid column

var column_2 = chart.dataGrid().column(1);    
column_2.labels().useHtml(true);

column_2.labels().format(function() {

  var numChildren = this.item.numChildren();
  var duration = (this.end - this.start) / 1000 / 3600 / 24;
  var customField = " ";
  if (this.getData("custom_field")) {
    customField = "<span style='font-weight:bold'>" +
             this.getData("custom_field") + customField + "</span>";
  }

  var parentText = "<span style='color:#dd2c00;font-weight:bold'>" +
                   this.name.toUpperCase() + "<span>";
  var childText = "<span style='color:#64b5f6'>" + customField + 
                  this.name + ": " + duration + "d</span>";

  // identify the resource type and display the corresponding text
  if (numChildren > 0) {
    return parentText;
  } else {
    return childText;
  }

});

Indentation

In case there are hierarchical relationships between data items, nested data grid labels in the second column are indented. To set an indent in any column, call the depthPaddingMultiplier() method.

In the following sample, the indent in the second column is set to 60, and the first column is left with the default indent of 0:

// set the indent for nested labels in the second column
chart.dataGrid().column(1).depthPaddingMultiplier(60);

Playground

Buttons

If there are hierarchical relationships between data items, special buttons are shown in the second data grid column. They allow expanding or collapsing parent tasks or resources on the timeline as well as their labels on the data grid.

By passing true / false to the collapseExpandButtons() method, you can enable or disable buttons in any column. As a rule, it also makes sense to set the hierarchical indentation - see the Indentation section. Other button settings are listed in the Buttons article.

Note: By default, Gantt charts are drawn with all elements expanded. To learn how to change this setting, read Basic Settings: Expanding / Collapsing.

The sample below shows how to enable and disable buttons:

// disable buttons in the second column
chart.dataGrid().column(1).collapseExpandButtons(false);

// enable buttons in the first column
chart.dataGrid().column(0).collapseExpandButtons(true);

// set the indent for nested labels in the first column
chart.dataGrid().column(0).depthPaddingMultiplier(20);

Playground

Custom Columns

You can create custom data grid columns by combining dataGrid() with column() and specifying indexes:

var newColumn_1 = chart.dataGrid().column(2);
var newColumn_2 = chart.dataGrid().column(3);

To configure a custom column, use methods of the anychart.core.ui.DataGrid.Column class, which are listed in the previous sections of this article.

Project Chart

In the following sample, there is a Project Gantt chart with two default columns and custom one. The text of the custom column is formatted with the help of a token - see the Project Tokens section.

// create and configure a custom data grid column
var newColumn = chart.dataGrid().column(2);
newColumn.width(90);
newColumn.title("Start");
newColumn.title().fontColor("#64b5f6");
newColumn.title().fontWeight(600);
newColumn.labels().fontColor("#64b5f6");
newColumn.labels().format("{%actualStart}{dateTimeFormat:dd MMM}");
newColumn.depthPaddingMultiplier(20);
newColumn.collapseExpandButtons(true);

Playground

Resource Chart

In the sample below, there is a Resource Gantt chart with two default columns and custom one. The text of the custom column is formatted with the help of a token - see the Resource Tokens section.

// create and configure a custom data grid column
var newColumn = chart.dataGrid().column(2);
newColumn.width(90);
newColumn.title("Start");
newColumn.title().fontColor("#64b5f6");
newColumn.title().fontWeight(600);
newColumn.labels().fontColor("#64b5f6");
newColumn.labels().format("{%start}{dateTimeFormat:dd MMM}");

Playground