Number ticker

A Flourish template for displaying "ticking" numbers

Updated 2 months ago to v1.5.2 by Flourish team

How to use this template

This template allows you to easily create a number ticker counting up and also optionally add text to it.

How to get started

The first step is to decide if you need only a number ticker or a custom one featuring text. For the former, head over to Numbers options in the editor, opt for Simple and set the beginning and end of the ticker through the Tick from and Tick to settings.

If the latter is what you need, choose Custom and input the text you want to feature along with your numbers in the Text and {{numbers}} box. Put numbers to tick to and from in double braces, e.g. {{1000}} to tick from 0 to 1000, or {{-5000/4000}} to tick from -5000 to 4000. You are also able to use markdown styling such as bold and italic. You can also include custom HTML to add styling and formatting – for example to color some words differently.

Animation settings

To customize the animation duration, i.e. how fast the ticker will be ticking, head over to Animation and set a Duration of your choosing.

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/number-ticker

version: 1

Template data

This template does not have any data bindings, so you shouldn't include data or bindings key/value pairs in your opts object that is passed to the API. You should specify the template and template version in the opts object like:

{
    template: "@flourish/number-ticker",
    version: "1",
    ...
}

Template settings

Options for opts.state.

Numbers

mode string

Allowed values:

  • simple (Simple)
  • custom (Custom)

number_start number

Tick from.

number number

Tick to.

custom_template text

Text and {{numbers}}. Put numbers to tick in double braces, e.g. {{1000}} to tick from 0 to 1000, or {{-1000/1000}} to count from -1000 to 1000.<br><br>You can also markdown styling, e.g. **bold** and *italic*

font_unit string

Font size mode. When set to <strong>"Scale with page"</strong>, the text will always take up the same proportion of the page width, on any page size (eg. mobile desktop) <br/><br/>When set to <strong>“Default”</strong> the text will be scaled responsively in the same way as other text components, such as the header text.

Allowed values:

  • vw (Scale with page)
  • rem (Default)

font_size number

Font size.

text_color color

Color.

font_weight string

Font weight.

Allowed values:

  • normal (Normal)
  • bold (Bold)

line_height number

Line height.

Animation

duration number

Duration. How many seconds you want the animation to last for

easing string

Tick rate.

Allowed values:

  • constant (Constant)
  • speed_up (Speeds up)
  • slow_down (Slows down)
  • fast_slow_fast (Fast-slow-fast)

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)

value_format.prefix string

Prefix. Text to place in front of number

value_format.suffix string

Suffix. <a href="https://help.flourish.studio/article/37-how-to-change-number-formating">Text</a> to place after number

value_format.n_dec number

Decimal places. Enter a negative integer to <a href="https://help.flourish.studio/article/37-how-to-change-number-formating#multiply-divide">round to a whole number<a/> with that many zeros. For example, -2 will round to the nearest hundred.

Min: -10

Max: 10

value_format.advanced boolean

Advanced.

value_format.negative_sign string

Styling of negative numbers.

Allowed values:

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

value_format.strip_zeros boolean

Remove trailing zeros.

value_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”.

value_format.transform_labels boolean

Multiply/divide values.

value_format.transform string

Allowed values:

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

value_format.multiply_divide_constant number

value_format.exponentiate_constant number

Layout

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.

Allowed values:

  • true (On)
  • false (Off)

layout.background_image_enabled boolean

Image.

Allowed values:

  • true (On)
  • false (Off)

layout.background_color color

Background 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.max_width_target string

Maximum width. Apply a <a href="https://help.flourish.studio/article/270-how-to-embed-a-visualization-with-a-maximum-width">maximum width</a> to just the <b>main graphic</b> or <b>everything</b> (main graphic plus header, footer, etc).

Allowed values:

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

layout.max_width number

Maximum width. Leave blank to stretch to container width

Min: 50

layout.max_width_align string

Align.

Allowed values:

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

layout.layout_order string

Layout order.

Allowed values:

  • 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 – controls – legend – footer)
  • grid-1 (Grid mode: Primary graphic on the right)

layout.space_between_sections string

Space between sections.

Allowed values:

  • 0.5 (▁)
  • 1 (▃)
  • 1.5 (▄)
  • 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.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. <br><br>Note that when direction is set to <b>right to left</b> any alignment icons will be reversed.

Allowed values:

  • ltr (Left to right)
  • rtl (Right to left)

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

layout.header_align string

Alignment.

Allowed values:

  • left (fa-align-left)
  • 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.

Allowed values:

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

layout.title_size_custom number

Custom. Specify a custom responsive font size in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>. The 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 html

layout.subtitle_styling boolean

Styling.

layout.subtitle_font font

Subtitle Font.

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 in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>. The 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.header_text html

layout.header_text_styling boolean

Styling.

layout.header_text_size string

Size.

Allowed values:

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

layout.header_text_size_custom number

Custom. Specify a custom responsive font size in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>. The best results will be with values between 1.2 and 3

layout.header_text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.header_text_color color

Color.

layout.header_text_line_height number

Line height.

Max: 3

layout.header_text_space_above string

Space above.

Allowed values:

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

layout.header_text_space_above_custom number

Custom.

Max: 100

layout.header_border string

Allowed values:

  • top (Top)
  • bottom (Bottom)
  • top_and_bottom (Top & 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_border_space number

Space. Space between border and header text

layout.header_logo_enabled boolean

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.header_logo_src url

Image.

layout.header_logo_alt string

Alt text.

Link.

layout.header_logo_height number

Height.

layout.header_logo_align string

Align. Align logo inside either the header or the main visualization container

Allowed values:

  • inside (Header)
  • outside (Main container)

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.footer_align string

Alignment.

Allowed values:

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

layout.footer_text_size number

Size.

layout.footer_text_color color

Color.

layout.footer_styling boolean

Advanced footer styles.

layout.footer_font font

Font.

layout.footer_text_weight string

Weight.

Allowed values:

  • 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.

layout.footer_note html

Note.

layout.footer_note_secondary html

Note (secondary). The secondary note is placed below the source and primary note

layout.footer_logo_enabled boolean

Image.

Allowed values:

  • true (Enabled)
  • false (Disabled)

layout.footer_logo_src url

Image.

layout.footer_logo_src_light hidden

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

layout.footer_logo_alt string

Alt text.

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)
  • top_and_bottom (Top & 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)

layout.footer_border_space number

Space. Space between border and footer text

Accessibility

layout.screenreader_text_primary text

Screenreader description. A text alternative to the visual content that will only be visible to <a href="https://help.flourish.studio/article/230-how-to-add-a-screenreader-description">screenreaders</a>, e.g. “The line chart shows China consistently higher than the other countries since 1990”. <br><br>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 <a href="https://help.flourish.studio/article/230-how-to-add-a-screenreader-description">screenreaders</a>. 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 <a href="https://help.flourish.studio/article/230-how-to-add-a-screenreader-description">screenreaders</a>. (Text in the header and footer are always available to screenreaders.)

Allowed values:

  • true (Hidden)
  • false (Readable)