Configure Card Chart

Overview

This article helps you configure Card chart using the components available in the WebApp Builder. This chart is ideal highlighting high-level dashboard summaries, monitor critical business metrics at a glance, and establish KPI displays.

Prerequisites

Review the recommendations provided to design/create a chart dataset.
Ensure that a Dataset is created for the appropriate chart type and purpose, using the required fields.
When cleansing or enriching data, users may want to visualize their work with charts. In this case, create a Grid or Form container on a construct page and use the same dataset to bind data between the Grid or Form and the Chart containers.
For example, you are cleansing customer records in a Grid container by correcting missing or invalid values. You can then use the same dataset in a Chart container to visualize customer distribution by region. Since both the Grid and Chart share the same dataset, any changes in the Grid are automatically reflected in the Chart.

Dataset Design Recommendations

Ideal for displaying a single static value.
Requires two columns from a dataset but uses only the first record or row (by index) to populate its data.
Note
You can use the same chart dataset in a Grid or Form component if you plan to modify or manipulate the data.

Card Chart Example

Sample Dataset

Configuration

Rendered Chart

Configuration Steps

Note
You can interact with Build Assist to quickly configure charts as required by entering a prompt that provides the context of the dataset and the fields to be used.

On the Construct Preview’s home page, edit the required WebApp. The WebApp configuration page is displayed.
Click More Options (…) next to the required page or container node and select Add Chart > Add Card Chart.
Click the Card Chart node. The Details Pane is updated with the Card Chart fields.

Enter the required values for the fields to create a Card chart in a container using the following tables:

Field Name	Description	Supported Values/Notes
Name *required*	Name of the Card Chart Container.	Enter a name within length constraints. maxLength: 50
Title	Label that is displayed on the top of this chart container.	Enter a title within length constraints. maxLength: 50
Parent Layout Container	Name of the parent container used for page layout. Allows you to link child containers to a parent container.	Select the parent container to house this chart container.
Ordinal	Allows ordering the containers.	Any integer. default: 0
Tab Label	Label displayed as the tab name for a container. Use this property only when a container needs to be included in a tab container.	Enter a name within length constraints. maxLength: 50
Override Datastore	SKP Datastore name for this component that overrides the datastore configured at the WebApp level. Refer to Datastores for more information. Click the Open Details button next to the Datastore list to open it in the SKP Catalog.	NA
Dataset *required*	SKP dataset for the data used for this container. Select the required Dataset. Scroll down the Dataset list to auto-create a dataset using a table or view based on Construct Preview’s recommendation. Note If a dataset is being created from a SQL view, you must set its Affected Table. Click the Open Details button next to the Dataset list to open it in the SKP Catalog.	Note The Update Dataset button opens a dialog box that allows you to rescan the dataset and add any newly available fields from the underlying table or view to the dataset used in this container. Specify the dataset classification. If the scan errors out, access the associated Datastore’s scan logs in the SKP Catalog module to troubleshoot the error.
Header Text Field *required*	Select a field from the dataset used to render the card header text.	NA
Display Text Field *required*	Select a field from the dataset used to render the card display value.	NA
Display Text Intent	Controls the color of the display text.	Currently supported colors: Primary: Syniti theme color Success: Green Destructive: Red Minimal: Black Default: Primary
Parent Binding Container	Select the parent grid/form container type for data binding. Allows you to link between grids/forms and charts.	NA
Container Bindings > Source Column	Note Click Add to set up required number of container bindings. Select the source column in the parent binding container.	Use either the Source Column or the Source Value field, but not both.
Container Bindings > Source Value	A fixed source value for data binding.	Use either the Source Column or the Source Value field, but not both.
Container Bindings > Target Column *required*	Select the target column in the chart container’s dataset.	NA
Columns > Name *required*	Note Click Add to set up required number of columns to control how the fields on the chart will be sorted. Select the field name from the dataset used in the chart container.	Does not apply to Card charts.
Columns > Sort Mode	Used with the Sort Priority field to configure the default column sort order:	Does not apply to Card charts. Supported Values: None Ascending Descending
Columns > Sort Priority	Used with the Sort Mode field to configure the default column sort order.	Does not apply to Card charts. Default: 0
Display Mode	Configures the display mode	* Card: Card-like format * Empty: No visual elements Default: Card
Layout	Specifies how the containers flow within the page	* FlowHorizontal: Side-by-side display * FlowVertical: Top-to-bottom display
Alignment	Controls the alignment for placing the container	* Start * Stretch * End Default: Stretch
Size	Value of the units that are used to compute the size of a container	Any positive number. minimum: 0, default: 1
Size Units	Units that are used to compute the size of a container	* Pixels * Rem * GrowRatio Default: GrowRatio
Gap	The gap between containers or fields on a property card	Any positive number. minimum: 0, default: 1
Padding	Adjusts the padding inside of the container	Any positive number. minimum: 0, default: 0