Hierarchy

A template for grouping data and visualising it hierarchically

Updated 16 days ago to v6.2.0 by Flourish team

How to use this template

This template is great for summarising your data across different categories. You can think of it as kind of a visual pivot table. It includes four visualisation types that you can quickly switch between: a treemap (subdivided rectangles), packed circles, a radial partition chart (like a multi-ring pie chart) or a stacked bar chart.

Data requirements

The data should be in 'long-form' i.e. each row represents a single data-point and each column represents a variable. For example:

Film                     Genre      Studio         Worldwide Gross ($m)
27 Dresses               Comedy     Fox            160.31
(500) Days of Summer     Comedy     Fox            60.72
A Dangerous Method       Drama      Independent    8.97
A Serious Man            Drama      Universal      30.68
Across the Universe      Romance    Independent    29.37
Beginners                Comedy     Independent    14.31
Dear John                Drama      Sony           114.97

Usage

Columns can be seen as either categorical (e.g. Genre and Studio) or numeric (e.g. Worldwide Gross).

Choose:

  • categorical columns to nest your data by
  • numeric columns to size the rectangles by

For example, if we wanted to know which studio took the most revenue we could nest by Studio and size by Worldwide Gross.

If we wanted to further break down each studio into genres, we could nest by Studio and Genre.

If 2 or more columns are chosen to nest you'll be able to zoom into a category by clicking. Zoom out by clicking the triangle that appears in the top right of the chart.

Tips

  • You don't have to choose a column to size by. If you do not, the shapes will be sized by the count of data points.
  • Click on the popup to freeze it. Click on it again to unfreeze.
  • You can choose the number of visible hierarchy levels. Try varying this within a story to gradually break down categories into sub-categories.
  • You can also add a filter menu. To do this, set the "Filter" column setting in the data area.

Credits

Created by Peter Cook and the Flourish team.

This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.

template: @flourish/hierarchy

version: 6

Template data

There are two different formats in which you can supply data to this template. Which one will be more convenient for you likely depends on the source of your data, as described below.

Array of objects with arbitrary keys, and a bindings object

This format is most likely useful when you have data from an external source, such as CSV data loaded from d3-dsv. You should supply this attached to the opts.data, which might look like:

    {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }

