How to use Charts, Ratings, Avatars, and Other Components

How to use Charts, Ratings, Avatars, and Other Components

Use charts, ratings, avatars, and other components to display data, represent users, show feedback, and create more detailed interface designs.

Before you start

  1. Make sure you have permission to edit the board and are in design editing mode.
  2. You can access these components from the Smart Components and Other Components sections in the Wireframe Library.

Available components

Visily provides several components for displaying data, representing users, showing ratings, and adding more detailed interface patterns to your designs.
  1. Charts. Use charts to present data and trends visually. Available chart types include:
    1. Column/Bar Chart: Compares values across different categories.
    2. Pie Chart: Shows how values contribute to a whole.
    3. Line Chart: Shows changes or trends over time.
  2. Rating. Use the Rating component to display a score or represent how users rate an item, service, or experience.
  3. Avatar. Use the Avatar component to represent a user, account, or profile with an image, initials, or placeholder.
  4. Tags. Use the Tag component to display short labels for categories, statuses, filters, or attributes.
  5. Other Components. These components provide additional interface patterns that extend beyond the standard Smart Components. Examples include: Number Input, Split Button, Chips, Search Box with Button, Password Input Field, and OTP Input Field.

Add a component

  1. Open the board where you want to add the component.
  2. Open Wireframe Library.
  3. Select the component you want to use from the Smart Components or Other Components section.
  4. Click the canvas to add it.
  5. Move, resize, or customize the component as needed.

Manage a Chart component

Select a chart to open its toolbar. The available actions depend on the selected chart type and may include:
  1. Style: Choose a preset style to quickly update the chart’s appearance.
  2. Edit data: Update the chart series and data values so the visualization reflects your actual content and design needs.
  3. Legend: Show, hide, or customize the chart legend.
  4. Edit style: Customize the chart colors, layer opacity, corner radius, and shadow.
  5. Axis and grid: Show, hide, or customize the chart axes and gridlines.
  6. Text style: Format the chart labels, values, legend, and other displayed text.
  7. Save as template: Save the chart and its settings as a reusable template.
  8. Export: Export the selected chart to image/PDF or to Figma.
  9. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

Info
When editing chart data, you can enter values manually, import data from a CSV file, or generate random sample data.

Manage a Rating component

Select the Rating component to open its toolbar. The available actions include:
  1. Style: Choose a preset style to quickly update the rating’s appearance.
  2. Size: Select a preset size or customize the component’s width and height.
  3. Color and opacity: Change the rating color and adjust its layer opacity.
  4. Save as template: Save the Rating component and its settings as a reusable template.
  5. Export: Export the selected Rating component to image/PDF or to Figma.
  6. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

  1. Add or remove stars: Click the + or − icon next to the component to increase or decrease the number of rating levels.
  2. Adjust the rating: Drag the arrow below the component to change the displayed rating.

Manage an Avatar component

Select the Avatar component to open its toolbar. The available actions include:
  1. Style: Choose how the avatar is displayed, such as an image, icon or a letter.
  2. Size: Select a preset size or customize the text size, width, height, and padding.
  3. Edit style: Customize the avatar color, layer opacity, border style, and shadow.
  4. Badge: Show or hide a status badge and choose a state such as active or inactive.
  5. Text style: Format the letter or initials when using the letter avatar style.
  6. Change image: Replace the displayed image when using the image avatar style.
  7. Save as template: Save the Avatar component and its settings as a reusable template.
  8. Export: Export the selected Avatar component to image/PDF or to Figma.
  9. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.


Manage Other Components

Other Components are pre-built combinations of basic elements and Smart Components. They help you add more detailed interface patterns without creating each part from scratch.
Select an Other Component to open its toolbar. You can manage it similarly to a container or the individual elements it is built from.

Note

  1. Use a chart type that matches the information you want to communicate. For example, use a line chart for trends and a pie chart for parts of a whole.
  2. Use avatars consistently to represent users or profiles across your design.
  3. If you want to edit each part of a component separately, select Break into basic elements.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to use Menus and Navigation Components

      Use menu and navigation components to organize links and help users move between screens, pages, or sections of an interface. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access menu ...

    • How to use Paste to replace

      Use Paste to replace when you want to replace an existing design element with another copied element while keeping it in the same position on the canvas. This is useful when you want to quickly swap content, update a design variation, or replace a ...

    • How to use Buttons and Form Controls

      Use buttons and form controls to represent actions, collect user input, and create realistic interface designs. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access buttons and form controls ...

    • How to use the Visily AI Chat Assistant to generate your design

      Meet the new agentic Visily AI, your smarter way to turn ideas into polished designs! With the Visily AI Chat Assistant, you can generate screens, components, diagrams, and images from prompts, plans, references, and design instructions. Even better, ...

    • How to use anchors

      Use anchors to control how an element behaves when its parent container is resized. Anchors help keep elements aligned, positioned, or resized consistently inside screens, containers, and groups. Before you start Make sure you have permission to edit ...