Charts API
The OutSystems API for plotting charts.
You can create a chart by dragging a chart widget to the screen. The widget property SourceDataPointList
is the list consisting of the DataPoint
elements. The DataPoint
element defines drawing of the chart: Label
, Value
, DataSeriesName
, Tooltip
and Color
. You need to provide values to the DataPoint
, and in charts with more than one series, you need to specify each series you want to represent in the chart.
OutSystems uses Highcharts 6.1.0 to generate the charts, and you should consult the Highcharts documentation for implementation and the API.
Summary
Widget | Description |
---|---|
AreaChart | Area charts illustrate the contribution of values to a total over time. |
BarChart | Bar charts compare multiple values using horizontal bars. In this chart, the X-axis runs vertically and the Y-axis runs horizontally. |
ColumnChart | Column charts compare multiple values using vertical bars. |
LineChart | Line charts illustrate trends of values over time. |
PieChart | Pie charts illustrate proportions of values. |
Action | Description |
---|---|
AdvancedFormat_Init | Initializes an AdvancedFormat record with the values passed as arguments. The record is returned by the action. |
ChartFormat_Init | Initializes a ChartFormat record with the values passed as arguments. The record is returned by the action. |
DataPoint_GetClicked | Returns the data point that was clicked on the chart. Execute this action in the On Click action of a chart. |
DataPoint_Init | Initializes a DataPoint record with the values passed as arguments. The record is returned by the action. |
DataPoint_InitMissing | Initializes a DataPoint to plot a gap on the chart. The record is returned by the action. |
XAxisFormat_Init | Initializes an XAxisFormat record with the values passed as arguments. The record is returned by the action. |
YAxisFormat_Init | Initializes an YAxisFormat record with the values passed as arguments. The record is returned by the action. |
Structure | Description |
---|---|
AdvancedDataPointFormat | Information to format a data point using Highcharts JSON. |
AdvancedDataSeriesFormat | Information to format a data series using Highcharts JSON. |
AdvancedFormat | Information to format chart elements using Highcharts JSON. |
ChartFormat | Information to format the chart. |
DataPoint | Information to plot a data point on the chart. |
XAxisFormat | Information to format the X-axis on the chart. |
YAxisFormat | Information to format the Y-axis on the chart. |
Static Entity | Description |
---|---|
LegendPosition | The position where the legend is displayed on charts. |
StackingType | The way to plot multiple data series on Area, Bar, or Column charts: - ‘NoStacking’: plot data series side by side to compare them; - ‘Stacked’: plot data series stacked to show their contribution to a total; - ‘Stacked100Percent’: plot data series stacked to show their percentage in a total. |
XAxisValuesType | The data type of labels displayed on the X-axis to format them. Using ‘Auto’ means the type is inferred from the label of the first data point. |
Widgets
AreaChart
Area charts illustrate the contribution of values to a total over time.
Inputs
- SourceDataPointList
- Type: mandatory, DataPoint List.
The list of all data points to be plotted on the chart. - StackingType
- Type: optional, StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series overlapped to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘Stacked’ is the default option. - Height
- Type: optional, Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width. - LegendPosition
- Type: optional, LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point. - XAxisFormat
- Type: optional, XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter. - YAxisFormat
- Type: optional, YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter. - ChartFormat
- Type: optional, ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter. - Clickable
- Type: optional, Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default). - AdvancedFormat
- Type: optional, AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.
BarChart
Bar charts compare multiple values using horizontal bars.
In this chart, the X-axis runs vertically and the Y-axis runs horizontally.
Inputs
- SourceDataPointList
- Type: mandatory, DataPoint List.
The list of all data points to be plotted on the chart. - StackingType
- Type: optional, StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘NoStacking’ is the default option. - Height
- Type: optional, Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width. - LegendPosition
- Type: optional, LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point. - XAxisFormat
- Type: optional, XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter. - YAxisFormat
- Type: optional, YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter. - ChartFormat
- Type: optional, ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter. - Clickable
- Type: optional, Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default). - AdvancedFormat
- Type: optional, AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.
ColumnChart
Column charts compare multiple values using vertical bars.
Inputs
- SourceDataPointList
- Type: mandatory, DataPoint List.
The list of all data points to be plotted on the chart. - StackingType
- Type: optional, StackingType Identifier.
The way to plot multiple data series on the chart:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
‘NoStacking’ is the default option. - Height
- Type: optional, Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width. - LegendPosition
- Type: optional, LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point. - XAxisFormat
- Type: optional, XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter. - YAxisFormat
- Type: optional, YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter. - ChartFormat
- Type: optional, ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter. - Clickable
- Type: optional, Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default). - AdvancedFormat
- Type: optional, AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.
LineChart
Line charts illustrate trends of values over time.
Inputs
- SourceDataPointList
- Type: mandatory, DataPoint List.
The list of all data points to be plotted on the chart. - Height
- Type: optional, Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width. - LegendPosition
- Type: optional, LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default).
The legend is hidden if no series name is set in any data point. - XAxisFormat
- Type: optional, XAxisFormat.
Formatting options for the X-axis.
Action XAxisFormat_Init helps to create and initialize this parameter. - YAxisFormat
- Type: optional, YAxisFormat.
Formatting options for the Y-axis.
Action YAxisFormat_Init helps to create and initialize this parameter. - ChartFormat
- Type: optional, ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter. - Clickable
- Type: optional, Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default). - AdvancedFormat
- Type: optional, AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.
PieChart
Pie charts illustrate proportions of values.
Inputs
- SourceDataPointList
- Type: mandatory, DataPoint List.
The list of all data points to be plotted on the chart. - Height
- Type: optional, Integer.
The vertical size of the chart in pixels (300 by default).
The horizontal size of the chart is the parent’s width. - LegendPosition
- Type: optional, LegendPosition Identifier.
The position where the legend is displayed on the chart (‘Bottom’ by default). - ChartFormat
- Type: optional, ChartFormat.
Formatting options for the chart.
Action ChartFormat_Init helps to create and initialize this parameter. - Clickable
- Type: optional, Boolean.
Set to True to allow clicking on plotted values and execute the On Click action (False by default). - AdvancedFormat
- Type: optional, AdvancedFormat.
Highcharts JSON to format elements displayed on the chart.
Action AdvancedOptions_Init helps to create and initialize this parameter.
Actions
AdvancedFormat_Init
Initializes an AdvancedFormat record with the values passed as arguments. The record is returned by the action.
Inputs
- DataPointFormats
- Type: optional, AdvancedDataPointFormat List.
Advanced JSON formatting for the data points. - DataSeriesFormats
- Type: optional, AdvancedDataSeriesFormat List.
Advanced JSON formatting for the data series. - XAxisJSON
- Type: optional, Text.
Advanced JSON formatting for the X-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#xAxis) for all available options.
As an example, format the dates on the X-axis to "MMM YYYY" using the following Highcharts JSON:
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }" - YAxisJSON
- Type: optional, Text.
Advanced JSON formatting for the Y-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#yAxis) for all available options.
As an example, prevent using decimals in the axis values using the following Highcharts JSON:
"allowDecimals: false" - HighchartsJSON
- Type: optional, Text.
Advanced JSON formatting for any element of the chart.
Refer to Highcharts API (http://api.highcharts.com/highcharts) for all available options.
Outputs
- AdvancedFormat
- Type: AdvancedFormat.
The initialized AdvancedFormat record.
ChartFormat_Init
Initializes a ChartFormat record with the values passed as arguments. The record is returned by the action.
Inputs
- ShowDataPointValues
- Type: optional, Boolean.
Set to True to display the value of the data points. - UseAnimation
- Type: optional, Boolean.
Set to True to plot the chart with animation.
Outputs
- ChartFormat
- Type: ChartFormat.
The initialized ChartFormat record.
DataPoint_GetClicked
Returns the data point that was clicked on the chart.
Execute this action in the On Click action of a chart.
Outputs
- DataPoint
- Type: DataPoint.
The clicked Data Point.
DataPoint_Init
Initializes a DataPoint record with the values passed as arguments. The record is returned by the action.
Inputs
- Label
- Type: mandatory, Text.
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD). - Value
- Type: mandatory, Decimal.
The value to be plotted. - DataSeriesName
- Type: optional, Text.
Name of the series where the data point belongs. - Tooltip
- Type: optional, Text.
Custom tooltip for the data point when hovering the mouse. - Color
- Type: optional, Text.
Custom color for the data point.
Outputs
- DataPoint
- Type: DataPoint.
The initialized DataPoint record.
DataPoint_InitMissing
Initializes a DataPoint to plot a gap on the chart. The record is returned by the action.
Inputs
- Label
- Type: mandatory, Text.
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD). - DataSeriesName
- Type: optional, Text.
Name of the series where the data point belongs.
Outputs
- DataPoint
- Type: DataPoint.
The initialized DataPoint record.
XAxisFormat_Init
Initializes an XAxisFormat record with the values passed as arguments. The record is returned by the action.
Inputs
- Title
- Type: optional, Text.
The text displayed next to the X-axis. - LabelsRotation
- Type: optional, Integer.
The rotation in degrees of all labels displayed on the X-axis. - MinValue
- Type: optional, Text.
The minimum value that is displayed on the X-axis. - MaxValue
- Type: optional, Text.
The maximum value that is displayed on the X-axis. - ValuesType
- Type: optional, XAxisValuesType Identifier.
The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.
Outputs
- XAxisFormat
- Type: XAxisFormat.
The initialized XAxisFormat record.
YAxisFormat_Init
Initializes an YAxisFormat record with the values passed as arguments. The record is returned by the action.
Inputs
- Title
- Type: optional, Text.
The text displayed next to the Y-axis. - MinValue
- Type: optional, Decimal.
The minimum value that is displayed on the Y-axis. - MaxValue
- Type: optional, Decimal.
The maximum value that is displayed on the Y-axis. - ValuesPrefix
- Type: optional, Text.
The text prefixing the values displayed on the Y-axis. - ValuesSuffix
- Type: optional, Text.
The text suffixing the values displayed on the Y-axis. - GridLineStep
- Type: optional, Decimal.
The step by which grid lines are displayed on the Y-axis.
Outputs
- YAxisFormat
- Type: YAxisFormat.
The initialized YAxisFormat record.
Structures
AdvancedDataPointFormat
Information to format a data point using Highcharts JSON.
Attributes
- DataPoint
- Type: DataPoint.
Data point to format. - DataPointJSON
- Type: Text (50).
Highcharts JSON to format the data point.
Refer to Highcharts API (http://api.highcharts.com/highcharts#series) for all available options.
As an example, show a custom data label in this point, using the following Highcharts JSON:
"dataLabels: { enabled: true, formatter: function () { return 'top value' } }"
AdvancedDataSeriesFormat
Information to format a data series using Highcharts JSON.
Attributes
- DataSeriesName
- Type: Text (50).
Name of the data series to format. - DataSeriesJSON
- Type: Text (50).
Highcharts JSON to format the data series.
All data points belonging to the data series are affected by this formatting.
Refer to Highcharts API (http://api.highcharts.com/highcharts#series and http://api.highcharts.com/highcharts...Options.series) for all available options.
As an example, plot a series with a thicker line in a Line chart using the following Highcharts JSON:
"lineWidth: 5"
AdvancedFormat
Information to format chart elements using Highcharts JSON.
Attributes
- DataPointFormats
- Type: AdvancedDataPointFormat List.
Highcharts JSON to format data points. - DataSeriesFormats
- Type: AdvancedDataSeriesFormat List.
Highcharts JSON to format data series. - XAxisJSON
- Type: Text (50).
Highcharts JSON to format the X-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#xAxis) for all available options.
As an example, format the dates on the X-axis to "MMM YYYY" using the following Highcharts JSON:
"labels:{ formatter: function() { return Highcharts.dateFormat('%b %Y', this.value); } }" - YAxisJSON
- Type: Text (50).
Highcharts JSON to format the Y-axis.
Refer to Highcharts API (http://api.highcharts.com/highcharts#yAxis) for all available options.
As an example, prevent using decimals in the axis values using the following Highcharts JSON:
"allowDecimals: false" - HighchartsJSON
- Type: Text (50).
Highcharts JSON to format any element of the chart.
Refer to Highcharts API (http://api.highcharts.com/highcharts) for all available options.
ChartFormat
Information to format the chart.
Attributes
- ShowDataPointValues
- Type: Boolean.
Set to True to display the value of the data points. - UseAnimation
- Type: Boolean.
Set to True to plot the chart with animation.
DataPoint
Information to plot a data point on the chart.
Attributes
- Label
- Type: Text (50).
The label on the X-axis for the data point.
To display dates in the X-axis use the Platform Server date format (by default YYYY-MM-DD). - Value
- Type: Decimal (37, 0).
The value to be plotted. - DataSeriesName
- Type: Text (50).
Name of the series where the data point belongs. - Tooltip
- Type: Text (50).
Custom tooltip for the data point when hovering the mouse. - Color
- Type: Text (50).
Custom color for the data point.
As an example, set the color of a data point to red using either of the following values: "Red", "#FF0000", "rgb(255,0,0)" or "rgba(255,0,0,1)"
XAxisFormat
Information to format the X-axis on the chart.
Attributes
- Title
- Type: Text (50).
The text displayed next to the X-axis. - LabelsRotation
- Type: Integer.
The counterclockwise rotation in degrees of all labels displayed on the X-axis. - MinValue
- Type: Text (50).
The minimum value that is displayed on the X-axis. - MaxValue
- Type: Text (50).
The maximum value that is displayed on the X-axis. - ValuesType
- Type: XAxisValuesType Identifier.
The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.
YAxisFormat
Information to format the Y-axis on the chart.
Attributes
- Title
- Type: Text (50).
The text displayed next to the Y-axis. - MinValue
- Type: Decimal (37, 0).
The minimum value that is displayed on the Y-axis. - MaxValue
- Type: Decimal (37, 0).
The maximum value that is displayed on the Y-axis. - ValuesPrefix
- Type: Text (50).
The text prefixing the values displayed on the Y-axis. - ValuesSuffix
- Type: Text (50).
The text suffixing the values displayed on the Y-axis. - GridLineStep
- Type: Decimal (37, 0).
The step by which grid lines are displayed on the Y-axis.
Static Entities
LegendPosition
The position where the legend is displayed on charts.
Attributes
- Id
- Type: Integer.
- Order
- Type: Integer.
- Is_Active
- Type: Boolean.
Records
- Bottom
- Top
- Hidden
- Inside
- Right
- Left
StackingType
The way to plot multiple data series on Area, Bar, or Column charts:
- ‘NoStacking’: plot data series side by side to compare them;
- ‘Stacked’: plot data series stacked to show their contribution to a total;
- ‘Stacked100Percent’: plot data series stacked to show their percentage in a total.
Attributes
- Id
- Type: Integer.
- Order
- Type: Integer.
- Is_Active
- Type: Boolean.
Records
- NoStacking
- Stacked100Percent
- Stacked
XAxisValuesType
The data type of labels displayed on the X-axis to format them.
Using ‘Auto’ means the type is inferred from the label of the first data point.
Attributes
- Id
- Type: Integer.
- Label
- Type: Text (50).
- Order
- Type: Integer.
Records
- Text
- Auto
Articles in this Section
- Create Pie and Donut Charts
- Learn how to create a simple Pie or Donut chart in OutSystems.
- Create Column and Bar Charts
- Learn how to create a simple Column or Bar chart in OutSystems.
- Create Line and Area Charts
- Learn how to create a simple Line or Area chart in OutSystems.
- Advanced Charts customization with JSON
- Learn how to customize Charts with JSON.