... but with the keys being the column headers from your source data instead. To tell the API how these values from each column should be associated with the keys that the template is expecting, you must also supply an object attached to opts.bindings. (The meanings of the keys in the bindings object are documented below.) The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@flourish/hierarchy",
    version: "6",
    bindings: {
        data: {
            
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

All possible bindings that you can supply are shown in this example:

{
    template: "@flourish/hierarchy",
    version: "6",
    bindings: {
        data: {
            nest_columns: ["DataHeader1", "DataHeader2", ...],
            size_columns: ["DataHeader3", "DataHeader4", ...],
            filter: "DataHeader5"
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

(As before, the keys containing "Header" would be replaced by column names from your data source.)

Array of objects with template-defined keys

There is an alternative format you can use, which is likely to be easier to use if your data is not from a spreadsheet source. With this alternative format you supply your data to the template as an array of objects, attached to opts.data, where the keys must be those used by the template, as documented below. In this case there is no need to supply a bindings object, since the key names are already those expected by the template. The required properties in the data object are as follows (scroll down for a description of what each property is):

{
template: "@flourish/hierarchy",
version: "6",
data: {
    data: [
        {
            nest_columns: [...],
            size_columns: [...]
        },
        ...
    ]
},
...
}

And the full list of all possible properties is as follows:

{
template: "@flourish/hierarchy",
version: "6",
data: {
    data: [
        {
            nest_columns: [...],
            size_columns: [...],
            filter: ...
        },
        ...
    ]
},
...
}

Meanings of the template data keys:

  • data.nest_columns: Choose categorical columns to nest by (e.g. C,B,A). The data is nested in the same order as the chosen columns. For example if the chosen columns are 'C,B' the data is first grouped by Lead Studio and then by Genre.
  • data.size_columns: (Optional) Choose numeric columns to size by (e.g. Worldwide Gross). If more than 1 is chosen, a dropdown will appear in the visualisation which lets the user choose. Rows with negative values are excluded.
  • data.filter: (Optional) Choose a categorical column to filter by. A dropdown will appear in the visualisation.

Template settings

Options for opts.state.

Hierarchy

hierarchy_layout string

Layout. Choose between a treemap, packed circles, radial sunburst, stacked bar or radial tree chart

Allowed values:

  • treemap (Treemap)
  • circlePacking (Circles)
  • sunburst (Sunburst)
  • bar (Bar)
  • radialTree (Radial)

num_of_visible_levels number

Visible levels. How many hierarchy levels are visible at once?

Min: 1

sort_by string

Sort by. Sort cells by value or by name.

Allowed values:

  • value (Value)
  • name (Name)

aggregation_type string

Size cells by.

Allowed values:

  • Sum (Sum)
  • Count (Count)

auto_set_height boolean

Auto set height. Automatically determine optimal container height. For example circle packing, sunburst and radial tree will fill width.

Labels

min_label_size number

Minimum label size. Maximum label size (relative to root font size)

Min: 0.25

max_label_size number

Maximum label size. Maximum label size (relative to root font size)

Min: 0.25

multi_line_labels boolean

Multi line labels. Display long labels across multiple lines where possible. Currently supported in treemap and circle packing.

upper_case_labels boolean

Upper case labels. Display labels in upper case

label_weight string

Label font weight.

Allowed values:

  • medium (Medium)
  • thick (Thick)

label_padding number

Label padding. Padding (relative to root font size) between label and border

Max: 2

Treemap

treemap_type string

Layout mode.

Allowed values:

  • treemapBinary (Default)
  • treemapResquarify (Aspect ratio)
  • treemapSlice (Horizontal)
  • treemapDice (Vertical)
  • treemapSliceDice (Horizontal then Vertical)

treemap_ratio number

Target. The target ratio between width and height, where 1 is sqaure and a large number is a tall or wide rectangle

Min: 1

cellPadding string

Padding. Add padding between hierarchy levels

Allowed values:

  • low (Thin)
  • medium (Medium)
  • high (Thick)

Sunburst

sunburst_inner_radius number

Inner radius. As a % of total radius

sunburst_depth_fade number

Depth fade. How quickly the segments fade with hierachical depth. (Use 1 for no fade.)

Min: 0.25

Max: 1

sunburst_labelling string

Labels. How the labels should be oriented

Allowed values:

  • auto (Auto)
  • radial (Radial)
  • circular (Circular)

Bar

bar_bar_thickness number

Bar thickness. Bar thickness in pixels

Min: 10

Max: 100

bar_bar_padding number

Bar padding. Distance between bars in pixels

Max: 50

bar_axis_label_space number

Space for axis labels. How wide the axis label area is

bar_value_label_space number

Space for value labels.

bar_show_value_label boolean

Show value label.

bar_max_value number

Maximum value. The maximum value represented by bar length (leave blank for auto-scaling)

Radial Tree

radial_tree_outer_radius number

Outer radius (%). Radius of outer nodes (as a percent of the container size)

Max: 100

radial_tree_bar_length number

Bar length (%). Bar length (as a percent of the container size)

Max: 100

radial_tree_bar_width number

Bar width (pixels). Bar width in pixels

Max: 100

radial_tree_rotation number

Rotation (degrees). Rotates the whole tree

Min: -180

Max: 180

radial_tree_show_values boolean

Show value labels.

Colours

color.scale_type string

Scale type.

Allowed values:

  • categorical (Categorical)
  • sequential (Sequential)
  • diverging (Diverging)

color.categorical_type string

Allowed values:

  • palette (Palette)
  • generated (Generated)

color.categorical_palette colors

Palette.

color.categorical_extend boolean

Auto-extend. Automatically generate additional colours when needed to avoid the palette colours being used more than once.

color.categorical_seed_color color

Seed color. Initial color in generated sequence (avoid shades of grey).

color.categorical_rotation_angle number

Hue rotation angle. Angle, in degrees, between one generated colour and the next. The default value, ~360/(Golden ratio), ensures adjacent hues are not too similar.

Max: 360

color.categorical_color_space string

Allowed values:

  • hcl (HCL)
  • hsl (HSL)

color.categorical_custom_palette text

Custom overrides. Type the name of the entity whose colour you want to set, a colon and then a colour (using a name, hex-code or rgb declaration). Multiple colours can be set using multiple lines. For example:<br /><hr />Party 1: red<br />Party 2: #4455AA<br />Party 3: rgb(30,168,26)

color.sequential_palette string

Palette.

Allowed values:

  • Oranges
  • Reds
  • Blues
  • Greens
  • Greys
  • Purples
  • Viridis
  • Inferno
  • Magma
  • Plasma
  • Warm
  • Cool
  • CubehelixDefault (Cubehelix)
  • BuGn (Blue/Green)
  • BuPu (Blue/Purple)
  • GnBu (Green/Blue)
  • OrRd (Orange/Red)
  • PuBuGn (Purple/Blue/Green)
  • PuBu (Purple/Blue)
  • PuRd (Purple/Red)
  • RdPu (Red/Purple)
  • YlGnBu (Yellow/Blue/Green)
  • YlGn (Yellow/Green)
  • YlOrBr (Yellow/Orange/Brown)
  • YlOrRd (Yellow/Orange/Red)
  • Carrots
  • Custom

color.sequential_custom_min color

Minimum color.

color.sequential_custom_max color

Maximum color.

color.sequential_color_space string

Allowed values:

  • rgb (RGB)
  • lab (LAB)
  • hcl (HCL)
  • hsl (HSL)

color.sequential_reverse boolean

Reverse scale.

color.diverging_palette string

Palette.

Allowed values:

  • RdBu (Red/Blue)
  • RdYlGn (Red/Yellow/Green)
  • PiYG (Pink/Yellow/Green)
  • BrBG (Brown/Blue/Green)
  • PRGn (Purple/Red/Green)
  • PuOr (Purple/Orange)
  • RdGy (Red/Grey)
  • RdYlBu (Red/Yellow/Blue)
  • Spectral
  • Custom

color.diverging_custom_min color

Minimum color.

color.diverging_custom_mid color

Midpoint color.

color.diverging_custom_max color

Maximum color.

color.diverging_color_space string

Allowed values:

  • rgb (RGB)
  • lab (LAB)
  • hcl (HCL)
  • hsl (HSL)

color.diverging_reverse boolean

Reverse scale.

zoom_out_button_color color

Button colour.

zoom_out_arrow_color color

Arrow colour.

label_color color

Coloured links. Use coloured links

Radial tree link colour.

Popups

popup.show_popups boolean

Popups.

Allowed values:

  • true (Enabled)
  • false (Disabled)

popup.is_custom boolean

Popup contents.

Allowed values:

  • false (Auto)
  • true (Custom content)

popup.custom_template text

Popup content. The text to appear in the popup. You can use {{column_name}} to add a value from your data. It must be in a selected column, but you can add columns to “Metadata” if you just want to include them for use in the popup. Advanced users can include HTML to apply layouts, formatting, images, etc.

popup.show_pointer boolean

Pointer.

popup.show_shadow boolean

Shadow.

popup.style_popups boolean

Custom styling.

popup.text_color color

Text colour.

popup.align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)

popup.font_size number

Font size.

Min: 1

popup.fill_color color

Fill colour.

popup.opacity number

Fill opacity.

Max: 1

popup.padding number

Padding.

popup.border_radius number

Radius. Corner radius of popup

Mode.

Allowed values:

  • false (Auto)
  • true (Custom)

Title separator.

Title. Popup title (leave blank to show breadcrumb)

number_formatter.prefix string

Prefix. Text to place in front of number

number_formatter.suffix string

Suffix. Text to place after number

number_formatter.n_dec number

Decimal places. Use negative integers to round to positive powers of ten (eg -2 rounds to the nearest 100)

Min: -10

Max: 10

number_formatter.strip_zeros boolean

Remove trailing zeros.

number_formatter.strip_separator boolean

Hide thousands separator below 10,000. Turn off if you want four-digit numbers to include a separator, e.g. “1,234” rather than “1234”.

number_formatter.transform_labels boolean

Multiply/divide values.

number_formatter.transform string

Allowed values:

  • multiply (Multiply by)
  • divide (Divide by)
  • exponentiate (×10 to the power of)

number_formatter.multiply_divide_constant number

number_formatter.exponentiate_constant number

Controls

controls_padding number

Padding.

filter_control.type string

Data type.

Allowed values:

  • categorical (Categories)
  • temporal (Dates/times)
  • numeric (Numbers)

filter_control.temporal_format string

Date/time format in data. The date/time format in your data sheet. Used only to sort the data, if required. If your format isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

  • %Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
  • %Y-%m-%d (1986-01-28)
  • %m/%d/%Y (01/28/1986)
  • %d-%b-%y (28-Jan-86)
  • %m/%Y (01/1986)
  • %b %Y (Jan 1986)
  • %B %d (January 28)
  • %d %b (28 Jan)
  • %Y (1986)
  • %B (January)
  • %b (Jan)
  • %A (Tuesday)
  • %a (Tue)
  • %X (11:39:13)
  • %H:%M %p (11:39 AM)
  • %H:%M (11:39)

filter_control.sort boolean

Sort filter menu.

filter_control.control string

Filter Control.

Allowed values:

  • auto (Auto)
  • dropdown (Dropdown menu)
  • grouped-buttons (Button group)

filter_control.width number

Filter menu width.

Min: 150

filter_control.play_button boolean

Include play button.

filter_control.step_time number

Time between steps when playing. Measured in seconds, positive values move the slider left to right, negative values move the slider right to left.

filter_control.loop boolean

Loop on play.

filter_control.restart_pause number

Pause before loop restarts. Measured in seconds and in addition to the regular step time displayed above.

filter_control.dropdown_icon_color color

Filter icon color.

filter_control.slider_handle_color color

Handle and button color.

filter_control.slider_track_color color

Track and label color.

filter_include_all boolean

Include "All" in filter.

filter_all_label string

Filter All label.

size_by_control.type string

Data type.

Allowed values:

  • categorical (Categories)
  • temporal (Dates/times)
  • numeric (Numbers)

size_by_control.temporal_format string

Date/time format in data. The date/time format in your data sheet. Used only to sort the data, if required. If your format isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

  • %Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
  • %Y-%m-%d (1986-01-28)
  • %m/%d/%Y (01/28/1986)
  • %d-%b-%y (28-Jan-86)
  • %m/%Y (01/1986)
  • %b %Y (Jan 1986)
  • %B %d (January 28)
  • %d %b (28 Jan)
  • %Y (1986)
  • %B (January)
  • %b (Jan)
  • %A (Tuesday)
  • %a (Tue)
  • %X (11:39:13)
  • %H:%M %p (11:39 AM)
  • %H:%M (11:39)

size_by_control.sort boolean

Sort menu.

size_by_control.control string

Size by control.

Allowed values:

  • auto (Auto)
  • dropdown (Dropdown menu)
  • grouped-buttons (Button group)

size_by_control.width number

Size by menu width.

Min: 150

size_by_control.play_button boolean

Include play button.

size_by_control.step_time number

Time between steps when playing. Measured in seconds, positive values move the slider left to right, negative values move the slider right to left.

size_by_control.loop boolean

Loop on play.

size_by_control.restart_pause number

Pause before loop restarts. Measured in seconds and in addition to the regular step time displayed above.

size_by_control.dropdown_icon_color color

Size by icon color.

size_by_control.slider_handle_color color

Handle and button color.

size_by_control.slider_track_color color

Track and label color.

Animations

animation_duration number

Duration. In seconds

Number formatting

localization.input_decimal_separator string

Decimal separator in data sheet. Used for interpreting your data. Only change if data is not displaying on the chart as expected.

Allowed values:

  • . (.)
  • , (,)

localization.output_separators string

Number format to display. How the numbers should appear on chart labels

Allowed values:

  • ,. (12,235.67)
  • ., (12.345,67)
  • . (12235.67)
  • , (12345,67)
  • . (12 235.67)
  • , (12 345,67)

Layout

Layout

layout.body_font font

Font.

layout.max_width number

Maximum width. Leave blank to stretch to container width

Min: 50

layout.background_color_enabled boolean

Color.

Allowed values:

  • true (On)
  • false (Off)

layout.background_image_enabled boolean

Image.

Allowed values:

  • true (On)
  • false (Off)

layout.background_color color

Color.

layout.background_image_src url

Image URL.

layout.background_image_size string

Size.

Allowed values:

  • cover (Fill)
  • contain (Fit)
  • auto (Original)
  • 100% 100% (Stretch)

layout.background_image_position string

Position.

Allowed values:

  • top left (Top left)
  • top center (Top center)
  • top right (Top right)
  • center left (Center left)
  • center center (Center)
  • center right (Center right)
  • bottom left (Bottom left)
  • bottom center (Bottom center)
  • bottom right (Bottom right)

layout.layout_order string

Layout order.

Allowed values:

  • stack-default (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANhJREFUSA3tVNEOwiAM7Iy/p2/wkTz6g5gjOVZZEepcjMmWLBTau95ugIh6lpzzLcb4wNpFJaRk9MIahxAyXmD7mC7BC2RlFbliQjFMpJTujOdGs/ECwRoP3rlKoEzNJlz3+CwutK0NLRVt2QhjggA9n2IGEKANMxmt0VVsEfxgzfX7zL3ZiqbXLjcKc8vEORk5/75mMB/7u11uuIpdbtDCc5R3l/s+e+pmHt1foza7Nv6IXOeHiqGk9zWtSk1cN2cPrItnYjZzHZEZYtacxHTiuANSO/xN8AS4uW8Rw1Gu2AAAAABJRU5ErkJggg==)
  • stack-2 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAAMpJREFUSA3tVMsKwyAQNKW/l970Iz32Bw0jjKTrSLUY0oOBsO5rnOwYnTs9W0ppDyG8EcsOkw8uauu9T3jR2+75yJxBnnC4JxMxxlezg0V9VsJsIGz75TfKdlkpg3aPcT8TsPNRMJjZEIf5xaAAahUyE+RtfcZvtFLoFh95aFXxH4hCWpUoTCg7fxqUfB4yEcl/CJlNy5qbfuZA8m8CwJ77q2djSj50lnuAWbOAOQlXxCuRHxcUje2XzfgrYzBpHUXLkmxh181SpnEAB4Vg0DSGhHsAAAAASUVORK5CYII=)
  • stack-3 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANFJREFUSA3tVEEOwyAMo9O+193gkRz3QSZHMmNRUkGp1guVqkCIHZMAITTfVkrZU0pv+B7NQpCV1vEdxxgLfmB9jEvwBBNzkjXn/HIRDOqzJs0GwS1eEmonAn52RITJaUYScd5KLl0fTQf58HVpIFlXMDPNBVMf2TDXPq7dZM2eelrMQ6uDucG50mlWzG/ooCWDvqENXldn1pcyhpgJWjYcPe5z5ZFrAgoe2LN0f2v1ZYq5UyofuiME99hFXKtUm1c9aoBmeEeRjVIQma6XpVblAwnpZjN/VjqsAAAAAElFTkSuQmCC)
  • stack-4 (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAAHZdKxuAAAAAXNSR0IArs4c6QAAANtJREFUSA3tVNEOwjAI3Iy/p2/tR/bRH6zekmuA1glO45bYZAHKcdDCOk1izbXWC+0zlJzzDVJ5sNGW9qSUKj4QKY8yWvBDUWnoKKVcTzS2yWHiIfeMwm2yIbLbRL3DRJYubi+0bAPCkcvapO3AdFgZvuDuyJZR2i4wSpBBP9ZD7RsOLQ9gD/Y5ZmaA3EEHWY6r3SEwrzDEHLpnlvOXa4/7xttZfhNwyPdKcqLPaz6JlXpr9bNgCfbobw2ch5iY0CQzyCOPR9ya5zleBPNy3LxknAbiv1YxExxH3gEqBW7I4zw3PQAAAABJRU5ErkJggg==)

layout.space_between_sections string

Space between sections.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.space_between_sections_custom number

Custom.

Max: 100

layout.margin_top number

Top.

layout.margin_right number

Right.

layout.margin_bottom number

Bottom.

layout.margin_left number

Left.

layout.border.enabled boolean

Show borders around visualisation.

layout.border.top.width number

Top.

layout.border.top.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.top.color color

Color.

layout.border.right.width number

Right.

layout.border.right.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.right.color color

Color.

layout.border.bottom.width number

Bottom.

layout.border.bottom.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.bottom.color color

Color.

layout.border.left.width number

Left.

layout.border.left.style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.border.left.color color

Color.

layout.header_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)

layout.title string

layout.title_styling boolean

Styling.

layout.title_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.title_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.title_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.title_color color

Color.

layout.title_line_height number

Line height.

Max: 3

layout.title_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.title_space_above_custom number

Custom.

Max: 100

layout.subtitle string

layout.subtitle_styling boolean

Styling.

layout.subtitle_size string

Size.

Allowed values:

  • 1.4 (ᴀ)
  • 1.6 (A)
  • 2 (fa-font)
  • custom (...)

layout.subtitle_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.subtitle_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.subtitle_color color

Color.

layout.subtitle_line_height number

Line height.

Max: 3

layout.subtitle_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.subtitle_space_above_custom number

Custom.

Max: 100

layout.text string

layout.text_styling boolean

Styling.

layout.text_size string

Size.

Allowed values:

  • 1.2 (ᴀ)
  • 1.4 (A)
  • 1.6 (fa-font)
  • custom (...)

layout.text_size_custom number

Custom. Specify a custom responsive font size. Best results will be with values between 1.2 and 3

layout.text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.text_color color

Color.

layout.text_line_height number

Line height.

Max: 3

layout.text_space_above string

Space above.

Allowed values:

  • 0 (▁)
  • 0.5 (▃)
  • 1 (▄)
  • custom (...)

layout.text_space_above_custom number

Custom.

Max: 100

layout.header_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • none (None)

layout.header_border_width number

Width.

layout.header_border_color color

Color.

layout.header_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)

