Data Visualisation Standards

Data visualisation standards define the rules for representing data graphically across organisational reporting systems. This reference provides lookup tables for chart selection, colour specifications, accessibility requirements, and formatting conventions that apply to all dashboards, reports, and analytical outputs.

Chart Selection

Chart selection depends on the data structure and the analytical question. The following matrix maps data characteristics to appropriate chart types.

By Data Relationship

By Audience and Purpose

Chart Type Specifications

Colour Palettes

Colour palettes divide into three functional categories: sequential palettes represent ordered data from low to high, diverging palettes represent data with a meaningful centre point, and categorical palettes distinguish unrelated groups.

Sequential Palettes

Sequential palettes progress from light to dark (or low saturation to high saturation) to represent magnitude. Use these for metrics where higher values have consistent meaning across the dataset.

For continuous data requiring more than 5 steps, interpolate between the provided values. Most BI platforms provide interpolation functions; in Apache Superset, use the LINEAR colour interpolation mode.

Diverging Palettes

Diverging palettes extend outward from a neutral centre point. Use these when data has a meaningful midpoint: zero change, target value, or median. The centre colour should be neutral (white or light grey), with distinct hues extending in each direction.

When using diverging palettes, set the centre point explicitly rather than relying on automatic scaling. A target achievement palette centred on 100% ensures that 80% and 120% receive equal visual weight on opposite sides of the midpoint.

Categorical Palettes

Categorical palettes distinguish unrelated groups without implying order. Colours should be perceptually distinct while maintaining similar saturation and lightness to avoid visual hierarchy.

Beyond 10 categories, categorical palettes become difficult to distinguish. Group smaller categories into an “Other” category, use small multiples, or employ direct labelling instead of a legend.

Colour-Blind Safe Palettes

Approximately 8% of males and 0.5% of females have some form of colour vision deficiency. Red-green colour blindness (deuteranopia and protanopia) is most common. The following palettes remain distinguishable under common colour vision deficiencies.

When colour alone conveys meaning, provide a secondary encoding: pattern fills for bar charts, marker shapes for scatter plots, or direct labels. Dashboard filtering should not rely solely on colour-coded buttons.

Accessibility Requirements

Visualisations must meet WCAG 2.1 Level AA requirements. The following specifications ensure compliance.

Contrast Ratios

Verify contrast ratios using tools such as WebAIM Contrast Checker or browser developer tools. For programmatic checking in dashboards, the formula is:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour
      L2 is the relative luminance of the darker colour

Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B
(with R, G, B values linearised from sRGB)

Text Requirements

Use sans-serif fonts for all chart text. Recommended families: Inter, Source Sans Pro, Roboto, or system defaults (system-ui). Avoid condensed or light weights below 12px.

Keyboard and Screen Reader Support

Interactive visualisations require keyboard navigation and screen reader compatibility:

The hidden data table pattern provides screen reader users with access to underlying values. Implement as a visually hidden <table> element containing all data points, with <caption> repeating the chart title.

<div class="chart-container" role="img" aria-label="Monthly beneficiary registrations, January to December 2024">
  <div class="visually-hidden">
    <table>
      <caption>Monthly beneficiary registrations, January to December 2024</caption>
      <thead>
        <tr><th>Month</th><th>Registrations</th></tr>
      </thead>
      <tbody>
        <tr><td>January</td><td>1,245</td></tr>
        <!-- remaining rows -->
      </tbody>
    </table>
  </div>
  <!-- visible chart implementation -->
</div>

Typography and Labelling

Number Formatting

Apply consistent formatting within a single visualisation. Mixed formats (some values abbreviated, others not) impair comparison.

Label Placement

Direct labelling (placing values on or adjacent to data elements) eliminates the need for legends when category count is low. Prefer direct labelling for 4 or fewer series on line charts and for all bar charts where space permits.

Axis Conventions

Truncating the y-axis (starting above zero) is acceptable for line charts showing trends where the focus is on change rather than absolute magnitude. Include an axis break symbol (⫽) and note in the title or annotation when truncation occurs.

Legend and Annotation Standards

Legend Placement

Legends should appear within the chart container, not separated by whitespace. Maximum legend entries for a single chart: 10. Beyond this threshold, consider small multiples or a different encoding approach.

Annotation Types

Reference lines require labels. An unlabelled horizontal line at y=100 communicates nothing; label it “Target: 100” or “Baseline”.

Annotation Text

Annotation text explains what the audience should notice. Write annotations as complete thoughts:

Position annotations close to the data they reference, connected by a leader line if necessary. Avoid overlapping data elements; adjust placement or use callout boxes.

Table Design Standards

Data tables in dashboards and reports follow consistent formatting rules.

Structure

Numeric Columns

Conditional Formatting

Traffic light colour coding (red/yellow/green) alone fails accessibility requirements. Combine with shapes: circle for green/good, triangle for yellow/warning, square for red/critical. Alternatively, use symbols: ✓, !, ✗.

Map Visualisation Standards

Geographic visualisations require specific conventions for clarity and accuracy.

Choropleth Maps

Equal intervals work for normally distributed data. Quantiles ensure equal counts per class but can obscure magnitude differences. Natural breaks optimise for variance within classes; use for skewed distributions.

Point Maps

Proportional symbol scaling uses square root of the value to determine radius, ensuring perceived area scales linearly with value:

radius = base_radius × √(value / reference_value)

A value of 400 should appear twice the area of a value of 100, requiring a radius 2× larger (√4 = 2).

Basemap Selection

For humanitarian contexts, source administrative boundary data from the Common Operational Datasets (CODs) maintained by OCHA. These provide standardised P-codes required for interoperability with cluster information management systems.

Common Mistakes

Tool-Specific Implementation

Apache Superset

{
  "color_scheme": "custom_org_categorical",
  "custom_colors": ["#2E6B8A", "#8B4513", "#228B22", "#663399", "#DC143C", "#DAA520"],
  "label_colors": {},
  "shared_label_colors": {},
  "map_style": "mapbox://styles/mapbox/light-v10"
}

Configure organisation palettes in superset_config.py:

EXTRA_CATEGORICAL_COLOR_SCHEMES = [
    {
        "id": "org_categorical",
        "description": "Organisation standard categorical palette",
        "label": "Organisation Categorical",
        "colors": ["#2E6B8A", "#8B4513", "#228B22", "#663399", "#DC143C", "#DAA520"]
    }
]

EXTRA_SEQUENTIAL_COLOR_SCHEMES = [
    {
        "id": "org_blue_sequential",
        "description": "Organisation standard sequential palette",
        "label": "Organisation Blue Sequential",
        "colors": ["#E6F0F5", "#A3C4D9", "#5A9ABF", "#2E6B8A", "#0D3B54"]
    }
]

Power BI

Apply organisation palettes via theme JSON:

{
  "name": "Organisation Standard",
  "dataColors": ["#2E6B8A", "#8B4513", "#228B22", "#663399", "#DC143C", "#DAA520"],
  "background": "#FFFFFF",
  "foreground": "#333333",
  "tableAccent": "#2E6B8A",
  "visualStyles": {
    "*": {
      "*": {
        "labels": [{
          "fontFamily": "Inter, sans-serif",
          "fontSize": {"expr": {"Literal": {"Value": "11D"}}}
        }],
        "title": [{
          "fontFamily": "Inter, sans-serif",
          "fontSize": {"expr": {"Literal": {"Value": "16D"}}},
          "fontColor": {"solid": {"color": "#333333"}}
        }]
      }
    }
  }
}

Import via External Tools → Theme → Import from file, or embed in the .pbix file.

Tableau

Create organisation palette in Preferences.tps (located in My Tableau Repository):

<?xml version='1.0'?>
<workbook>
  <preferences>
    <color-palette name="Organisation Categorical" type="regular">
      <color>#2E6B8A</color>
      <color>#8B4513</color>
      <color>#228B22</color>
      <color>#663399</color>
      <color>#DC143C</color>
      <color>#DAA520</color>
    </color-palette>
    <color-palette name="Organisation Blue Sequential" type="ordered-sequential">
      <color>#E6F0F5</color>
      <color>#A3C4D9</color>
      <color>#5A9ABF</color>
      <color>#2E6B8A</color>
      <color>#0D3B54</color>
    </color-palette>
    <color-palette name="Organisation Diverging" type="ordered-diverging">
      <color>#B22222</color>
      <color>#DC6464</color>
      <color>#F0F0F0</color>
      <color>#6495ED</color>
      <color>#1E3A8A</color>
    </color-palette>
  </preferences>
</workbook>

For Tableau Server/Cloud, publish palettes via Site Settings → Extensions → Customize.

Metabase

Configure colours in Admin → Settings → Appearance:

Brand color: #2E6B8A
Chart colors: #2E6B8A, #8B4513, #228B22, #663399, #DC143C, #DAA520

Metabase does not support custom sequential palettes in the interface. For advanced customisation, modify frontend/src/metabase/lib/colors.js in a self-hosted deployment.

See Also

• Dashboard Design
• BI Platform Implementation
• Accessibility Standards
• Humanitarian Reporting Standards