Configure Bar Chart

Overview

This article helps you configure Bar (vertical) chart using the components available in the WebApp Builder. This chart is ideal for comparing categorical data, tracking performance metrics across departments, or displaying results and ranking information.

Dataset Design Recommendations

• Ideal for grouped data.

• Requires two or three columns from the dataset, depending on whether one-level or two-level grouping need to be used.

  Note

  You can use the same chart dataset in a Grid component if you plan to modify or manipulate the data.

  The following fields configures the Bar chart for two-level groupings:

  • Primary or Category field allows you to group the first level of data within a dataset. This grouping is displayed along the x-axis. For example, Country.

  • Secondary or Label field allows you to group the second level of data within a dataset. This grouping is displayed as the legend. For example, FoodType.

  • Value field must be a column with a NUMERIC(precision, scale) data type in the dataset. This field’s values are displayed along the y-axis. For example, Weight.

• To configure the Bar chart with single (one-level) grouping, assign the Category and Label fields to the same grouped column. For example, Category Field = Label Field = FoodType.

• In general, the dataset should be designed in a way that the combination of Category and Label fields must have distinct records.

• You need to include an additional field in your dataset if you plan to bind the chart dataset to a grid or form component’s dataset. Refer to Data Binding in Charts for more information.

Bar Chart Example

Configuration Steps

1. On the Construct Preview’s home page, edit the required WebApp. The WebApp configuration page is displayed.

2. Click More Options (…) next to the required page or container node and select Add Chart > Add Bar Chart.

3. Click the Bar Chart node. The Details Pane is updated with the Bar Chart fields.

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

   Field Name	Description	Supported Values/Notes
   Name required	Name of the Bar 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.
   Category Field required	Select a field from the dataset that groups the data associated with a given bar on x-axis.	NA
   Label Field required	Select a field from the dataset used to render the label associated with a bar segment, which appears on Legends.	NA
   Value Field required	Select a field from the dataset used to render the numeric value associated with a bar segment on y-axis.	NA
   X-Axis Title	Text to display for the x-axis title.	Enter a text within length constraints. maxLength: 100
   Y-Axis Title	Text to display for the y-axis title.	Enter a text within length constraints. maxLength: 100
   Legend	Toggle this field to display a legend on the chart.	Selecting or deselecting a legend item will remove or add the corresponding data on the chart.
   Value Unit	Unit of measure that displays next to chart values.	Enter a name within length constraints. maxLength: 20
   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.	NA
   Columns > Sort Mode	Used with the Sort Priority field to configure the default column sort order:	Supported Values: None Ascending Descending
   Columns > Sort Priority	Used with the Sort Mode field to configure the default column sort order.	Default: 0
   Link to Page Name	Select the Page to navigate on click.	NA
   Open in New Tab	Enable this toggle to open the chart link in a new browser tab.	NA
   Link to Page Bindings > Name required	Note Click the Add button to add the required chart link to page bindings criteria. Specify a unique binding name for the page link	Enter a name for binding. maxLength: 256
   Link to Page Bindings > Target Column required	Specify the target column in the linked page	Enter target column name from your dataset. maxLength: 128
   Link to Page Bindings > Target Page Container Name	Specifies the container name in the linked page	Select the name of the grid or form container from the page you’ve selected.
   Link to Page Bindings > Source Data Record Field Value	Specifies the source column in the current page	Select source column name from your dataset.
   Link to Page Bindings > Fixed Value	Specifies the source value in the current page	Specify the value or the actual record of the source column. maxLength: 255
   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

5. Click the Save & Preview button to validate that the Bar chart is configured correctly.

Related Articles

• Build Assist

• Chart Types

• Data Binding in Charts