Bar Charts

When to use a bar chart

Use a bar chart when you want to:

• Compare values across discrete categories (e.g. cities, property types, regions)

• Highlight differences in magnitude

• Show rankings or distributions clearly

Real estate example:

• Average price per square meter by city

• Number of properties by property type (apartment, house, villa)

Chart types and variants

Bar charts support two variants:

Simple bar chart

• Displays one metric per category

• Best for straightforward comparisons

Example:

• Average property price per city

Stacked bar chart

• Displays multiple values stacked within each category

• Shows both total and composition

Example:

• Property listings per city split by property type

Important note on floating bar charts

The subtype “range” is not part of the standard bar chart.

• It is implemented as a separate chart type called floating bar chart

• Use floating bar charts when you need to show value ranges (e.g. price ranges)

You can read about the dedicated floating bar chart guideline for detailed instructions.

Orientation

Bar charts can be displayed in two orientations:

Vertical

• Categories are shown on the x-axis

• Values grow upwards on the y-axis

• Best for shorter category names and standard comparisons

Horizontal

• Categories are shown on the y-axis

• Values grow horizontally

• Best for:

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

  • Large numbers of categories

Core configuration

Dimension (x-axis)

Defines the main categories of the chart.

• Examples:

  • City (Berlin, Hamburg, Munich)

  • Property type (Apartment, House, Villa)

Breakdown dimension

Adds a secondary grouping within each category, enabling comparison between subgroups.

Available for both simple and stacked bar charts.

Examples:

• Property type within each city

• Sale vs. rent within each region

Metric (y-axis)

Defines the numerical value being measured.

• Examples:

  • Average price per m²

  • Number of listings

  • Total sales volume

Additional configuration options

These options can be activated via checkboxes.

Display legend

• Shows category or breakdown labels

• Recommended for stacked charts

Show data labels

• Displays values directly on bars

• Useful for:

  • Small datasets

  • Highlighting exact values

Important:

• Only activate when the values fit inside the bar without overlapping or reducing readability

• Avoid using data labels when bars are too small or too dense

• Bar labels are only displayed on desktop devices. This is because they would be too small to be displayed on mobile devices.

Show title

• Displays a chart title above the visualization

• Should clearly describe what the chart shows

Good title example:

• Average property prices 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:

  • Values shown inside the bars (data labels)

  • Values shown in tooltips

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 clear and meaningful category names

• Keep the number of categories manageable (ideally 5–10)

• Use horizontal orientation for long labels

• Use stacked charts only when composition matters

• Add a descriptive title and, if needed, a footnote

Don’ts

• Do not overload the chart with too many categories

• Do not use stacked bars when comparison between segments is critical (harder to read)

• Do not omit labels if values are important for interpretation

• Do not use unclear or generic titles (e.g. “Chart 1”)

Example configurations

Example 1: Simple vertical bar chart

• Variant: Simple

• Orientation: Vertical

• Dimension: City

• Metric: Average price per m²

Use case: Compare property prices across cities

Example 2: Stacked or grouped bar chart

• Variant: Stacked

• Orientation: Vertical

• Dimension: City

• Breakdown dimension: Property type

• Metric: Number of listings

Use case: Show distribution of property types per city

When to use simple bar charts with breakdown

Use grouped bars when:

• You want to compare values across breakdown categories clearly
  Example: Apartment vs. house prices per city

• Precise comparison matters
  Users should be able to easily see which category is higher or lower

• Differences are subtle
  Small variations get lost in stacked charts

• There is no meaningful “total”
  The sum of categories is not relevant (e.g. average price)

When stacked bar charts are the wrong choice

Avoid stacked bars when:

• The total value is not important

• You need to compare individual segments across groups

• The breakdown dimension has similar magnitudes, making segments hard to read

When stacked bar charts are better

Use stacked bars instead when:

• You want to show how a total is composed

• The total per dimension is meaningful
  Example: Total listings split by property type

• You want to highlight distribution or share

Simple rule for editors

• If the question is “Which is higher?” → use grouped bars

• If the question is “What makes up the total?” → use stacked bars