Vertical Bar Chart

Veritran Docs

Vertical Bar Chart

The Vertical Bar Chart component is a type of graph that displays data using vertical bars. To insert a Vertical Bar Chart component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Vertical Bar Chart component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Building Tabs and Left Panel

Important

The Vertical Bar Chart component can be used in web and mobile apps (both for Android and iOS devices).

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.Design

In this section, you can configure basic attributes of the component. Refer to the table below to learn more.

CSS Class	CSS or style invoked from Global Design > Themes and applied to the component. Click the field and select a style from the drop-down menu. Tip You can add more than one style.
Profile Option	Code applied in reference to the app user profile. Click the field and enter the code.
Visible	Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible.
Important For Accessibility	Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false.
Accessibility Text	Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.TranslationsSettings

In this section, you define whether the labels and values in the bar chart must be displayed on screen. Refer to the table below to learn more.

Labels X	Defines whether the X axis label must be displayed on screen. Click the arrow and select an option from the drop-down menu. Choose true to show the X label or false to hide the X label.
Labels Y	Defines whether the Y axis label must be displayed on screen. Click the arrow and select an option from the drop-down menu. Choose true to show the Y label or false to hide the Y label.
Values	Defines whether the values representing each bar must be displayed on screen. Click the arrow and select an option from the drop-down menu. Choose true to show the values or false to hide the values.

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.Actions

In this section, you can set different effects on the component's attributes and the animations through which the effects take place. For this component, you can only set specific effects to occur upon a certain event. Refer to the table below to learn more.

On Load Effect	Animation executed immediately after the screen loads.
On Call Effect	Animation executed upon invoking it through a message.
On Exit Effect	Animation played before closing a screen. This effect has not been implemented yet.

In all cases, you can set the animation's code or configure it with the Animation Editor. To configure the animation, click </> and then click on the text field to start typing the code or click the vertical three-dot icon to open the Animation Editor. Refer to Actions to learn how to use the editor.Actions

Advanced

There are no attributes available for configuration in the Advanced tab for the Vertical Bar Chart component.

In this section:

Was this helpful?

Would you like to provide feedback? Just click here to suggest edits.

View	Number of bars displayed in the x axis of the chart. Click the field and enter a number.
Order	Order of the bars according to their value, retrieved from the array. Click the field and select an option from the drop-down menu. Choose Low to high to arrange bars in descending order or High to low to arrange bars in ascending order.

Veritran Docs

Vertical Bar Chart

Important

Attributes

Design

Tip

Actions

Advanced

Search results