[en] Vertical Bar Chart

Veritran Docs

[en] Vertical Bar Chart

[en] 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.Visual Builder - Left Panel

Importante

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

Attributes

En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta Design, Actions y Advanced a continuación para obtener más información.Visual Builder - Right Panel

Design

En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.Design Tab

En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.

CSS Class	CSS o estilo invocado desde Style > Themes y aplicado al componente. Haz clic en el campo y selecciona un estilo en el menú desplegable. Sugerencia Puedes añadir más de un estilo.
Profile Option	Código aplicado en referencia al perfil de usuario de la app. Haz clic en el campo e introduce el código.
Visible	Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea.
Important For Accessibility	Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Texto de accesibilidad del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false.
Accessibility Text	Texto alternativo. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en la configuración de tu app.

En esta sección puedes configurar los atributos de tamaño y posición del componente. Consulta la tabla a continuación para obtener más información.

Position Type

[en] The default value is absolute.

Haz clic en la flecha y selecciona un tipo en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.

Absolute	Posición del componente determinada por los ejes X e Y.
Fixed	Este valor no está implementado.
Relative	Desplazamiento vertical y horizontal desde la posición original del componente.

[en] 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.

[en] Labels X	[en] 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.
[en] Labels Y	[en] 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.
[en] Values	[en] 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

En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.Actions Tab

[en] 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	Animación ejecutada inmediatamente después de cargar la pantalla.
On Call Effect	Animación ejecutada al invocarla a través de un mensaje.
On Exit Effect	Animación reproducida antes de cerrar una pantalla. Este efecto aún no se ha aplicado.

En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.Actions Tab

Advanced

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

Was this helpful?

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

[en] View	[en] Number of bars displayed in the x axis of the chart. Click the field and enter a number.
[en] Order	[en] 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.