Inforiver
Analytics+
Analytics+
  • Introduction to Analytics+
    • Installing Analytics+
      • Install for yourself
      • Installing from AppSource
      • Installing for your organization
    • Licensing and manual renewal
  • Working with Analytics+
    • 1. Navigating the Analytics+ toolbar
      • Chart toolbar
      • Card toolbar
      • Table toolbar
    • 2. Data Management
      • Advanced pivot
      • Adding calculated measures
    • 3. Charts
      • 3.1. Charts - getting started
      • 3.2. Quick options - charts
        • X-axis customizations
        • Y-axis customizations
      • 3.3. Configure measures for charts
      • 3.4. Configure dimensions for charts
      • 3.5. Chart discoverability
      • 3.6. Data label customizations
      • 3.7. Deviation
      • 3.8. Display settings for charts
        • Charts - canvas settings
        • Charts - axis settings
        • Charts - number settings
        • Charts - legend settings
        • Charts - other settings
          • Charts - tooltip settings
    • 5. Cards
      • 5.1. Cards - getting started
      • 5.2. Quick options-cards
        • KPI customizations
        • Chart customizations
      • 5.3. Configure measures for cards
      • 5.4. Configure dimensions for cards
      • 5.5. Insight charts
      • 5.6. Variance customizations
      • 5.7. KPI containers
        • Working with Groups
        • Working with Flex components
      • 5.8. Inserting formulas & text
      • 5.9. Card customizations
      • 5.10. Display settings for cards
        • Cards - canvas settings
        • Cards - number settings
        • Cards - legend settings
        • Cards - axis settings
        • Cards - other settings
          • Cards - tooltip settings
    • 6. Tables
      • 6.1. Tables - getting started
      • 6.2. Quick options - tables
      • 6.3. Configure measures for tables
      • 6.4. Configure dimensions for tables
      • 6.5. Formatting data
      • 6.6. Number formatting
      • 6.7. Inline charts
      • 6.8. Blend measures
      • 6.9. Row gripper options
      • 6.10. Display settings for tables
        • Tables - canvas settings
        • Tables - number settings
        • Tables - other settings
          • Tables - tooltip settings
    • 7. Trellis customizations
      • Charts trellis layout
      • Cards trellis layout
      • Tables trellis layout
    • 8. Customize measures
      • Charts measure series
      • Cards measure series
      • Tables measure series
    • 9. Splitting and grouping measures
      • Splitting and grouping: charts
      • Splitting and grouping: cards
      • Splitting and grouping: tables
    • 10. Conditional formatting
      • One-click rules
        • One click rules for charts
        • One click rules for cards
        • One click rules for tables
      • Configuring rules
        • Configuring rules for charts
        • Configuring rules for cards
        • Configuring rules for tables
        • Variable conditional formatting rules
        • Applying conditional formatting rules
      • Setting color scales
      • Managing rules
    • 11. Sort & Reorder data
      • Sorting data
      • Advanced sorting
      • Reordering data
    • 12. Ranking data - TopN
      • Ranking for charts
      • Ranking for cards
      • Ranking for tables
      • Dynamic ranking with numeric parameters
    • 13. Adding notes
      • Notes for charts
      • Notes for tables
    • 14. Data selection
    • 15. Working with hierarchies
      • Hierarchies in charts
      • Hierarchies in cards
      • Hierarchies in tables
      • Unbalanced hierarchies
      • Single child hierarchies
    • 16. Summary tables
    • 17. Backup and restore
    • 18. Context awareness
    • 19. Image support
      • Images in cards
      • Images in tables
    • 20. Analytics
      • Reference line
      • Reference band
      • Error bar
      • Trend line
      • Additional series
    • 21. Keyboard shortcuts
    • 22. Reading view access
    • 23. Row aggregation
  • Storyboard
    • Element customizations
    • Board customizations
    • Working with textboxes
    • Uploading images
    • Using shapes
    • Inserting slicers
    • Element interactions
    • Layers
    • Navigation
      • Play axis
    • Annotations
  • Gantt chart
    • Gantt: Canvas settings
      • Gantt: General settings
      • Gantt: Column settings
      • Gantt: Grid settings
      • Gantt: Timeline settings
    • Gantt milestones
    • Gantt: Data label settings
    • Gantt: Conditional formatting
    • Gantt: Web URLs
    • Gantt resource
    • Gantt: Zoom levels
  • Quick charts
    • Waterfall charts
    • Marimekko
    • Column/Bar charts
    • Bullet charts
    • Area charts
    • Pie charts
    • Treemap charts
    • Radar/Polar charts
    • Funnel charts
    • Sunburst charts
    • Bubble charts
    • Boxplots
    • Histogram
    • Gauge
    • Storytelling charts
      • Range charts
      • Ribbon chart
      • Tornado chart
      • Multi-variate charts
      • Sankey charts
    • Combo charts
  • Release notes
    • Analytics+ April 2025 update - Release 4.7
    • Analytics+ March 2025 update - Release 4.6
    • Analytics+ January 2025 update - Release 4.5.
    • Analytics+ January 2025 update - Release 4.3
    • Analytics+ November 2024 update -Release 4.2
Powered by GitBook
On this page
  • 1. Fit and fill options for individual elements
  • 2. Container Flex configuration
  1. Working with Analytics+
  2. 5. Cards
  3. 5.7. KPI containers

Working with Flex components

PreviousWorking with GroupsNext5.8. Inserting formulas & text

Last updated 5 months ago

With Analytics+, you can create stunning multi-element dashboards. When you work with Flex positioning, you only need to choose the direction (horizontal or vertical), and Analytics+ will automatically handle the alignment and positioning with consistent gap and fill options.

Let's look at the options available to customize Flex containers.

1. Fit and fill options for individual elements

When you combine multiple elements into a flex container, you can choose whether the element should have a fixed size and position or whether the element should fill the available canvas space.

The images below depict the difference between the Fixed and Fill resizing options.

2. Container Flex configuration

Click on the Flex element to customize. The Flex configuration side pane has 2 tabs:

2.1. Properties

  1. Position: The X and Y coordinates where the flex container should be placed.

  2. Size: The height and width of the container.

Note: You can also click and drag the container to re-position or drag the the corners/edges to resize.

2.2. Layout:

1. Direction

Arrange elements vertically or horizontally. New elements will also be inserted based on the direction chosen. For example, when arranging elements vertically, new containers are automatically added at the bottom. Similarly, if you arrange flex elements horizontally, new containers will be added to the left.

2. Gap

Space between each element in a flex container. The gap will be set horizontally or vertically depending on the direction in which elements are aligned.

By default, the gap width is set to fixed. Enable the toggle for Auto width - each element is evenly spaced in the container.

3. Align

Set the vertical and horizontal positioning of elements within the flex container. Some sample alignments are shown below:

4. Padding

Set the spacing between the flex container and the elements. You can set uniform padding with the All option or Custom padding for each side.

Fixed resizing
Fill resizing
Container size and position
Arrangement direction
Gap between elements in a container
Auto gap
Top left
Center-Center
Bottom right
Container padding