Skip to main content

Reference

 

OutSystems

Create Column and Bar Charts

Learn how to create a simple Column or Bar chart in OutSystems. If you are creating your first chart, start with a Column Chart with a fixed number of columns

Create a Column or Bar Chart with a fixed number of columns or bars

  1. Drag a Column Chart or Bar Chart from the Toolbox to the Screen.

  2. On the Property pane of the chart, click + to the left of SourceDataPointList to create a list with one data point.

    Each data point corresponds to one column or bar of the chart.

  3. Click + to the left of data point [0] and set the Label and Value properties to define the first data point.

    Optionally, you can also set DataSeriesName, Tooltip and Color for the data points.

  4. To add another data point, repeat steps .2 and .3.

After publishing your module you can check your chart by opening the screen in browser or device:

Create a Column or Bar Chart with a variable number of columns or bars

Before you start, make sure your List of data points is ready to be used in your chart: each data point must include a label and a numerical value.

To create a Column or Bar Chart with a variable number of columns or bars follow these steps:

  1. Drag a Column Chart or Bar Chart from the Toolbox to the Screen.

  2. On the Property pane of the chart, set the SourceDataPointList property to a List containing the data points for the chart.

  3. Map the Label and Value of the SourceDataPointList to the correct Attributes from the List containing the data points for the chart.

    Optionally, you can also set DataSeriesName, Tooltip and Color for the data points.

After publishing your module you can check your chart by opening the screen in browser or device.

Create a Column or Bar Chart with multiple series

To create a Column or Bar Chart with multiple series follow one of the previous procedures and set the DataSeriesName property for the data points.

After publishing your module you can check your chart by opening the screen in browser or device:

  • Was this article helpful?