Floating Bar Charts

When to use a floating bar chart

Use a floating bar chart when you want to:

• Show ranges between two values (min and max)

• Compare price spans across categories

• Highlight variability instead of exact values

Real estate examples:

• Price ranges per square meter by city

• Rental price ranges by district

• Property price ranges by property type

Relation to bar charts

Floating bar charts are closely related to standard bar charts but differ in one key aspect:

• Standard bar charts show a single value per category

• Floating bar charts show a range (min to max)

For standard comparisons (e.g. average price), use a regular bar chart.
For ranges, use a floating bar chart.

Orientation

Floating bar charts support two orientations:

Vertical

• Categories are shown on the x-axis

• Ranges extend vertically

Best for:

• Standard comparisons

• Fewer categories with shorter labels

Horizontal

• Categories are shown on the y-axis

• Ranges extend horizontally

Best for:

• Long category names (e.g. district names)

• Larger datasets

Core configuration

Dimension (x-axis)

Defines the categories for which ranges are displayed.

• Examples:

  • City (Berlin, Hamburg, Munich)

  • District

  • Property type

Metric (Min)

Defines the lower bound of the range.

• Examples:

  • Minimum price per m²

  • Lowest rental price

Metric (Max)

Defines the upper bound of the range.

• Examples:

  • Maximum price per m²

  • Highest rental price

Additional configuration options

These options can be activated via checkboxes.

Display legend

• Shows labels for the chart

• Typically less important than in stacked charts, but useful if additional context is needed

Show data labels

• Displays values directly on the bars (min and max)

Useful for:

• Small datasets

• Highlighting exact price ranges

Important:

• Only activate when values fit clearly within or alongside the bars

• Avoid when labels overlap or reduce readability

Show title

• Displays a chart title above the visualization

• Should clearly describe the range being shown

Good title example:

• Price ranges per square meter in major German cities

Compact numbers

• Shortens large numbers (e.g. 1,200,000 → 1.2M)

Recommended for:

• Large values on axes to improve readability

Important:

• Applies only to values displayed on the x-axis or y-axis

• Does not affect:

  • Data labels

  • Tooltip values

Footnote

Provides additional context below the chart.

Supports:

• Bold formatting

• Links

Example:

• Data source: Engel & Völkers Market Report 2025

• Methodology: <link to explanation page>

Best practices

Do’s

• Use floating bar charts specifically for ranges (min–max)

• Ensure min and max values are clearly defined and accurate

• Use clear category labels (e.g. city or district names)

• Add a descriptive title explaining the range

• Use horizontal orientation for long labels

Don’ts

• Do not use floating bar charts for single values (use bar charts instead)

• Do not mix unrelated metrics for min and max

• Do not overload the chart with too many categories

• Do not enable data labels if they overlap or clutter the chart

Example configuration

Example: Price ranges by city

• Orientation: Vertical

• Dimension: City

• Metric (Min): Minimum price per m²

• Metric (Max): Maximum price per m²

Use case: Compare how wide the price ranges are across cities

This guideline should be used when visualizing value ranges. For single-value comparisons, refer to the bar chart guideline.