Vega Chart Component

Input Behavior            

Controls how end-users interact with the component. Choose from the following options:Enable User Input: Allow end-users to view and enter data in this field.Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

Title            

Displays as a header above the chart in Express View.

Subtitle        

Enter a value to display as a sub-header below the Title value in Express View.

Accessible Label            

Screen readers read this value to end-users in Express View. This value corresponds to the aria-label in the DOM.

X Axis Title            

Displays next to the chart's horizontal axis. In Express View, this value displays below the chart's graphics.

Y Axis Title            

Displays next to the chart's vertical axis. In Express View, this value displays to the left the chart's graphics.

Hidden

Set to (ON) to hide the chart in Express View.

By default, this setting is (OFF).

Hide Legend

Set to (ON) to hide the chart's key values in Express View.

Vertical Alignment        

Select the vertical alignment location for the legend element. Values include:

• Top: Displays the key values above the chart graphics.

• Middle: Displays keys values in the vertical-middle of the chart graphics.

• Bottom: Displays the key values below the chart graphics.

Alignment            

Select the horizontal alignment for the legend element. Values include:

• Left: Displays the key values to the left of the chart graphics.

• Middle: Displays keys values in the horizontal-middle of the chart graphics.

• Right: Displays the key values to the right of the chart graphics.

ID            

Enter a reference ID to target the row's chart data.

Type        

This field lets you set the chart type to display your data. Below are the available chart types:

• Area: Best used to visualize trends over time, specifically to highlight the magnitude of change and compare multiple data series.

• Bar: Effective for comparison of at least one data point. Bar charts show data as a bar with the height of the bar proportional to the values being plotted. Typically, a bar chart plots the variable value horizontally, and the fixed dimension vertically.

• Column: Effective for comparison of at least one data point. Column charts show data as a rectangle with the height of the rectangle proportional to the values being plotted. Typically, a column chart plots the variable value vertically, and the fixed dimension horizontally.

• Line: A line chart displays information as a series of data points connected by straight line segments. These charts are typically used to show information that changes over time.

• Pie: A pie chart is a circular-type chart, divided into slices to show numeric proportion. In a pie chart, the arc length of each slice relates to the quantity the slice represents. When used in conjunction with the Inner Size setting, you can make your pie chart into a doughnut chart.

• Scatter: A scatter chart uses dots to represent values for two different variables. The position of each dot in the horizontal and vertical axis shows values for the data point. You'll typically use these charts to show relationships between variables.

Label            

This value represents the data set's title in the legend. For example, if your graph displays a count of numbers, enter Number. If you're displaying a percentage of businesses involved in an industry, enter Businesses.

Reference Key            

Enter the Property ID of the data source. An example data source could be a Data Table component containing the x and y values.

Reference Property            

Enter the component state property value to reference.

X Property            

Enter the x-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled x that represents x-axis data, then enter x.

Y Property            

Enter the y-property column value contained in the Reference Key. For example, if your Data Table component has a column labeled y that represents y-axis data, then enter y.

Color            

Manipulates the color of an input category if the input data array contains colors. Your color data can be in word or HEX form. For example, this text is colored using the following hex: #fb7e14.

Stack Group            

Stack or separate data sets based on chart type. For example, if two data sets use the Bar chart type, labeling data set one as A and data set two as B displays each data set as a bar in the graph. Labeling data set one and two as A stacks the bars in the graph.