layout.header_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.header_logo_src url

URL.

layout.header_logo_height number

Height.

layout.header_logo_align string

Align. Align logo inside header or outer visualisation container

Allowed values:

  • outside (Outside)
  • inside (Inside)

layout.header_logo_position_inside string

Position.

Allowed values:

  • top (Top)
  • left (Left)
  • right (Right)

layout.header_logo_position_outside string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.header_logo_margin_top number

Top.

layout.header_logo_margin_right number

Right.

layout.header_logo_margin_bottom number

Bottom.

layout.header_logo_margin_left number

Left.

layout.source_name string

Source name.

layout.source_url string

Source url.

layout.multiple_sources boolean

Multiple sources.

layout.source_name_2 string

Source name.

layout.source_url_2 string

Source url.

layout.source_name_3 string

Source name.

layout.source_url_3 string

Source url.

layout.source_label string

Source label.

layout.footer_note string

Note.

layout.footer_text_size number

Size.

layout.footer_text_color color

Color.

layout.footer_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • center (fa-align-center)
  • right (fa-align-right)
  • justify (fa-align-justify)

layout.footer_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.footer_logo_src url

Image.

Link.

layout.footer_logo_height number

Height.

layout.footer_logo_margin number

Margin.

layout.footer_logo_order string

Position.

Allowed values:

  • left (Left)
  • right (Right)

layout.footer_align_vertical string

V. align.

Allowed values:

  • flex-start (Top)
  • center (Center)
  • flex-end (Bottom)

layout.footer_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • none (None)

layout.footer_border_width number

Width.

layout.footer_border_color color

Color.

layout.footer_border_style string

Style.

Allowed values:

  • solid (Solid)
  • dashed (Dashed)
  • dotted (Dotted)