Stacked Area Chart


Stacked Area Chart is similar to Multi-Series Area Chart, but the difference lies in the plotting of data sets, as the stacked area chart plots data sets on top of each data set, rather than adopting the clustered side-by-side placement of data sets. For detailed information on the different chart types provided by Canvas, refer App Designer - Analytical Charts. To create a stacked area chart app, perform the following steps in Canvas Studio:

  1. On the home page of Canvas Studio, click App Designer.

  1. Click icon to create a new app.

  1. Enter an appropriate name in the App Display Name field, e.g. Stacked Area Chart.
  2. Enter an appropriate ID in the App ID and View ID fields, e.g. STACKED_AREA_CHART_APP.

Note: On entering the App ID, the View ID gets filled automatically. However, you can still apply changes to the View ID. No blank spaces and special characters should be used in the App ID and View ID fields. The underscore symbol can be used. Only during the creation of an app, you can edit the App ID and View ID fields. When editing an app, you cannot apply changes to the App ID and View ID fields.

  1. In the App Resource Bundle field, enter the name of the bundle key associated with the property file, e.g. common.
  2. Select the appropriate Product, Sub-Product and Function Codes. For detailed information on Product, Sub-Product and Function Codes, refer Configuring Entitlements and Creating Product, Sub-Product and Function Codes.

  1. Select the STACKEDAREA chart view type.
  2. Click the Datasource tab to select the relevant data source for the stacked area chart widget.

  1. Click the Data Src ID field and type the name of the Data Source to select it.

Note: You can uncheck the Use Existing Data Source and Use Default instruction Class checkboxes to connect to any data source using SQL Param Map ID. For detailed information on using the SQL Map and the instruction class to display data on the app, refer Adding the SQL Map and Instruction Class with App.

  1. Click Proceed to design the app.

  1. Click Columns tab.

  1. Drag and Drop the ACCOUNT_NAME column to X-Axis.
  2. Drag and Drop the AVAILABLE_BALANCE, OVER_DRAFT_LMT and UNCLEARED_FUND columns to Y-Axis.

  1. Click the icon to use the additional available configurations.

  1. Click Configure to change the column properties. Each column will have the default properties already set.
  2. After applying changes to the column properties, click Apply.


On clicking Apply, the chart designer area will get displayed, where you can view the temporary preview of the chart.

  1. Click icon to save the app.


A confirmation message, indicating a successful save appears.

  1. Click Ok.

Let's assume that the Stacked Area Chart app is mapped to the ACCOUNT SUMMARY workspace. The following screen shot serves as a good illustration of the output in the functional application, Modelhouse: