Chart widgets
Chart widgets are analytic widgets that display aggregated data as a column, bar, area, spline, line, scatter, doughnut, or pipeline. The chart type depends on the type property value of the corresponding series. Learn more: Set up widgets (user documentation).
View an example of a configuration object that sets up a doughnut below.
{
"operation": "insert",
"name": "ChartWidget_kirol30",
"values": {
"layoutConfig": {
"column": 2,
"colSpan": 1,
"row": 2,
"rowSpan": 1
},
"type": "crt.ChartWidget",
"config": {
"title": "#ResourceString(ChartWidget_kirol30_title)#",
"theme": "without-fill",
"color": "dark-blue",
"series": [
{
"type": "doughnut",
"data": {
"formatting": {
"type": "number"
},
"providing": {
"attribute": "ChartWidget_kirol30_SeriesData_977ap5g",
"schemaName": "Contact",
"filters": null,
"aggregation": {
"column": {
"orderDirection": 0,
"orderPosition": -1,
"isVisible": true,
"expression": {
"expressionType": 1,
"functionArgument": {
"expressionType": 0,
"columnPath": "Id"
},
"functionType": 2,
"aggregationType": 1,
"aggregationEvalType": 2
}
}
},
"dependencies": [
{
"attributePath": "Id",
"relationPath": "PDS.Id"
}
],
"rowCount": 50,
"grouping": {
"type": "by-value",
"column": {
"orderDirection": 0,
"orderPosition": -1,
"isVisible": true,
"expression": {
"expressionType": 0,
"columnPath": "CreatedBy"
}
}
}
}
},
"label": "#ResourceString(ChartWidget_kirol30_series_0)#"
}
]
}
},
"parentName": "GridContainer_wv06xk5",
"propertyName": "items",
"index": 3
}
General properties
string type
Type of a Freedom UI element. For charts, "crt.ChartWidget." Available for all chart types.
LayoutConfig layoutConfig
Specify the widget position and size. Available for all chart types.
Parameters
Name | Type | Description |
|---|---|---|
column | number | The column number where the widget starts. |
colSpan | number | The number of columns the widget spans. |
row | number | The row number where the widget starts. |
rowSpan | number | The number of rows the widget spans. |
Widget properties (config)
string title
Widget title. Available for all chart types.
boolean hideTitle
Whether to hide the widget title at runtime. Available for all chart types. Does not affect the title of the widget opened in full-screen view. By default, "false."
Available values
Value | Description |
|---|---|
true | Hide the widget title at runtime. |
false | Display the widget title at runtime. |
boolean hideTools
Whether to hide the title-related parameters in the widget setup area. Available for all chart types. Does not affect the title of the widget opened in full-screen view. By default, "false."
Available values
Value | Description |
|---|---|
true | Hide the title-related parameters in the widget setup area. |
false | Display the title-related parameters in the widget setup area. |
string theme
The visual style of the widget. Available for all chart types. By default, "without-fill."
Available values
Value | Description |
|---|---|
full-fill | Apply a fully filled background style. |
without-fill | Apply the default style without a background fill. |
partial-fill | Apply a partially filled background style. |
glassmorphism | Apply the glassmorphic style. Available for Creatio 8.3.3 and later. |
string color
The accent color of the widget. Available for all chart types.
Available values
Value | Description |
|---|---|
burnt-coral | #E92170 |
cadmium-red | #E23911 |
forest-green | #118F45 |
steel-blue | #057ADD |
vivid-purple | #A758C5 |
rusty-orange | #DE5C14 |
dark-turquoise | #08857E |
green | #20A959 |
light-blue | #009DE3 |
celestial-blue | #247EE5 |
bright-red | #FF602E |
orange-red | #FF8800 |
orange | #FFAC07 |
light-green | #A6DE00 |
turquoise | #00BFA5 |
dark-green | #22AC14 |
red | #FF4013 |
coral | #F9307F |
purple | #B87CCF |
violet | #7848EE |
blue | #0058EF |
navy-blue | #4F43C2 |
dark-blue | #0D2E4E |
array series
Chart series configuration. Each item in the array configures a separate data series displayed on the chart. Available for all chart types.
Series properties (config.series)
string type
The chart type of the series. Available for all chart types.
Available values
Value | Description |
|---|---|
bar | Column |
horizontal-bar | Bar |
area | Area |
spline | Spline |
line | Line |
scatter | Scatter |
doughnut | Doughnut |
tsfunnel | Pipeline |
string label
The name of the series. Available for all chart types.
string color
The color of the series. Available for the bar, horizontal-bar, area, spline, line, and scatter chart types only.
Available values
Value | Description |
|---|---|
burnt-coral | #E92170 |
cadmium-red | #E23911 |
forest-green | #118F45 |
steel-blue | #057ADD |
vivid-purple | #A758C5 |
rusty-orange | #DE5C14 |
dark-turquoise | #08857E |
green | #20A959 |
light-blue | #009DE3 |
celestial-blue | #247EE5 |
bright-red | #FF602E |
orange-red | #FF8800 |
orange | #FFAC07 |
light-green | #A6DE00 |
turquoise | #00BFA5 |
dark-green | #22AC14 |
red | #FF4013 |
coral | #F9307F |
purple | #B87CCF |
violet | #7848EE |
blue | #0058EF |
navy-blue | #4F43C2 |
dark-blue | #0D2E4E |
object data
The data configuration of the series. Includes data formatting and data providing settings. Available for all chart types.
Data formatting properties (config.series.data.formatting)
string type
The data type used to format the series values. Available for all chart types.
Data providing properties (config.series.data.providing)
string attribute
The name of the view model attribute that stores the series data. Available for all chart types.
string schemaName
The code of the "Object" type schema that provides the data, for example, "Contact." Available for all chart types.
object filters
Filters applied to the data source. Uses the standard Creatio filter object structure. Available for all chart types. Learn more: Filter object.
object aggregation
The aggregation configuration for the data column. Defined through a column expression with an aggregationType property value that corresponds to the Terrasoft.AggregationType enumeration. Available for all chart types. Learn more: EntitySchemaQuery class.
array dependencies
The data source dependencies. Available for all chart types.
Parameters
Name | Type | Description |
|---|---|---|
attributePath | string | The path to the attribute in the current view model. |
relationPath | string | The related path that the attribute depends on. |
integer rowCount
The maximum number of records to retrieve for the series, for example, "50." Available for all chart types.
object grouping
The grouping configuration for the data. Available for all chart types.
Parameters
Name | Type | Description |
|---|---|---|
type | string | The grouping type, for example, "by-value." |
column | object | The column used for data grouping. |
See also
Set up widgets (user documentation)