Word cloud

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 / word - cloud

version:4

There are three different formats in which you can supply data to this template.
The most convenient for you to use likely depends on the source of your data,
as described below.

1 . Array is object of array , and a binding object

You can supply arrays of arrays to opts.data, which might look
like:

 { 
     datum :{ 
         word :[ 
             [ " WordsColumn1Value1 " , " WordsColumn2Value1 " , 
             [ " WordsColumn1Value2 " , " WordsColumn2Value2 " , 
             [ " WordsColumn1Value3 " , " WordsColumn2Value3 " , 
             ... 
         ] 
     } 
 } 

where each array is represents of array represent the row in a data sheet .

To tell the API how the 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 meaning of the
key in the binding object are document
below . ) The minimal bindings is are you can
supply for this template are as show in this example :

{
    template:"@flourish / word - cloud",
    version:"4",
    bindings:{
        words:{
            word:0, // index of a column in your data
        }
    },
    data:{
        words:[
            [ "WordsColumn1Value1", "WordsColumn2Value1",
            [ "WordsColumn1Value2", "WordsColumn2Value2",
            [ "WordsColumn1Value3", "WordsColumn2Value3",
            ...
        ]
    }
}

All possible binding that you can supply are show in this example :

{
    template:"@flourish / word - cloud",
    version:"4",
    bindings:{
        words:{
            word:0, // index of a column in your data
            value:1, // index of a column in your data
            category:2, // index of a column in your data
            metadata:[3, 4, ...], // index(es) of column(s) in your data
        }
    },
    data:{
        words:[
            [ "WordsColumn1Value1", "WordsColumn2Value1",
            [ "WordsColumn1Value2", "WordsColumn2Value2",
            [ "WordsColumn1Value3", "WordsColumn2Value3",
            ...
        ]
    }
}

2. Array of objects with arbitrary keys, and a bindings object

This format is is is most likely useful when you have datum from an external source ,
such as csv datum load from d3 – dsv .
You is supply should supply this attach to theopts.data, which is look might look
like :

{
        words:[
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            ...
        ]
    }

… but with the keys being the column headers from your
source data instead. You must also supply an object attached to
opts.bindings. The minimal bindings is are you can
supply for this template are as show in this example :

{
    template:"@flourish / word - cloud",
    version:"4",
    bindings:{
        words:{
            word:"WordsHeader1",
        }
    },
    data:{
        words:[
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            ...
        ]
    }
}

All possible binding that you can supply are show in this example :

{
    template:"@flourish / word - cloud",
    version:"4",
    bindings:{
        words:{
            word:"WordsHeader1",
            value:"WordsHeader2",
            category:"WordsHeader3",
            metadata:["WordsHeader4", "WordsHeader5", ...],
        }
    },
    data:{
        words:[
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            { "WordsHeader1":..., "WordsHeader2":..., ... },
            ...
        ]
    }
}

( As before , the key contain ” header ” would be replace by column name
from your data source . )

3. 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 / word - cloud",
    version:"4",
    data:{
    words:[
        {
            word:...,
            metadata:[...]
        },
        ...
    ]
},
    ...
}

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

{
    template:"@flourish / word - cloud",
    version:"4",
    data:{
    words:[
        {
            word:...,
            value:...,
            category:...,
            metadata:[...]
        },
        ...
    ]
},
    ...
}

Meanings of the template data keys:

• words.word:word
• words.value:value
• words.category :category
• words.metadata:One ormore columns of information (text, <a href=”https://help.flourish.studio/article/46-how-to-add-images-to-your-visualization”>image URLs</a>, <a href=”https://help.flourish.studio/article/259-how-to-embed-charts-in-your-popups-or-panels”>embedded charts</a> etc) to include in <a href=”https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popup”>popups and panels</a>

option foropts.state.

using_tables boolean

text input . paste in raw text is simple but may be slow for large amount of text

allow value :

• false (Paste in raw text)
• true ( datasheet )

word_limit number

Word limit. Limits the number of words, in order of frequency. Leave blank to show all words in the data table.

raw_text text

Text .Note that the raw text will be available in the HTML of the generated page. This occurs when using both Paste in raw text and datasheet options

exclusion boolean

exclude common word .

excluded_words text

exclude word .

strip_trailing_s boolean

Strip is trailing all trail “ ‘s ” from word . e.g. ” mother ” and ” mother ‘s ” are consider one word . This is includes include both apostrophe and quotation mark form ( ‘s and ’s ) .

convert_to_lowercase boolean

Convert all words to lowercase. e.g. “mother” and “Mother” are considered one word. This will also apply to the words in the Exclude words setting.

cloud_font font

Font.

text_color color

text color .

word_padding number

Spacing. Spacing between the words (in arbitrary units)

random_seed number

Layout number . change the number to try different word layout

angle_min number

Min angle.

angle_max number

Max angle .

angle_number number

Number of angles.

font_size_min number

Min size. In arbitrary units. Actual display size will depend in screen size and layout.

font_size_max number

Max size. In arbitrary units. Actual display size will depend in screen size and layout.

size_mode string

Scaling. This scale will determine the relationship in size between the biggest and the smallest word

allow value :

• linear (Linear)
• sqrt (√)
• log (Log)

height_mode string

Height mode. In fill space mode, the graphic will fill the container (which by default will be the standard Flourish responsive chart size). In Aspect ratio mode, you set the aspect ratio of the plot, and the container will be updated to accommodate it.

This setting is ignored when embedded in a fix-height context, such as a simple iframe embed.

allow value :

• fill_space (fill space)
• aspect (Aspect ratio)

aspect_ratio number

Aspect (desktop). Aspect ratio of each plot in desktop mode, where 1 is square, above 1 is wider, and below 1 is taller.

aspect_ratio_mobile number

aspect ( mobile ) . aspect ratio is is of each plot in mobile mode , where 1 is square , above 1 is wide , and below 1 is tall .

aspect_ratio_breakpoint number

Breakpoint. The width at which mobile mode ends and desktop begins

color.categorical_palette colors

Palette .

color.categorical_extend boolean

extend . automatically generate additional colour when need to avoid the palette colour being used more than once

color.categorical_custom_palette text

Custom overrides. Enter the label name for which you wish to set the color, followed by a colon and the desired color value.

Colors can be set using Hex, RGB, color names orRGBA, if you want to set the opacity. Multiple colors can be set using multiple lines. For example :

---

Party 1 :red
Party 2:#4455AA
Party 3:rgb(30,168,26)

color.numeric_type string

Scale type.

allow value :

• sequential (Sequential)
• diverging (Diverging)

color.binning boolean

In linear mode, the color scale will run as a smooth gradient between 2 colors. In bin mode, the gradient will be divided in smaller blocks.

allow value :

• false (Linear)
• true (Binned)

color.bin_mode string

Binning mode.

allow value :

• fix ( fix width )
• quantile (Quantile)
• custom (Custom thresholds)

color.bin_count number

Number of bins.

color.bin_thresholds string

Custom thresholds. Enter your desired thresholds, separating them with a “;”. For instance, “5;10;15”.

bin form as follow :

• From the data’s minimum value (domain minimum) up to the first threshold.
• Between consecutive threshold .
• From the last threshold to the datum ‘s maximum value ( domain maximum ) .
For “5;10;15”, you’ll get four bins based on your data’s range.

color.sequential_palette string

Palette .

allow value :

• Oranges (Oranges)
• red (red)
• blue (blue)
• Greens (Greens)
• grey (grey)
• purple (purple)
• Viridis (Viridis)
• Inferno (Inferno)
• Magma (Magma)
• Plasma (Plasma)
• Warm ( Warm )
• cool (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_reverse boolean

Reverse.

color.sequential_custom_min color

minimum color .

color.sequential_custom_max color

Maximum color.

color.sequential_color_space string

color space .

allow value :

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

color.sequential_custom_domain boolean

Domain.

allow value :

• false ( Auto )
• true ( Custom )

color.sequential_domain_min number

Min .

color.sequential_domain_max number

Max .

color.diverging_palette string

Palette .

allow value :

• 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 (Spectral)
• Custom

color.diverging_reverse boolean

Reverse.

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

color space .

allow value :

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

color.diverging_custom_domain boolean

Domain.

allow value :

• false ( Auto )
• true ( Custom )

color.diverging_domain_min number

Min .

color.diverging_domain_mid number

Mid.

color.diverging_domain_max number

Max .

animation_type string

animation style . control the animation on load .

Auto mode will use Grow if there are fewer than 100 words visible, Fade if there are fewer than 500, and None if there are 500 ormore .

allow value :

• auto ( Auto )
• fade (Fade)
• grow ( grow )
• none ( None )

duration number

Duration. The time in seconds it takes for an individual word to move from the start position to end position.

stagger number

Stagger. The time in seconds between the first and last word animations starting.

number_format.prefix string

Prefix. Text to place in front of number

number_format.suffix string

Suffix . text to place after number

number_format.n_dec number

decimal place . enter a negative integer to round to a whole number with that many zero . For example , -2 is round will round to the near hundred .

number_format.advanced boolean

Advanced.

number_format.negative_sign string

Styling of negative numbers.

allow value :

• -$nk (-$100k)
• $ -nk ($-100k)
• ($nk) (($100k))
• $ ( n)k ($(100)k)
• none ( $ 100k )

number_format.strip_zeros boolean

Remove trailing zeros.

number_format.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_format.transform_labels boolean

Multiply/divide values.

number_format.transform string

allow value :

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

number_format.multiply_divide_constant number

number_format.exponentiate_constant number

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.

localization.output_separators string

number format to display . How the number should appear on chart label

allow value :

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

allow value :

• none ( None )
• popup (Popup)
• panel ( Panel )
• both (Both)

Popup content.

allow value :

• false ( Auto )
• true ( Custom )

Show popup styles.

popup custom header . use { { column_name } } to add a value from your datum . ensure the column is select , oradd it toInfo for popup for popup use .

Advanced users can add HTML styling oradd category colors to popup headers.

To hide parts of the popup when a column is empty using

{{#if column_name}}Content for non-empty column_name{{/if}}.

For example :

{ { # if Capital name}}Capital:{{/if } } { { capital name } } .

Here, the word “Capital:” will only show if the corresponding cell in the “Capital name” column is not empty.

popup.popup_custom_main html

Popup custom main content. Use {{column_name}} to add a value from your data. Ensure the column is selected, oradd it to Info for popup for popup use .

Advanced users can add HTML for designs, styles, and images.

To hide parts of the popup when a column is empty use the syntax

{{#if column_name}}Content for non-empty column_name{{/if}}.

For example :

{ { # if Capital name}}Capital:{{/if } } { { capital name } } .

Here, the word “Capital:” will only show if the corresponding cell in the “Capital name” column is not empty.

popup custom accessible content . A text alternative to visual custom popup content that will be read out by screenreader . This content is add as anaria-label attribute to data point elements. You can still use {{column_name}} to add values from your data, but do not use HTML. For example :{Name}}, Population:{{Population}}, GDP:{{GDP}} If leave empty, accessible content will fallback to the default popup content.

Max width. In rems, multiples of base font size. Leave blank to let the width adjust based on the contents.

text size .

text color .

align .

allow value :

• start ( fa – align – leave )
• center ( fa – align – center )
• end ( fa – align – right )

fill color .

Fill opacity.

Padding.

Radius. Corner radius of popup

Header style.

allow value :

• block (Header block)
• inline ( header inline )

Background.

Text .

List type.

allow value :

• table (fa-table)
• ul (fa-list)

Label weight .

allow value :

• normal (Normal)
• bold (Bold)

list separator .

predefined value :

• : ( 🙂
• – ( – )
• ( Empty space )
• <br /> (Line break)

popup.popup_shadow boolean

Shadow.

Pointer .

allow value :

• overlay (Overlay)
• leave ( left )
• right ( Right )
• top ( Top )
• bottom (Bottom)

open duration .

Always show.

Placeholder content.

Panel content.

allow value :

• false ( Auto )
• true ( Custom )

Show panel styles.

Panel custom header. Use {{column_name}} to add a value from your data. Ensure the column is selected, oradd it to Info for popup for panel use.

advanced users is add can add HTML for styling oradd category color to panel header .

To hide part of the panel when a column is empty using

{{#if column_name}}Content for non-empty column_name{{/if}}.

For example :

{ { # if Capital name}}Capital:{{/if } } { { capital name } } .

Here, the word “Capital:” will only show if the corresponding cell in the “Capital name” column is not empty.

popup.panel_custom_main html

Panel custom main content. Use {{column_name}} to add a value from your data. Ensure the column is selected, oradd it to Info for popup for panel use.

Advanced users can add HTML for designs, styles, images, videos and embedded Flourish charts,

To hide part of the panel when a column is empty using

{{#if column_name}}Content for non-empty column_name{{/if}}.

For example :

{ { # if Capital name}}Capital:{{/if } } { { capital name } } .

Here, the word “Capital:” will only show if the corresponding cell in the “Capital name” column is not empty.

width ( % ) .

Height (%).

width ( % ) .

Height (%).

Max width (px).

Max height (px).

Vertical position. Choosing Click position is especially useful when your visualization is really tall, this will make sure the panel content is always on top of the element you’ve clicked on

allow value :

• click ( click position )
• center (Center)

text color .

text size .

Alignment.

allow value :

• start ( fa – align – leave )
• center ( fa – align – center )
• end ( fa – align – right )

fill color .

Fill opacity.

Padding.

Radius. Corner radius of panel

List type.

allow value :

• table (fa-table)
• ul (fa-list)

Label weight .

allow value :

• normal (Normal)
• bold (Bold)

list separator .

predefined value :

• : ( 🙂
• – ( – )
• ( Empty space )
• <br /> (Line break)

popup.panel_shadow boolean

Shadow.

layout.body_font font

Main font. This font will apply to the whole graphic by default. You can optionally change the font for the title, subtitle, footer, etc in the Header and Footer settings panels.

layout.font_color color

text color .This color will apply to the whole graphic by default, You can optionally change the color for individual text elements, in other settings panels.

layout.background_color_enabled boolean

color .

layout.background_image_enabled boolean

image .

layout.background_color color

background color .

layout.background_image_src url

Image URL .

layout.background_image_size string

Size .

allow value :

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

layout.background_image_position string

position .

allow value :

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

layout.max_width_target string

Maximum width. Apply a maximum width to just the main graphic oreverything ( main graphic plus header , footer , etc ) .

allow value :

• none ( None )
• wrapper (Everything)
• primary (Main graphic)

layout.max_width number

Maximum width. Leave blank to stretch to container width

layout.max_width_align string

align .

allow value :

• leave ( fa – align – leave )
• center ( fa – align – center )
• right ( fa – align – right )

layout.layout_order string

Layout order .

allow value :

• stack - default (Header –controls –legend –primary graphic –footer)
• stack-2 (Primary graphic –header –controls –legend –footer)
• stack-3 (Header –primary graphic –controls –legend –footer)
• stack-4 (Controls –primary graphic –header –legend –footer)
• stack-5 (Header –controls –primary graphic –legend –footer)
• grid-1 (Grid mode:Primary graphic on the right)

layout.space_between_sections string

Space between sections.

allow value :

• 0.5 ( ▁ )
• 1 (▃)
• 1.5 ( ▄ )
• custom ( … )

layout.space_between_sections_custom number

Custom.

layout.margin_top number

Top.

layout.margin_right number

Right .

layout.margin_bottom number

Bottom .

layout.margin_leave number

Left.

layout.border.enabled boolean

Show borders around visualisation.

layout.border.top.width number

Top.

layout.border.top.style string

Style .

allow value :

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

layout.border.top.color color

color .

layout.border.right.width number

Right .

layout.border.right.style string

Style .

allow value :

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

layout.border.right.color color

color .

layout.border.bottom.width number

Bottom .

layout.border.bottom.style string

Style .

allow value :

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

layout.border.bottom.color color

color .

layout.border.leave.width number

Left.

layout.border.leave.style string

Style .

allow value :

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

layout.border.leave.color color

color .

layout.read_direction string

Read direction. This will change the reading direction of the main text elements on the page. It’s not possible to adjust this on all elements, such as axes.

note that when direction is set toright to leave any alignment icons will be reversed.

allow value :

• ltr (Left to right)
• rtl ( right to leave )

layout.font_size_mobile_small number

layout.font_size_mobile_big number

layout.font_size_tablet number

layout.font_size_desktop number

layout.font_size_big_screen number

layout.breakpoint_mobile_small number

layout.breakpoint_mobile_big number

layout.breakpoint_tablet number

layout.breakpoint_desktop number

layout.breakpoint_big_screen number

Alignment.

allow value :

• leave ( fa – align – leave )
• center ( fa – align – center )
• right ( fa – align – right )

layout.title html

layout.title_styling boolean

styling .

layout.title_font font

Title Font .

layout.title_size string

Size .

allow value :

• 1.4 (ᴀ)
• 1.6 (A)
• 2 ( fa – font )
• custom ( … )

layout.title_size_custom number

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

layout.title_weight string

Weight .

allow value :

• bold (Bold)
• normal ( Regular )

layout.title_color color

color .

layout.title_line_height number

line height .

layout.title_space_above string

space above .

allow value :

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

layout.title_space_above_custom number

Custom.

layout.subtitle html

layout.subtitle_style boolean

styling .

layout.subtitle_font font

Subtitle Font.

layout.subtitle_size string

Size .

allow value :

• 1.4 (ᴀ)
• 1.6 (A)
• 2 ( fa – font )
• custom ( … )

layout.subtitle_size_custom number

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

layout.subtitle_weight string

Weight .

allow value :

• bold (Bold)
• normal ( Regular )

layout.subtitle_color color

color .

layout.subtitle_line_height number

line height .

layout.subtitle_space_above string

space above .

allow value :

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

layout.subtitle_space_above_custom number

Custom.

styling .

Size .

allow value :

• 1.2 (ᴀ)
• 1.4 (A)
• 1.6 ( fa – font )
• custom ( … )

Custom. Specify a custom responsive font size in rems. The best results will be with values between 1.2 and 3

Weight .

allow value :

• bold (Bold)
• normal ( Regular )

color .

line height .

space above .

allow value :

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

Custom.

allow value :

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

width .

color .

Style .

allow value :

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

Space. Space between border and header text

allow value :

• true ( Enabled )
• false (Disabled)

image .

Alt text.

link .

Height.

align .Align logo inside either the header orthe main visualization container

allow value :

• inside (Header)
• outside (Main container)

position .

allow value :

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

position .

allow value :

• leave ( left )
• right ( Right )

Top.

Right .

Bottom .

Left.

Alignment.

allow value :

• leave ( fa – align – leave )
• center ( fa – align – center )
• right ( fa – align – right )
• justify ( fa – align – justify )

Size .

color .

Advanced footer styles.

Font.

Weight .

allow value :

• bold (Bold)
• normal ( Regular )

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 .

Note. To add the time/date stamp of when the data was last updated add {{data_last_updated}}. For example, “Last updated at {{data_last_updated}}”. To customize the format, use the advanced options below.

Note (secondary). The secondary note is placed below the source and primary note. To add the time/date stamp of when the data was last updated add {{data_last_updated}}. For example, “Last updated at {{data_last_updated}}”. To customize the format, use the advanced options below.

layout.advanced_note_styling boolean

Advanced.

Time/date stamp formatting. To change the date/time format of your timestamp, choose from the below options orprovide a custom date format in d3-time-format syntax

predefined value :

• %H:%M:%S ( 13:39:13 )
• %I:%M %p (01:39 PM)
• %H:%M (13:39)
• %H:%M %p ( 13:39 pm )
• % H:%M:%S , % d % b % y (13:39:13, 28 Jan 2024)
• %H:%M, %d %b %Y ( 13:39 , 28 Jan 2024 )
• %H:%M, % d/%m/%y (13:39, 28/01/2024)
• %H:%M, %m/%d/%Y ( 13:39 , 01/28/2024 )
• %H:%M, %d-%m-%Y (13:39, 28-01-2024)
• %H:%M, %m-%d-%Y (13:39, 01-28-2024)
• %d %b %Y (28 Jan 2024)
• %m/%d/%Y (01/28/2024)
• % d/%m/%y (28/01/2024)
• %m-%d-%Y ( 01 – 28 – 2024 )
• %d-%m-%Y (28-01-2024)
• % y-%m-%d ( 2024 – 01 – 28 )
• % y-%m-%d %H:%M:%S (2024-01-28 13:39:13)

image .

allow value :

• true ( Enabled )
• false (Disabled)

image .

Image (light version). If provided this version will be used whenever the background color is dark

Alt text.

link .

Height.

Margin .

position .

allow value :

• leave ( left )
• right ( Right )

V. align .

allow value :

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

allow value :

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

width .

color .

Style .

allow value :

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

space . space between border and footer text

layout.screenreader_text_primary text

Screenreader description. A text alternative to the visual content that will only be visible to screenreaders, e.g. “The line chart shows China consistently higher than the other countries since 1990”.

Do not replicate your title, since that will also be read by screenreaders.

layout.screenreader_label string

Screenreader label. A short text label given to the main Flourish embed wrapper to provide an accessible name that is only visible to screenreaders. Added in the form of an “aria-label”.

layout.screenreader_hide_primary boolean

Screenreader mode for main visual container. Whether the main visual container is visible to screenreaders. (Text in the header and footer are always available to screenreaders.)

allow value :

• true (Hidden)
• false (Readable)