Line, bar and pie charts

Basic types of chart, single or in a grid

Updated a day ago to v30.2.2 by Flourish team

How to use this template

How to get started

Upload data with one column containing “labels” (category names, years, etc) and one or more numerical columns of “values” (each of which becomes a line on a line chart, a series of bars on a bar chart, etc). Here's what your data might look like.

Year	London	Paris	Berlin
2010	1	4	3
2020	0	3	6

Making a grid of charts

You can use the “Grid of charts” option to display each series in your data on its own mini chart – a visualisation technique called “small multiples”. Data can also be divided into mini charts by specifying a “Charts grid” column. In this case, there will be one chart for each unique value in the selected column. This is useful if your data is arranged in this way, or if you want to create a grid with multiple series on each chart.

FAQ

How do I change the color of some of the bars, but not all of them? First, make sure you’re using a “bar” or "column" chart. Then, under "Chart styles", choose "Shade by row". Finally, specify the colors you want for each row under "Custom colors". (If you'd like to have all the bars the same color except for one or two, a shortcut is first to customise the palette so that there's only one color.)

Tips

You can use custom colors by typing them as a comma-separated list in to the “Color scheme or custom colors” menu. You can use any named CSS color or hexcode.
With a grid of line or bar charts, you can choose whether to have the same y axis for all the charts (good for comparing absolute numbers) or to have each chart set its own y-axis based on the data it contains (best for comparing the shape of each series).
If you make different views of your data and save them as separate visualisations, you can animate between the charts in the Flourish story editor.

Credits and feedback

Created by Flourish. Sample data is from Our World in Data showing population by region and energy consumption by type, and from Populationpyramid.net for the population pyramid starting point. Want to see additional features? Let us know at support@flourish.studio.

API information

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/line-bar-pie

version: 30

Template `data`

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 of arrays, and a bindings object

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

{
    data: {
        data: [
            [ "DataColumn1Value1", "DataColumn2Value1",
            [ "DataColumn1Value2", "DataColumn2Value2",
            [ "DataColumn1Value3", "DataColumn2Value3",
            ...
        ]
    }
}

where each array of arrays represents the rows 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 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/line-bar-pie",
    version: "30",
    bindings: {
        data: {
            label: 0, // index of a column in your data
        }
    },
    data: {
        data: [
            [ "DataColumn1Value1", "DataColumn2Value1",
            [ "DataColumn1Value2", "DataColumn2Value2",
            [ "DataColumn1Value3", "DataColumn2Value3",
            ...
        ]
    }
}

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

{
    template: "@flourish/line-bar-pie",
    version: "30",
    bindings: {
        data: {
            label: 0, // index of a column in your data
            value: [1, 2, ...], // index(es) of column(s) in your data
            facet: 3, // index of a column in your data
            filter: 4, // index of a column in your data
            metadata: [5, 6, ...], // index(es) of column(s) in your data
        }
    },
    data: {
        data: [
            [ "DataColumn1Value1", "DataColumn2Value1",
            [ "DataColumn1Value2", "DataColumn2Value2",
            [ "DataColumn1Value3", "DataColumn2Value3",
            ...
        ]
    }
}

2. 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. You must also supply an object attached to opts.bindings. The minimal bindings you can supply for this template are as shown in this example:

{
    template: "@flourish/line-bar-pie",
    version: "30",
    bindings: {
        data: {
            label: "DataHeader1",
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

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

{
    template: "@flourish/line-bar-pie",
    version: "30",
    bindings: {
        data: {
            label: "DataHeader1",
            value: ["DataHeader2", "DataHeader3", ...],
            facet: "DataHeader4",
            filter: "DataHeader5",
            metadata: ["DataHeader6", "DataHeader7", ...],
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

(As before, the keys containing "Header" would be replaced by column names 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/line-bar-pie",
    version: "30",
    data: {
    data: [
        {
            label: ...,
            value: [...],
            metadata: [...]
        },
        ...
    ]
},
    ...
}

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

{
    template: "@flourish/line-bar-pie",
    version: "30",
    data: {
    data: [
        {
            label: ...,
            value: [...],
            facet: ...,
            filter: ...,
            metadata: [...]
        },
        ...
    ]
},
    ...
}

Meanings of the template data keys:

data.label: A column of names, numbers or datetimes. string, datetime, number
data.value: One or more columns of numbers. The 'Preferred output format' of the first column is used to format values. number
data.facet: If specified and <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">Grid of charts</a> view is on, creates a separate mini chart for each value found in the column string
data.filter: Use this column to create a user-facing row control. To create a column filter, use the <a href="https://help.flourish.studio/article/573-how-row-and-column-filters-work>Series filter</a> option in the settings panel instead string, datetime, number
data.metadata: One or more 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 custom <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups">popups and panels</a>. string, datetime, number

Template `metadata`

Note: metadata is optional, and the API will interpret your data for you if you do not specify it. A typical example of when specifying metadata can be useful is when column(s) in your data contain numbers or dates that you wish to format visually (e.g. to display a column containing MM/DD/YYYY dates in DD/MM/YYYY format).

This template supports an optional metadata property. metadata informs the template what type of data is in each of your columns, and how that data should be formatted visually.

You can specify metadata in one of three formats, depending on the format of opts.data.

1. Array of objects with column indexes as keys

You should supply metadata in this format when opts.data is in the previously described 'array of arrays' format. In this case, metadata should be an object with column index: column type object key/value pairs (column type objects must have type, type_id, and output_format_id keys, documented below):

{
    template: "@flourish/line-bar-pie",
    version: "30",
    ...
    data: {
        data: [
            [ "DataColumn1Value1", "DataColumn2Value1",
            [ "DataColumn1Value2", "DataColumn2Value2",
            [ "DataColumn1Value3", "DataColumn2Value3",
            ...
        ]
    },
    metadata: {
        data: {
            0: { type: ..., type_id: ..., output_format_id: ... },
            1: { type: ..., type_id: ..., output_format_id: ... },
        }
    },
    ...
}

2. Array of objects with column headers as keys

You should supply metadata in this format when opts.data is in the previously described 'array of objects with arbitrary keys' format. In this case, metadata should be an object with column header: column type object key/value pairs (column type objects must have type, type_id, and output_format_id keys, documented below):

{
    template: "@flourish/line-bar-pie",
    version: "30",
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    },
    metadata: {
        data: {
            "DataHeader1": { type: ..., type_id: ..., output_format_id: ... },
            "DataHeader2": { type: ..., type_id: ..., output_format_id: ... },
        }
    },
    ...
}

Column type objects:

Column type objects tell the API what type of data is in a column:

{
    type: "number", // options also include 'string', and 'datetime'
    type_id: "number$comma_point", // numbers in the format 13,429.17
    output_format_id: "number$space_comma", // numbers in the format 13 429,17
}

For more information on valid column type values, see Recognized Type Formats.

Template `settings`

Options for opts.state.

Chart type

`chart_type` string

Allowed values:

line (Line chart)
area_stacked (Area chart (stacked))
area_prop (Area chart (stacked %))
area (Area chart (unstacked))
area_stacked_stream (Area chart (streamgraph))
column_grouped (Column chart (grouped))
column_stacked (Column chart (stacked))
column_stacked_prop (Column chart (stacked %))
column_waterfall (Column chart (waterfall))
bar_grouped (Bar chart (grouped))
bar_stacked (Bar chart (stacked))
bar_stacked_prop (Bar chart (stacked %))
bar_waterfall (Bar chart (waterfall))
donut (Pie/donut chart)
column_grouped_line (Combo: Lines & columns (grouped))
column_stacked_line (Combo: Lines & columns (stacked))
column_stacked_prop_line (Combo: Lines & columns (stacked %))
area_stacked_line (Combo: Lines & areas (stacked))
line_line (Combo: Lines & lines)

`dual_axis` boolean

Axis type.

Allowed values:

false (Single)
true (Dual)

`secondary_series` number

Number of combo lines. In <a href="https://help.flourish.studio/article/26-how-to-make-combo-charts">line-bar mode</a>, sets how many of your value columns are treated as lines. In <a src="https://help.flourish.studio/article/26-how-to-make-combo-charts">line-line mode</a>, sets how many lines use the right axis. The order counts from the start, so if you want column B as a line and A as a column, set the order in the column bindings to "B, A".

Max: 10000

`stack_sort` string

Stack sort mode. Whether each stack is in the default order or sorted by value. Use ascending or descending with a stacked area chart to make a "bump" area chart.

Allowed values:

data (Normal)
ascending (fa-sort-amount-desc)
descending (fa-sort-amount-asc)

Grid mode. By default, <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">Grid of charts</a> creates a mini chart for each series. If Grid of charts is set in your column bindings, a mini chart will be created for each unique value in your specified column.

Allowed values:

single (Single chart)
facets (Grid of charts)

`height_mode` string

Height mode. Auto: sets the height based on the chart type, data and width. Standard: uses the default Flourish responsive sizing. Aspect ratio: sets the aspect of each plot. This setting is ignored when embedded in a fixed-height context, such as a simple iframe <a href="https://help.flourish.studio/article/145-how-to-embed-flourish-charts-in-your-cms">embed</a>.

Allowed values:

auto (Auto)
fill_space (Standard)
aspect (Aspect ratio)

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

Min: 0.01

Max: 100

Aspect (mobile). Aspect of each plot in <a href="https://help.flourish.studio/article/90-how-to-create-mobile-friendly-visualizations">mobile</a> mode, where 1 is square, above 1 is wider, and below 1 is taller.

Min: 0.01

Max: 100

Breakpoint. The width at which <a href="https://help.flourish.studio/article/90-how-to-create-mobile-friendly-visualizations">mobile</a> mode ends and desktop begins

`sort_mode` string

Sort mode.

Allowed values:

data (Data sheet)
value (Value)
label (Label)

Grid of charts

Number of columns. In Auto mode, the number of columns will change with screen size

Allowed values:

false (Auto)
true (Fixed)

Min chart width. Determines how many columns of charts are displayed in the grid. Ignored if you specify a fixed number of columns.

Max chart width. Determines how many columns of charts are in the grid. Ignored if you specify a fixed number of columns.

Fixed number of columns.

Min: 1

Horizontal margin.

Vertical margin.

On data change. If a chart in the grid is removed, that cell can either be animated out (with another cell moving to take its place) or reused for the new data in that cell. Auto decides for you based on the data.

Allowed values:

auto (Auto)
name (Remove)
reuse (Reuse)

Show titles.

Alignment.

Allowed values:

auto (Auto)
left (fa-align-left)
center (fa-align-center)
right (fa-align-right)

Size. Relative to the width of the chart

Scale with chart.

Allowed values:

rem (Off)
facet (On)

Color.

Space above.

Space below.

Background.

Allowed values:

none (None)
full (Full)
text (Text)

Color.

Padding. Horizontal space between text and background

`x_axis_matching` boolean

Same across grid. Ensure the X scale is the same across the grid

`x_axis_last_row_only` boolean

Last row only. Only show the X axis on the last row, where possible. Ignored if the X axis is not positioned at the bottom.

`y_axis_matching` boolean

Same across grid. Ensure the Y scale is the same across the grid

`y_axis_first_col_only` boolean

First column only. Only show the Y axis on the first column of the grid, where possible

`y2_axis_matching` boolean

Same across grid. Ensure the secondary Y scale is the same across the grid

`y2_axis_last_col_only` boolean

Last column only. Only show the secondary Y axis on the last column of the grid, where possible

Controls & filters

`series_filter_mode` string

Series filter. <a href="https://help.flourish.studio/article/573-how-row-and-column-filters-work">Filter control</a> for series/columns. The user can also filter by clicking on the <a href="https://help.flourish.studio/article/431-what-are-the-different-flourish-legends">legend</a>, except in single select mode. Use the <a href="https://help.flourish.studio/article/417-how-to-adjust-the-animation-speed-of-your-visualization">animation settings panel</a> to determine whether series animate when changing the filter.

Allowed values:

none (Off)
single (Single select)
multi (Multi select)

`series_control_multi_text` string

Placeholder text.

`series_control_multi_none_text` string

No more results text.

`series_control_select_text` string

Select text.

`max_series` number

Max series to show. Limits the number of series/columns that will be visualized at once

`series_control_background` color

Background.

`series_control_text` color

Text.

`series_control_border` color

Border.

`series_control_pill_background` color

Background.

`series_control_pill_text` color

Text.

`series_control_pill_radius` number

Border radius.

Max: 100

`series_control_single_all` boolean

Include "All".

`series_control_single_all_text` string

Name for "All".

`filter_rows_with_no_data` boolean

Filter rows that have no data. This setting filters rows that have no data, this is useful in combination with filters and datasets that have a lot of empty cells.

`series_control_single.control_type` string

Control type. Choose between a dropdown, buttons or a <a href="https://help.flourish.studio/article/524-how-to-add-a-time-slider-to-your-line-bar-pie-chart">time slider</a>.

Allowed values:

dropdown (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAKCAYAAAFXtOeCAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAALaADAAQAAAABAAAACgAAAAAWgdR+AAAAtklEQVQ4EdVV3QnEIAw25TbSB2foNI7iMu0MbuUR4ZOQy4OFCL2AmN8vMQallNLVez+DosNSsg/FGLtyDkR0H1rJMqOMiJxz4KWp1jpUsLNsptCBkD/MlFIgzx3IsD9GflTGTLvImN1ajP1x043dVrlr1fIY4xZZYd2kdATfWgu8NCEedtdWcJ+R1BVYnmIbsEzizW8bDO9CJd4cOijxCEH22DGIq1iyBiv2P8eDP4jVDrzE7/oCOyRFCckULykAAAAASUVORK5CYII=)
buttons (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAKCAYAAAFaqpfFAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAK6ADAAQAAAABAAAACgAAAACxtWN2AAAA5klEQVQ4EdVUwQ2DMAwkqBuFBzO0y2QUlqEz5AEzpTrUiyzLEEPbRy2F2D7n4tgWYRiGuZRy75T0lhMxIcZYoKzrWvUeDi0VTSlt2DRN9dQ4jh0WBP4avHneH3kF/SGE5w0GWXPOHRaFfrDiEW5mEJjBZJY7UoPNakjM0s0KWYFnfa6MUbRlWR573daXurLlhHDXJNreugan7D2D0K09YUeJy467no+D1iyRUO+u5+tDLdudaYuIOEcQtncMeba1/6QCrUuv4nWwJIE1ZBKHLgdJY0f2J9z/NQb4cRxV4iQ2y/hvc78ACNVvxtjAMtcAAAAASUVORK5CYII=)
slider (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAKCAYAAAFeX0f4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAKaADAAQAAAABAAAACgAAAABlifOxAAABz0lEQVQ4Ea1UvU7CUBSml05EHoBEB3gFGpg0fQE0Tk6suDC4uKBuxsXJ6BswGZaq0bnRqaR9CglPwEJCW79Dem5Of2iq8Sbk/H/349zTU7Msy6nhdLvdJUk+Ko7jk8RosbNcAupKZhjAjMkRBIHWG41GbTQayTzSP1IOIL32er3DlDMxTEI1DGPh+/4BSA7CMBxMp9N8LlAu2EtF+IVsS6m5maZpeZ4XcDApUGzX6/Wj+Xz+xXaZ1EWg59m2vSeSdYx8URRdili52u/394syqFlgu6TGFcV3+dRms/lGoS8TCAysP+FrUYN39U3WsG4mCmq2b3+Kt3cA9swJiVR4se1sZPw5kwEp8EBgpOD5fWJGOp/hcGiwXiap+atOp2MCTI8HZukY/ogLcUFqlNlfJHl8Vii6abfbj7PZrHDOuBiPNAH7W9hZxhFhgMwd5/6XZJIaDxeFIPHUbDavXddd6QAUmqJse2WcdNS/JV3Lhv5s50gyEi5bQB/jwhf2YcBoYZXuph3LhiF+LcHjXQ4kAQTYGudya0hUbIwzTL8LX+qjFznRer22MbyVtoqoK1UNPKGDy8cgRp2rdOi7p22Ep7eoAP/WV0rdV115lS4RST+YjrA2q0ehBQAAAABJRU5ErkJggg==)

`series_control_single.control_styles` boolean

Adv..

`series_control_single.control_title` string

Control title.

`series_control_single.button_group` boolean

Grouped.

Allowed values:

true (On)
false (Off)

`series_control_single.button_group_width_mode` string

Button group width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`series_control_single.button_group_width_fixed` number

Width.

Max: 100

`series_control_single.dropdown_width_mode` string

Dropdown width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`series_control_single.dropdown_width_fixed` number

Width.

Max: 100

`series_control_single.slider_width` number

Slider width. Width of the slider track in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>

Max: 100

`series_control_single.slider_max_label_width` number

Max label width. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, multiples of base font size. If larger than the longest label, only the space required to fit labels will be used.

Max: 100

`series_control_single.slider_step_time` number

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

Min: -100

Max: 100

`series_control_single.slider_loop` boolean

Loop.

`series_control_single.slider_restart_pause` number

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

Max: 100

`series_control_single.sort` boolean

Sorting.

Allowed values:

true (On)
false (Off)

`row_filter_control_all` boolean

Include "All".

`row_filter_control_all_text` string

Name for "All".

`row_filter_control.control_type` string

Control type. Choose between a dropdown, buttons or a <a href="https://help.flourish.studio/article/524-how-to-add-a-time-slider-to-your-line-bar-pie-chart">time slider</a>.

Allowed values:

dropdown (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAKCAYAAAFXtOeCAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAALaADAAQAAAABAAAACgAAAAAWgdR+AAAAtklEQVQ4EdVV3QnEIAw25TbSB2foNI7iMu0MbuUR4ZOQy4OFCL2AmN8vMQallNLVez+DosNSsg/FGLtyDkR0H1rJMqOMiJxz4KWp1jpUsLNsptCBkD/MlFIgzx3IsD9GflTGTLvImN1ajP1x043dVrlr1fIY4xZZYd2kdATfWgu8NCEedtdWcJ+R1BVYnmIbsEzizW8bDO9CJd4cOijxCEH22DGIq1iyBiv2P8eDP4jVDrzE7/oCOyRFCckULykAAAAASUVORK5CYII=)
buttons (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAKCAYAAAFaqpfFAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAK6ADAAQAAAABAAAACgAAAACxtWN2AAAA5klEQVQ4EdVUwQ2DMAwkqBuFBzO0y2QUlqEz5AEzpTrUiyzLEEPbRy2F2D7n4tgWYRiGuZRy75T0lhMxIcZYoKzrWvUeDi0VTSlt2DRN9dQ4jh0WBP4avHneH3kF/SGE5w0GWXPOHRaFfrDiEW5mEJjBZJY7UoPNakjM0s0KWYFnfa6MUbRlWR573daXurLlhHDXJNreugan7D2D0K09YUeJy467no+D1iyRUO+u5+tDLdudaYuIOEcQtncMeba1/6QCrUuv4nWwJIE1ZBKHLgdJY0f2J9z/NQb4cRxV4iQ2y/hvc78ACNVvxtjAMtcAAAAASUVORK5CYII=)
slider (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAKCAYAAAFeX0f4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAKaADAAQAAAABAAAACgAAAABlifOxAAABz0lEQVQ4Ea1UvU7CUBSml05EHoBEB3gFGpg0fQE0Tk6suDC4uKBuxsXJ6BswGZaq0bnRqaR9CglPwEJCW79Dem5Of2iq8Sbk/H/349zTU7Msy6nhdLvdJUk+Ko7jk8RosbNcAupKZhjAjMkRBIHWG41GbTQayTzSP1IOIL32er3DlDMxTEI1DGPh+/4BSA7CMBxMp9N8LlAu2EtF+IVsS6m5maZpeZ4XcDApUGzX6/Wj+Xz+xXaZ1EWg59m2vSeSdYx8URRdili52u/394syqFlgu6TGFcV3+dRms/lGoS8TCAysP+FrUYN39U3WsG4mCmq2b3+Kt3cA9swJiVR4se1sZPw5kwEp8EBgpOD5fWJGOp/hcGiwXiap+atOp2MCTI8HZukY/ogLcUFqlNlfJHl8Vii6abfbj7PZrHDOuBiPNAH7W9hZxhFhgMwd5/6XZJIaDxeFIPHUbDavXddd6QAUmqJse2WcdNS/JV3Lhv5s50gyEi5bQB/jwhf2YcBoYZXuph3LhiF+LcHjXQ4kAQTYGudya0hUbIwzTL8LX+qjFznRer22MbyVtoqoK1UNPKGDy8cgRp2rdOi7p22Ep7eoAP/WV0rdV115lS4RST+YjrA2q0ehBQAAAABJRU5ErkJggg==)

`row_filter_control.control_styles` boolean

Adv..

`row_filter_control.control_title` string

Control title.

`row_filter_control.button_group` boolean

Grouped.

Allowed values:

true (On)
false (Off)

`row_filter_control.button_group_width_mode` string

Button group width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`row_filter_control.button_group_width_fixed` number

Width.

Max: 100

`row_filter_control.dropdown_width_mode` string

Dropdown width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`row_filter_control.dropdown_width_fixed` number

Width.

Max: 100

`row_filter_control.slider_width` number

Slider width. Width of the slider track in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>

Max: 100

`row_filter_control.slider_max_label_width` number

Max: 100

`row_filter_control.slider_step_time` number

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

Min: -100

Max: 100

`row_filter_control.slider_loop` boolean

Loop.

`row_filter_control.slider_restart_pause` number

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

Max: 100

`row_filter_control.sort` boolean

Sorting.

Allowed values:

true (On)
false (Off)

`log_control_y_visible` boolean

Show log control for Y axis. Adds a tabbed control to allow users to switch between <a href="https://help.flourish.studio/article/38-how-to-use-a-logarithmic-scale">log</a> and linear Y scales

`log_control_y.control_type` string

Control type. Choose between a dropdown, buttons or a <a href="https://help.flourish.studio/article/524-how-to-add-a-time-slider-to-your-line-bar-pie-chart">time slider</a>.

Allowed values:

dropdown (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAKCAYAAAFXtOeCAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAALaADAAQAAAABAAAACgAAAAAWgdR+AAAAtklEQVQ4EdVV3QnEIAw25TbSB2foNI7iMu0MbuUR4ZOQy4OFCL2AmN8vMQallNLVez+DosNSsg/FGLtyDkR0H1rJMqOMiJxz4KWp1jpUsLNsptCBkD/MlFIgzx3IsD9GflTGTLvImN1ajP1x043dVrlr1fIY4xZZYd2kdATfWgu8NCEedtdWcJ+R1BVYnmIbsEzizW8bDO9CJd4cOijxCEH22DGIq1iyBiv2P8eDP4jVDrzE7/oCOyRFCckULykAAAAASUVORK5CYII=)
buttons (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAKCAYAAAFaqpfFAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAK6ADAAQAAAABAAAACgAAAACxtWN2AAAA5klEQVQ4EdVUwQ2DMAwkqBuFBzO0y2QUlqEz5AEzpTrUiyzLEEPbRy2F2D7n4tgWYRiGuZRy75T0lhMxIcZYoKzrWvUeDi0VTSlt2DRN9dQ4jh0WBP4avHneH3kF/SGE5w0GWXPOHRaFfrDiEW5mEJjBZJY7UoPNakjM0s0KWYFnfa6MUbRlWR573daXurLlhHDXJNreugan7D2D0K09YUeJy467no+D1iyRUO+u5+tDLdudaYuIOEcQtncMeba1/6QCrUuv4nWwJIE1ZBKHLgdJY0f2J9z/NQb4cRxV4iQ2y/hvc78ACNVvxtjAMtcAAAAASUVORK5CYII=)
slider (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAKCAYAAAFeX0f4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAKaADAAQAAAABAAAACgAAAABlifOxAAABz0lEQVQ4Ea1UvU7CUBSml05EHoBEB3gFGpg0fQE0Tk6suDC4uKBuxsXJ6BswGZaq0bnRqaR9CglPwEJCW79Dem5Of2iq8Sbk/H/349zTU7Msy6nhdLvdJUk+Ko7jk8RosbNcAupKZhjAjMkRBIHWG41GbTQayTzSP1IOIL32er3DlDMxTEI1DGPh+/4BSA7CMBxMp9N8LlAu2EtF+IVsS6m5maZpeZ4XcDApUGzX6/Wj+Xz+xXaZ1EWg59m2vSeSdYx8URRdili52u/394syqFlgu6TGFcV3+dRms/lGoS8TCAysP+FrUYN39U3WsG4mCmq2b3+Kt3cA9swJiVR4se1sZPw5kwEp8EBgpOD5fWJGOp/hcGiwXiap+atOp2MCTI8HZukY/ogLcUFqlNlfJHl8Vii6abfbj7PZrHDOuBiPNAH7W9hZxhFhgMwd5/6XZJIaDxeFIPHUbDavXddd6QAUmqJse2WcdNS/JV3Lhv5s50gyEi5bQB/jwhf2YcBoYZXuph3LhiF+LcHjXQ4kAQTYGudya0hUbIwzTL8LX+qjFznRer22MbyVtoqoK1UNPKGDy8cgRp2rdOi7p22Ep7eoAP/WV0rdV115lS4RST+YjrA2q0ehBQAAAABJRU5ErkJggg==)

`log_control_y.control_styles` boolean

Adv..

`log_control_y.control_title` string

Control title.

`log_control_y.button_group` boolean

Grouped.

Allowed values:

true (On)
false (Off)

`log_control_y.button_group_width_mode` string

Button group width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`log_control_y.button_group_width_fixed` number

Width.

Max: 100

`log_control_y.dropdown_width_mode` string

Dropdown width.

Allowed values:

auto (Auto)
full (Full)
fixed (Fixed)

`log_control_y.dropdown_width_fixed` number

Width.

Max: 100

`log_control_y.slider_width` number

Slider width. Width of the slider track in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>

Max: 100

`log_control_y.slider_max_label_width` number

Max: 100

`log_control_y.slider_step_time` number

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

Min: -100

Max: 100

`log_control_y.slider_loop` boolean

Loop.

`log_control_y.slider_restart_pause` number

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

Max: 100

`log_control_y.sort` boolean

Sorting.

Allowed values:

true (On)
false (Off)

`log_control_y_text_linear` string

Linear text.

`log_control_y_text_log` string

Log text.

`controls_style.font_size` number

Text size.

Max: 5

`controls_style.font_weight` string

Text weight.

Allowed values:

bold (Bold)
normal (Normal)

`controls_style.height` number

Height.

Max: 5

`dropdown_style.background` color

Background.

`dropdown_style.font_color` color

Text color.

`dropdown_style.border_styles_advanced` boolean

Dropdown border styles.

`dropdown_style.border_style` string

Border style. Show border on all sides, or only at the bottom

Allowed values:

all (All sides)
bottom (Bottom)

`dropdown_style.border_width` number

Border width.

Max: 20

`dropdown_style.border_color` color

Color.

`dropdown_style.border_transparency` number

Transparency.

Max: 1

`dropdown_style.border_radius` number

Radius.

Max: 100

`button_style.background` color

Background.

`button_style.background_selected` color

Selected.

`button_style.background_hover` color

Mouse over.

`button_style.font_color` color

Text color.

`button_style.font_color_selected` color

Selected.

`button_style.font_color_hover` color

Mouse over.

`button_style.button_styles_advanced` boolean

Button border styles.

`button_style.border_width` number

Border width.

Max: 20

`button_style.border_color` color

Color.

`button_style.border_transparency` number

Transparency.

Max: 1

`button_style.border_radius` number

Radius.

Max: 100

`controls_container.alignment` string

Alignment.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

`controls_container.controls_spacing` number

Spacing. The space between controls, like dropdowns and adjacent button sets, in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">em</a> units.

Max: 5

`controls_position` string

Control position. If you have two or more controls turned on for your chart, you can change the order the controls appear

Allowed values:

log_series_row (Log, Series, Row)
series_log_row (Series, Log, Row)
log_row_series (Log, Row, Series)
series_row_log (Series, Row, Log)
row_log_series (Row, Log, Series)
row_series_log (Row, Series, Log)

Colors

`color_mode` string

Color mode. By column will set the colors by series. Each column listed in the value column binding in the datasheet will have a different color. By row will instead set the color depending on the data's label/time column binding.

Allowed values:

column (By column)
row (By row)

`color.categorical_palette` colors

Palette.

`color.categorical_extend` boolean

Extend. Automatically generate additional colours when needed to avoid the palette colours 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. <a href="https://help.flourish.studio/article/458-how-to-customize-colors-in-flourish-palettes#:~:text=The%20main%20color%20tool%20in,delete%20and%20add%20new%20colors">Colors can be set</a> using Hex, RGB, color names or RGBA, if you want to set the <a href="https://help.flourish.studio/article/393-add-transparency-to-flourish-colors">opacity</a>. Multiple colors can be set using multiple lines. For example: <hr />Party 1: red Party 2: #4455AA Party 3: rgb(30,168,26)

`color.numeric_type` string

Scale type.

Allowed values:

sequential (Sequential)
diverging (Diverging)

`color.binning` boolean

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

Allowed values:

false (Linear)
true (Binned)

`color.bin_mode` string

Binning mode.

Allowed values:

fixed (Fixed 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". Bins form as follows: <ul> <li>From the data's minimum value (domain minimum) up to the first threshold.</li> <li>Between consecutive thresholds.</li> <li>From the last threshold to the data's maximum value (domain maximum).</li> <ul> For "5;10;15", you'll get four bins based on your data's range.

`color.sequential_palette` string

Palette.

Allowed values:

Oranges (Oranges)
Reds (Reds)
Blues (Blues)
Greens (Greens)
Greys (Greys)
Purples (Purples)
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.

Allowed values:

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

`color.sequential_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`color.sequential_domain_min` number

Min.

`color.sequential_domain_max` number

Max.

`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 (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.

Allowed values:

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

`color.diverging_custom_domain` boolean

Domain.

Allowed values:

false (Auto)
true (Custom)

`color.diverging_domain_min` number

Min.

`color.diverging_domain_mid` number

Mid.

`color.diverging_domain_max` number

Max.

Lines, dots and areas

`line_width` number

Width. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, a multiple of the page's base font size

Max: 1000

`line_opacity` number

Opacity.

Max: 1

`line_curve` string

Line curve.

Allowed values:

curveLinear (Straight)
curveMonotoneX (Curve (X))
curveNatural (Curve (Natural))
curveStep (Step)
curveStepBefore (Step Before)
curveStepAfter (Step After)

`line_dash_items` text

Dashed lines. Specify the series that you would like to display with a dashed line. Multiple dashed lines can be set using multiple lines. For example: <hr />Party 1 Party 2 Party 3

`line_dash_width` number

Dash width.

Max: 1000

`line_dash_space_width` number

Space width.

Max: 1000

`line_interpolate` boolean

Missing data points.

Allowed values:

true (Continue line)
false (Gaps in line)

`shade_between_lines` boolean

Shade areas between lines. <a href="https://help.flourish.studio/article/237-how-to-shade-areas-between-lines">Shade the gap</a> between any two lines on your chart

`shade_between_lines_config` text

Which lines to shade between. <a href="https://help.flourish.studio/article/237-how-to-shade-areas-between-lines">Specify each area</a> as a pair of line names separated by :: . For example: Series A :: Series B Series C :: Series D You can optionally add a specific color and opacity for each area, e.g. Series A :: Series B :: red :: 0.1

`shade_between_lines_color` color

Color.

`shade_between_lines_opacity` number

Opacity.

Max: 1

`area_opacity` number

Opacity.

Max: 1

`dot_mode` string

"Auto will automatically show dots on lines if fewer than 250 data points. Note: avoid showing dots for large datasets since it can lead to poor performance issues and poor-looking charts"

Allowed values:

auto (Auto)
on (On)
off (Off)

`dot_opacity` number

Opacity.

Max: 1

`dot_radius` number

Radius. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, a multiple of the page's base font size

Max: 3

`dot_radius_last` number

Final dot scale (%). Making the last point on a line larger can help emphasise the final value

Max: 1000

`dot_hollow` boolean

Hollow.

Bars

`bar_height` number

Bar height. The approximate height of the bar, the exact height depends on padding and label style. <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">Specified in rems</a>. Ignored if the chart is embedded at a fixed height.

Min: 0.5

Max: 1000

`uniform_column_width` boolean

Uniform column width.

`uniform_bar_height` boolean

Uniform bar height.

`column_padding_inner` number

Spacing (main). Space between bar stacks or groups, as a % of the width of a whole bar stack or group

Max: 100

`column_padding_in_group` number

Spacing (in group). Space between bars in groups, as a % of the width of a single bar in the group. Ignored if only a single series is selected.

Max: 100

`column_padding_stack` number

Spacing (in stack). Space each bar in the stack, in tenths of a <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rem</a>

Max: 1

`column_opacity` number

Bar opacity.

Min: 0.1

Max: 1

Segments

`donut_inner_radius` number

Doughnut hole (%).

Max: 99

`donut_corner_radius` number

Corner curve (pixels).

Max: 100

`donut_pad_angle` number

Segment padding (degrees).

Max: 10

`donut_auto_scale` boolean

Scale pies based on data. Scale each pie chart in the grid so that the area of each pie/donut reflect its value

Labels

`bar_labels_above` boolean

Label style.

Allowed values:

true (Above bars)
false (Axis)

`bar_labels_color` color

Color.

`bar_labels_font_size` number

Size. When in Standard or Aspect ratio height mode, the font size of the labels will be limited to the space available. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>.

Max: 100

`bar_labels_weight` string

Allowed values:

600 (Bold)
400 (Normal)

`line_end_labels` boolean

Show labels on lines. Show <a href="https://help.flourish.studio/article/263-adding-line-labels-to-your-line-chart#:~:text=Go%20to%20the%20%22Labels%22%20section,%22Show%20labels%20on%20lines%22.&text=You%20can%20now%20customize%20your%20line%20labels%20to%20however%20you%20see%20fit.">series labels</a> on the end of lines if there's enough space

`line_labels.max_width` number

Max label width. The maximum allowed label width

`line_labels.overlap_mode` string

Overlaps. What to do with overlaps

Allowed values:

spread (Spread them out)
hide (Hide them)
none (Do nothing)

`line_labels.spreading_margin` number

Space between labels. The space left between labels when spreading them out to avoid overlaps

`line_labels.data_point_margin` number

Distance. The space between the data point and the label in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a> (a multiple of base font size)

`line_labels.show_only_labels` text

Show only certain labels. Manually specify which labels you'd like to display (one entry per line that should match headers from the Values columns)

`line_labels.text_color` color

Color. If cleared, uses the main text color from the Layout settings panel

`line_labels.text_size` number

Size.

Max: 100

`line_labels.text_bg_color` color

Outline. If cleared, uses the main background color from the Layout settings panel

`line_labels.text_bg_size` number

Outline width. As a % of the font size

Max: 100

`line_labels.text_line_height` number

Line height.

`line_labels.text_max_lines` number

Max lines. The max number of lines for each label

`line_labels.text_weight` string

Weight.

Predefined values:

400 (Normal)
700 (Bold)

`line_labels.lines` string

Connector lines.

Allowed values:

auto (Auto)
on (On)
off (Off)

`line_labels.line_style` string

Line style.

Allowed values:

straight (Straight)
step (Step)

`line_labels.line_color` color

Color. If cleared, uses the main text color from the Layout settings panel

`line_labels.line_width` number

Width. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a> (a multiple of base font size)

Max: 0.5

`line_labels.line_range` number

Length. The width of the space given over to lines; in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, a multiple of base font size

`line_labels.line_padding` number

Padding. The padding to the left and right of the line; in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, a multiple of base font size

`labels` boolean

Show labels on data points.

`labels_hide_overlaps` boolean

Hide overlapping labels.

`labels_dot_center` boolean

Position labels on center of dot.

`labels_column_align` string

Bar label alignment. The final above option puts the labels above the bars in standard column charts. In stacked charts, where the space above the stack is reserved for stack total the labels falls back to top alignment.

Allowed values:

bottom (fa-arrow-down)
middle (fa-minus)
top (fa-arrow-up)
above (fa-level-up)

`labels_column_padding` number

Padding. Space above or below, as a proportion of the font size in <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>

Min: -100

Max: 100

`labels_bar_align` string

Label alignment. In stacked bar charts the final out(outside of bar) option falls back to right alignment, since the space after the stack is reserved for stack total labels (see below)

Allowed values:

left (fa-align-left)
center (fa-align-center)
right (fa-align-right)
out (fa-sign-out)

`labels_bar_autohide` boolean

Hide if too big. Turn off to force labels to show, even if they will overflow the bars. Ignored when labels are not inside the bars.

`labels_color_mode` string

Text color. Contrast mode is black or white depending on the color of the data point (or the background color for labels positioned over the background)

Allowed values:

auto (Auto)
data (Match data)
contrast (Contrast)
fixed (Fixed)

`labels_fixed_color` color

Color.

`labels_font_weight` string

Weight.

Allowed values:

600 (Bold)
400 (Normal)

`labels_font_size_mode` string

Size.

Allowed values:

auto (Auto)
fixed (Fixed)

`labels_font_size` number

Size.

Max: 100

`labels_bg_mode` string

Outline. A text outline/background can make the text more readable by increasing contrast

Allowed values:

on (On)
off (Off)

`labels_bg_size` number

Size. Size of the background, as % of text size

Max: 100

`labels_content` string

Label content.

Allowed values:

auto (Auto)
value (Value)
label (Label)
both (Both)

`stack_labels` boolean

Show labels for stack totals.

`stack_labels_color` color

Color.

`stack_labels_font_size` number

Size.

Max: 100

`stack_labels_weight` string

Weight.

Allowed values:

600 (Bold)
400 (Normal)

X axis

`x.axis_position` string

Position.

Allowed values:

bottom (Bottom)
float-below (Float ↓)
float-above (Float ↑)
top (Top)
off (Hidden)

`x.y_axis_position` string

Y value. Vertical position of the x axis on the y scale

`x.numeric_scale_type` string

Type.

Allowed values:

linear (Linear)
log (Log)

`x.linear_min` number

Min.

`x.linear_max` number

Max.

`x.log_min` number

Min.

`x.log_max` number

Max.

`x.datetime_min` string

Min (date). Use the input date format as specified in the datasheet.

`x.datetime_max` string

Max (date). Use the input date format as specified in the datasheet.

`x.flip` boolean

Flip axis.

`x.show_scale_settings` boolean

Configure default min/max.

`x.nice` boolean

Round min/max. When enabled, scales automatically extend to "nice" rounded start/end values, such as hundreds or whole years. Overridden by any explicitly specified scale min and max.

Allowed values:

true (On)
false (Off)

`x.zero_axis` string

Include zero. Whether to extend the axis to include zero if the data values are all positive or all negative. Overridden by any explicitly specified scale min and max.

Allowed values:

auto (Auto)
on (On)
off (Off)

`x.title_mode` string

Type.

Allowed values:

auto (Auto)
custom (Custom)

`x.title` string

Text.

`x.title_styling` boolean

Styling.

`x.title_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`x.title_color` color

Color.

`x.title_size` number

Size.

`x.title_padding` number

Padding.

`x.tick_label_position` string

Position.

Allowed values:

default (Default)
left (Left)
right (Right)

`x.tick_label_styling` boolean

Styling.

`x.tick_label_size` number

Size.

`x.tick_label_color` color

Color.

`x.tick_padding` number

Padding.

`x.tick_label_angle` string

Angle.

Allowed values:

0 (0°)
30 (30°)
45 (45°)
60 (60°)
90 (90°)

`x.tick_label_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`x.tick_label_max_lines` number

Max lines.

Min: 1

`x.tick_label_line_height` number

Line height.

`x.tick_label_space_mode` string

Space mode. How the vertical space available for tick labels is determined. "Auto" means that the space is automatically determined. "Max" lets you specify the maximum vertical space tick labels may occupy. "Fixed" lets you specify a fixed amount of vertical space for tick labels. Tick labels will be truncated to fit within the allocated horizontal space.

Allowed values:

auto (Auto)
max (Max)
fixed (Fixed)

`x.tick_label_space` number

Space. The space allocated for tick labels (relative to the root font size).

`x.tick_mode` string

Mode. Determines how the tick values are chosen. "Auto" mode chooses the ticks automatically. "Number" mode lets you specify how many ticks are drawn. "Custom" mode lets you specify which ticks are drawn. If the axis is categorical, "Number" mode is ignored.

Allowed values:

auto (Auto)
number (Number)
custom (Custom)

`x.tick_number` number

Number. Approximate number of ticks or gridlines. The actual number will depend on the range of values, chart size, etc.

`x.tick_custom` text

One tick label per line. Specify the ticks to show, one per line. For dates, use the input format as specified in the datasheet. You can also use {{FIRST}} and {{LAST}} to add ticks at the minimum and maximum of the axis. For example: {{FIRST}} 25000 50000 75000 {{LAST}}

`x.line_and_tick_color` color

Line color.

`x.line_and_tick_width` number

Line width.

`x.tick_length` number

Tick length.

`x.tick_side` string

Tick side.

Allowed values:

out (Out)
in (In)

`x.line_visible` boolean

Axis line.

`x.edge_padding` number

Edge padding (%). Space between start/end of axis line and first/last category tick as a percentage of the spacing between ticks

Max: 100

`x.gridlines_visible` boolean

Allowed values:

true (On)
false (Off)

`x.gridlines_styling` boolean

Styling.

`x.gridline_color` color

Color.

`x.gridline_style` string

Style.

Allowed values:

solid (Solid)
dash (Dashed)
dot (Dotted)
dot_dash (Dot-dashed)

`x.gridline_width` number

Width.

`x.gridline_category_dividers` boolean

Put lines between categories. On a categorical axis this option disables the gridline on each tick and instead adds rules between each category to give a table-like design.

`x.gridline_category_dividers_extend` boolean

Extend. Extends the dividers into the axis margins.

Y axis

`y.axis_visible` boolean

Allowed values:

true (Axis visible)
false (Axis hidden)

`y.numeric_scale_type` string

Type.

Allowed values:

linear (Linear)
log (Log)

`y.linear_min` number

Min.

`y.linear_max` number

Max.

`y.log_min` number

Min.

`y.log_max` number

Max.

`y.datetime_min` string

Min (date). Use the same format as displayed in the axis.

`y.datetime_max` string

Max (date). Use the same format as displayed in the axis.

`y.flip` boolean

Flip axis.

`y.show_scale_settings` boolean

Configure default min/max.

`y.nice` boolean

Round min/max. When enabled, scales automatically extend to "nice" rounded start/end values, such as hundreds or whole years.

Allowed values:

true (On)
false (Off)

`y.zero_axis` string

Include zero. Whether to extend the axis to include zero if the data values are all positive or all negative.

Allowed values:

auto (Auto)
on (On)
off (Off)

`y.title_mode` string

Type.

Allowed values:

auto (Auto)
custom (Custom)

`y.title` string

Text.

`y.title_styling` boolean

Styling.

`y.title_position` string

Position.

Allowed values:

side (Side)
end (Top/bottom)

`y.title_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`y.title_color` color

Color.

`y.title_size` number

Size.

`y.title_padding` number

Padding.

`y.tick_label_position` string

Position.

Allowed values:

default (Default)
above (Above)
below (Below)

`y.tick_label_styling` boolean

Styling.

`y.tick_label_size` number

Size.

`y.tick_label_color` color

Color.

`y.tick_padding` number

Padding.

`y.tick_label_angle` string

Angle.

Allowed values:

0 (0°)
30 (30°)
45 (45°)
60 (60°)
90 (90°)

`y.tick_label_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`y.tick_label_max_lines` number

Max lines.

Min: 1

`y.tick_label_line_height` number

Line height.

`y.tick_label_space_mode` string

Space mode. Sets how the horizontal space available for tick labels is determined. "Auto" means that the space is automatically determined. "Max" lets you specify the maximum horizontal space tick labels may occupy. "Fixed" lets you specify a fixed amount of horizontal space for tick labels. Tick labels will be truncated to fit within the allocated horizontal space.

Allowed values:

auto (Auto)
max (Max)
fixed (Fixed)

`y.tick_label_space` number

Space. The space allocated for tick labels (relative to the root font size).

`y.tick_mode` string

Allowed values:

auto (Auto)
number (Number)
custom (Custom)

`y.tick_number` number

Number. Approximate number of ticks or gridlines. The actual number will depend on the range of values, chart size, etc.

`y.tick_custom` text

`y.line_and_tick_color` color

Line color.

`y.line_and_tick_width` number

Line width.

`y.tick_length` number

Tick length.

`y.tick_side` string

Side.

Allowed values:

out (Out)
in (In)

`y.line_visible` boolean

Axis line.

`y.edge_padding` number

Edge padding (%). Space between start/end of axis line and first/last category tick as a percentage of the spacing between ticks

Max: 100

`y.gridlines_visible` boolean

Allowed values:

true (On)
false (Off)

`y.gridlines_styling` boolean

Styling.

`y.gridline_color` color

Color.

`y.gridline_style` string

Style.

Allowed values:

solid (Solid)
dash (Dashed)
dot (Dotted)
dot_dash (Dot-dashed)

`y.gridline_width` number

Width.

`y.gridline_category_dividers` boolean

Put lines between categories. On a categorical axis this option disables the gridline on each tick and instead adds rules between each category to give a table-like design. Ignored for date and numeric axes.

`y.gridline_category_dividers_extend` boolean

Extend. Extends the dividers into the axis margins

Y axis (right)

`y2.axis_visible` boolean

Allowed values:

true (Axis visible)
false (Axis hidden)

`y2.numeric_scale_type` string

Type.

Allowed values:

linear (Linear)
log (Log)

`y2.linear_min` number

Min.

`y2.linear_max` number

Max.

`y2.log_min` number

Min.

`y2.log_max` number

Max.

`y2.datetime_min` string

Min (date).

`y2.datetime_max` string

Max (date).

`y2.flip` boolean

Flip axis.

`y2.show_scale_settings` boolean

Configure default min/max.

`y2.nice` boolean

Round min/max. When enabled, scales automatically extend to "nice" rounded start/end values, such as hundreds or whole years.

Allowed values:

true (On)
false (Off)

`y2.zero_axis` string

Include zero. Whether to extend the axis to include zero if the data values are all positive or all negative.

Allowed values:

auto (Auto)
on (On)
off (Off)

`y2.title_mode` string

Type.

Allowed values:

auto (Auto)
custom (Custom)

`y2.title` string

Text.

`y2.title_styling` boolean

Styling.

`y2.title_position` string

Position.

Allowed values:

side (Side)
end (Top/bottom)

`y2.title_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`y2.title_color` color

Color.

`y2.title_size` number

Size.

`y2.title_padding` number

Padding.

`y2.tick_label_position` string

Position.

Allowed values:

default (Default)
above (Above)
below (Below)

`y2.tick_label_styling` boolean

Styling.

`y2.tick_label_size` number

Size.

`y2.tick_label_color` color

Color.

`y2.tick_padding` number

Padding.

`y2.tick_label_angle` string

Angle.

Allowed values:

0 (0°)
30 (30°)
45 (45°)
60 (60°)
90 (90°)

`y2.tick_label_weight` string

Weight.

Allowed values:

bold (Bold)
normal (Regular)

`y2.tick_label_max_lines` number

Max lines.

Min: 1

`y2.tick_label_line_height` number

Line height.

`y2.tick_label_space_mode` string

Allowed values:

auto (Auto)
max (Max)
fixed (Fixed)

`y2.tick_label_space` number

Space. The space allocated for tick labels (relative to the root font size).

`y2.tick_mode` string

Allowed values:

auto (Auto)
number (Number)
custom (Custom)

`y2.tick_number` number

Number. Approximate number of ticks or gridlines. The actual number will depend on the range of values, chart size, etc.

`y2.tick_custom` text

`y2.line_and_tick_color` color

Line color.

`y2.line_and_tick_width` number

Line width.

`y2.tick_length` number

Tick length.

`y2.tick_side` string

Side.

Allowed values:

out (Out)
in (In)

`y2.line_visible` boolean

Axis line.

`y2.edge_padding` number

Edge padding (%). Space between start/end of axis line and first/last category tick as a percentage of the spacing between ticks

Max: 100

`y2.gridlines_visible` boolean

Allowed values:

true (On)
false (Off)

`y2.gridlines_styling` boolean

Styling.

`y2.gridline_color` color

Color.

`y2.gridline_style` string

Style.

Allowed values:

solid (Solid)
dash (Dashed)
dot (Dotted)
dot_dash (Dot-dashed)

`y2.gridline_width` number

Width.

`y2.gridline_category_dividers` boolean

`y2.gridline_category_dividers_extend` boolean

Extend. Extends the dividers into the axis margins

Plot background

`chart_bg.background_color_enabled` boolean

Color.

Allowed values:

true (On)
false (Off)

`chart_bg.background_image_enabled` boolean

Image.

Allowed values:

true (On)
false (Off)

`chart_bg.background_color` color

Color.

`chart_bg.background_image_src` url

Image URL.

`chart_bg.background_image_size` string

Size.

Allowed values:

stretch (Stretch)
slice (Fill)
meet (Fit)

`chart_bg.background_image_position` string

Position.

Allowed values:

xMinYMin (Top left)
xMidYMin (Top center)
xMaxYMin (Top right)
xMaxYMid (Center left)
xMidYMid (Center)
xMaxYMid (Center right)
xMinYMax (Bottom left)
xMidYMax (Bottom center)
xMaxYMax (Bottom right)

Number formatting

`number_format_labels.prefix` string

Prefix. <a href="https://help.flourish.studio/article/37-how-to-change-number-formating">Text</a> to place in front of a number

`number_format_labels.suffix` string

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

`number_format_labels.n_dec` number

Decimal places. Decimal places. You can also 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

`number_format_labels.advanced` boolean

Advanced.

`number_format_labels.negative_sign` string

Styling of negative numbers.

Allowed values:

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

`number_format_labels.strip_zeros` boolean

Remove trailing zeros.

`number_format_labels.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_labels.transform_labels` boolean

Multiply/divide values.

`number_format_labels.transform` string

Allowed values:

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

`number_format_labels.multiply_divide_constant` number

`number_format_labels.exponentiate_constant` number

`number_format.prefix` string

Prefix. <a href="https://help.flourish.studio/article/37-how-to-change-number-formating">Text</a> to place in front of a number

`number_format.suffix` string

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

`number_format.n_dec` number

Min: -10

Max: 10

`number_format.advanced` boolean

Advanced.

`number_format.negative_sign` string

Styling of negative numbers.

Allowed values:

-$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

Allowed values:

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

`number_format.multiply_divide_constant` number

`number_format.exponentiate_constant` number

`number_format_prop` boolean

Show % values. Toggles between showing the raw values from the datasheet and the computed percent values for the row in popups/panels

`number_format_secondary.prefix` string

Prefix. <a href="https://help.flourish.studio/article/37-how-to-change-number-formating">Text</a> to place in front of a number

`number_format_secondary.suffix` string

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

`number_format_secondary.n_dec` number

Min: -10

Max: 10

`number_format_secondary.advanced` boolean

Advanced.

`number_format_secondary.negative_sign` string

Styling of negative numbers.

Allowed values:

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

`number_format_secondary.strip_zeros` boolean

Remove trailing zeros.

`number_format_secondary.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_secondary.transform_labels` boolean

Multiply/divide values.

`number_format_secondary.transform` string

Allowed values:

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

`number_format_secondary.multiply_divide_constant` number

`number_format_secondary.exponentiate_constant` number

Legend

`legend_mode` string

Legend mode. Auto mode hides the legend in certain situations, such as when each color is already explained by the chart titles in a <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">grid of charts</a>

Allowed values:

auto (Auto)
on (On)
off (Off)

`legend_filter_mode` string

Click legend to filter data. Single select: When clicked only shows the series selected Multi select: When clicked, hides series selected. Multiple series can be hidden Filterable legends are ignored in certain situations, such as when shading by series and using a <a href="https://help.flourish.studio/article/573-how-row-and-column-filters-work">series filter</a>

Allowed values:

none (Off)
filter-in (Single select)
filter-out (Multi select)

`legend_container.alignment` string

Alignment.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

`legend_container.orientation` string

Orientation.

Allowed values:

horizontal (Horizontal)
vertical (Vertical)

`legend_container.title_weight` string

Title weight.

Allowed values:

bold (Bold)
normal (Normal)

`legend_container.text_weight` string

Text weight.

Allowed values:

bold (Bold)
normal (Normal)

`legend_container.text_color` color

Color.

`legend_container.text_size` number

Size.

Max: 10

`legend_categorical.show_legend` boolean

Allowed values:

true (Enabled)
false (Disabled)

`legend_categorical.title_mode` string

Title mode.

Allowed values:

auto (Auto)
custom (Custom)

`legend_categorical.title` string

Title.

`legend_categorical.swatch_width` number

Width.

`legend_categorical.swatch_height` number

Height.

`legend_categorical.swatch_radius` number

Roundness. The radius of the corners of the swatch (in pixels)

`legend_categorical.legend_items_padding` number

Padding. Padding between legend items (<a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">in rems</a>)

`legend_categorical.swatch_outline` boolean

Outline. An optional outline for the swatch in the legend

`legend_categorical.swatch_outline_color` color

Color.

`legend_categorical.order_override` text

Custom order override. Manually specify the order of legend entries (one entry per line)

`legend_categorical.icon_height` number

Height. Height of icon (<a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">in rems</a>)

`legend_categorical.icon_color` color

Color. Fallback color (icon color if not determined by template)

`legend_categorical.max_width` number

Max width.

`legend_categorical.orientation` string

Orientation.

Allowed values:

horizontal (Horizontal)
vertical (Vertical)

`legend_position` string

Legend position.

Allowed values:

above (Above)
below (Below)

`text_legend` string

Add data colors to header text. When selected, this will <a href="https://help.flourish.studio/article/349-how-to-display-legend-colors-in-your-header-text">change the color of any text in your header</a> which matches the name of a series in your data. This feature can be used instead of a legend when there are a small number of series, or it can be used to highlight a particular series. Note using optional <a href="https://help.flourish.studio/article/265-how-to-color-parts-of-text-with-custom-html">HTML</a> in the header is disabled if using this feature.

Allowed values:

auto (Auto)
custom (Custom)
off (Off)

`text_legend_title` boolean

Title.

`text_legend_subtitle` boolean

Subtitle.

`text_legend_bold` boolean

Bold. If checked, always use bold for colored items

Popups & panels

Allowed values:

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

Popup content.

Allowed values:

false (Auto)
true (Custom)

Show popup styles.

Popup custom header. Use <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{VALUE}}</a> to include the numerical value of the current data point, or <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{SERIES}}</a> to display its series name. For any other <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups">selected columns</a> use {{column_name}}. Advanced users can <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups#html">include HTML</a> to apply layouts, formatting, images, etc. You can also <a href="https://help.flourish.studio/article/490-how-to-add-conditional-statements-to-your-popups">hide content</a> based on a column name being empty using <pre>{{#if column_name}} Text to display when column_name is not empty {{/if}}.</pre> For example, <pre>{{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}</pre>

Popup custom main content. Use <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{VALUE}}</a> to include the numerical value of the current data point, or <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{SERIES}}</a> to display its series name. For any other <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups">selected columns</a> use {{column_name}}. Advanced users can <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups#html">include HTML</a> to apply layouts, formatting, images, etc. You can also <a href="https://help.flourish.studio/article/490-how-to-add-conditional-statements-to-your-popups">hide content</a> based on a column name being empty using <pre>{{#if column_name}} Text to display when column_name is not empty {{/if}}.</pre> For example, <pre>{{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}</pre>

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

Max width. In <a href="https://help.flourish.studio/article/192-how-sizing-with-rems-works-in-flourish">rems</a>, multiples of base font size. Leave blank to let the width adjust based on the contents.

Text size.

Text color.

Align.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

Fill color.

Fill opacity.

Max: 1

Padding.

Radius. Corner radius of popup

Header style.

Allowed values:

block (Header block)
inline (Header inline)

Background.

Text.

List type.

Allowed values:

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

Label weight.

Allowed values:

normal (Normal)
bold (Bold)

List separator.

Predefined values:

: (:)
– (–)
(Empty space)
  (Line break)

Shadow.

Pointer.

Allowed values:

overlay (Overlay)
left (Left)
right (Right)
top (Top)
bottom (Bottom)

Open duration.

Max: 2000

Always show.

Placeholder content.

Panel content.

Allowed values:

false (Auto)
true (Custom)

Show panel styles.

Panel custom header. Use <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{VALUE}}</a> to include the numerical value of the current data point, or <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{SERIES}}</a> to display its series name. For any other <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups">selected columns</a> use {{column_name}}. Advanced users can <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups#html">include HTML</a> to apply layouts, formatting, images, etc. You can also <a href="https://help.flourish.studio/article/490-how-to-add-conditional-statements-to-your-popups">hide content</a> based on a column name being empty using <pre>{{#if column_name}} Text to display when column_name is not empty {{/if}}.</pre> For example, <pre>{{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}</pre>

Panel custom main content. Use <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{VALUE}}</a> to include the numerical value of the current data point, or <a href="https://help.flourish.studio/article/139-how-to-customize-your-popups-in-the-line-bar-and-pie-template#value-and-series">{{SERIES}}</a> to display its series name. For any other <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups">selected columns</a> use {{column_name}}. Advanced users can <a href="https://help.flourish.studio/article/69-how-to-add-custom-content-to-your-popups#html">include HTML</a> to apply layouts, formatting, images, etc. You can also <a href="https://help.flourish.studio/article/490-how-to-add-conditional-statements-to-your-popups">hide content</a> based on a column name being empty using <pre>{{#if column_name}} Text to display when column_name is not empty {{/if}}.</pre> For example, <pre>{{Country}} {{#if Capital}}(Capital: {{Capital}}){{/if}}</pre>

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

Allowed values:

click (Click position)
center (Center)

Text color.

Text size.

Alignment.

Allowed values:

start (fa-align-left)
center (fa-align-center)
end (fa-align-right)

Fill color.

Fill opacity.

Max: 1

Padding.

Radius. Corner radius of panel

List type.

Allowed values:

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

Label weight.

Allowed values:

normal (Normal)
bold (Bold)

List separator.

Predefined values:

: (:)
– (–)
(Empty space)
  (Line break)

Shadow.

`popup_color_headers` boolean

Color headers to match data.

`show_series_text` boolean

Set series info in popups. Allows you to <a href="https://help.flourish.studio/article/572-how-to-set-series-info-in-popups">add information</a> about each series/column (e.g. each line) to the popups. Note: This is incompatible with custom popup content.

`popup_series_text` text

Popup content for series. 'Adds <a href="https://help.flourish.studio/article/572-how-to-set-series-info-in-popups">content to the popup about the series.</a> Separate column name and text with a double colon. For example: <hr />Series 1 :: Comment about Series 1 Series 2 :: Comment about series 2'

Annotations

`axes_highlights.x_enabled` boolean

Show highlights on the x axis.

`axes_highlights.x_lines` text

One per line, in format “My label :: 2012”. One per line, using the <a href="https://help.flourish.studio/article/88-axis-highlights">format</a>: <pre> My label :: 2012 </pre> For dates, use the <a href="https://help.flourish.studio/article/508-data-typing-how-to-change-the-date-formatting-through-the-data-tab">input format</a> as specified in the datasheet. You can optionally specify a line color and a text color. For visualizations using a <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">grid of charts</a>, you can apply the annotation only on a specific chart. Use the format: <pre> My label :: 2012 :: line_color / text_color :: facet_name </pre> For example, <pre> My label :: 2012 :: #eb0000 / #0084bd :: Category 1</pre> If you want to add an annotation to just one specific chart but do not want to color the line/text, you can leave that part blank. For example: <pre> My label :: 2012 :: :: Category 1 </pre>

`axes_highlights.x_line_color` color

Line color.

`axes_highlights.x_line_width` number

Line width.

`axes_highlights.x_line_dash` number

Dash.

`axes_highlights.x_areas` text

One per line, in format “My label :: 2013 >> 2015”. One per line, using the <a href="https://help.flourish.studio/article/88-axis-highlights">format</a>: <pre> My label :: date >> date </pre> For dates, use the <a href="https://help.flourish.studio/article/508-data-typing-how-to-change-the-date-formatting-through-the-data-tab">input format</a> as specified in the datasheet. You can optionally specify a line color and a text color. For visualizations using a <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">grid of charts</a>, you can apply the annotation only on a specific chart. Use the format: <pre> My label :: 2012 :: area_color / text_color :: facet_name</pre>For example, <pre> My label :: 2012 >> 2015 :: #eb0000 / #0084bd :: Category 1 </pre>

`axes_highlights.x_area_color` color

Area.

`axes_highlights.x_area_opacity` number

Area opacity.

`axes_highlights.x_area_texture` string

Area texture.

Allowed values:

none (fa-stop)
fl-pattern-diagonal (fa-bars)
fl-pattern-grid (fa-th)
fl-pattern-dots (fa-circle-o)

`axes_highlights.x_label_vertical` boolean

Vertical.

`axes_highlights.x_label_y_position` string

Y position. Vertically position the label at the top, bottom or in the middle of the line. This setting will be ignored if there is not enough space for the selected position

Allowed values:

bottom (fa-arrow-down)
middle (fa-minus)
top (fa-arrow-up)

`axes_highlights.x_label_x_position` string

X position. Horizontally position the label on the left, the right or in the middle of the line. This setting will be ignored if there is not enough space for the selected position

Allowed values:

left (fa-arrow-left)
middle (fa-minus)
right (fa-arrow-right)

`axes_highlights.x_label_max_width` number

Max width.

Min: 1

`axes_highlights.x_font_size` number

Font size.

`axes_highlights.x_font_weight` string

Font weight.

Allowed values:

regular (Regular)
bold (Bold)

`axes_highlights.x_label_color` color

Text.

`axes_highlights.x_shadow_color` color

Shadow.

`axes_highlights.x_shadow_enabled` boolean

Shadow.

`axes_highlights.y_enabled` boolean

Show highlights on the y axis.

`axes_highlights.y_lines` text

One per line, in format “My label :: 5000”. One per line, using the <a href="https://help.flourish.studio/article/88-axis-highlights">format</a>: <pre> My label :: 2012 </pre> For dates, use the <a href="https://help.flourish.studio/article/508-data-typing-how-to-change-the-date-formatting-through-the-data-tab">input format</a> as specified in the datasheet. You can optionally specify a line color and a text color. For visualizations using a <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">grid of charts</a>, you can apply the annotation only on a specific chart. Use the format: <pre> My label :: 2012 :: line_color / text_color :: facet_name </pre> For example: <pre> My label :: 2012 :: #eb0000 / #0084bd :: Category 1 </pre> If you want to add an annotation to just one specific chart but do not want to color the line/text, you can leave that part blank. For example: <pre> My label :: 2012 :: :: Category 1 </pre>

`axes_highlights.y_line_color` color

Line color.

`axes_highlights.y_line_width` number

line width.

`axes_highlights.y_line_dash` number

Dash.

`axes_highlights.y_areas` text

One per line, in format “My label :: 2000 >> 8000”. One per line, using the <a href="https://help.flourish.studio/article/88-axis-highlights">format</a>: <pre> My label :: date >> date </pre> For dates, use the <a href="https://help.flourish.studio/article/508-data-typing-how-to-change-the-date-formatting-through-the-data-tab">input format</a> as specified in the datasheet. You can optionally specify a line color and a text color. For visualizations using a <a href="https://help.flourish.studio/article/266-how-to-create-a-grid-of-charts">grid of charts</a>, you can apply the annotation only on a specific chart. Use the format: <pre> My label :: 2012 :: area_color / text_color :: facet_name </pre> For example: <pre> My label :: 2012 >> 2015 :: #eb0000 / #0084bd :: Category 1 </pre>

`axes_highlights.y_area_color` color

Area.

`axes_highlights.y_area_opacity` number

Area opacity.

`axes_highlights.y_area_texture` string

Area texture.

Allowed values:

none (fa-stop)
fl-pattern-diagonal (fa-bars)
fl-pattern-grid (fa-th)
fl-pattern-dots (fa-circle-o)

`axes_highlights.y_label_x_position` string

X position. Horizontally position label on the left, the middle or the right end of the line. This setting will be ignored if there is not enough space for the selected position

Allowed values:

left (fa-arrow-left)
middle (fa-minus)
right (fa-arrow-right)

`axes_highlights.y_label_y_position` string

Y position. Vertically position the label above, below or in the middle of the line. This setting will be ignored if there is not enough space for the selected position

Allowed values:

above (fa-arrow-up)
middle (fa-minus)
below (fa-arrow-down)

`axes_highlights.y_label_max_width` number

Max width.

Min: 1

`axes_highlights.y_font_size` number

Font size.

`axes_highlights.y_font_weight` string

Font weight.

Allowed values:

regular (Regular)
bold (Bold)

`axes_highlights.y_label_color` color

Text.

`axes_highlights.y_shadow_color` color

Shadow.

`axes_highlights.y_shadow_enabled` boolean

Shadow.

`annotations_styles` boolean

Show styling options.

`annotations.defaults.text_weight` string

Weight.

Allowed values:

normal (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCA3IDMwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2My4xICg5MjQ1MikgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+bm9ybWFsPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Im5vcm1hbCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTEuMTA1OTQ3OTYsMTkgTDEuOTI1NjUwNTYsMTYuNTYwOTc1NiBMNS4wMzUzMTU5OSwxNi41NjA5NzU2IEw1Ljg0MjAwNzQzLDE5IEw3LDE5IEw0LjExMTUyNDE2LDExIEwyLjg4ODQ3NTg0LDExIEwwLDE5IEwxLjEwNTk0Nzk2LDE5IFogTTQuNzYyMDgxNzgsMTUuNzQzOTAyNCBMMi4xOTg4ODQ3NiwxNS43NDM5MDI0IEwyLjYwMjIzMDQ4LDE0LjUyNDM5MDIgQzIuNzU4MzY0MzEsMTQuMDc3MjM1OCAyLjkwNTgyNDA0LDEzLjYzMjExMzggMy4wNDQ2MDk2NywxMy4xODkwMjQ0IEMzLjE4MzM5NTI5LDEyLjc0NTkzNSAzLjMxNzg0Mzg3LDEyLjI5MjY4MjkgMy40NDc5NTUzOSwxMS44MjkyNjgzIEwzLjQ0Nzk1NTM5LDExLjgyOTI2ODMgTDMuNSwxMS44MjkyNjgzIEMzLjYzODc4NTYzLDEyLjI5MjY4MjkgMy43Nzc1NzEyNSwxMi43NDU5MzUgMy45MTYzNTY4OCwxMy4xODkwMjQ0IEM0LjA1NTE0MjUsMTMuNjMyMTEzOCA0LjIwMjYwMjIzLDE0LjA3NzIzNTggNC4zNTg3MzYwNiwxNC41MjQzOTAyIEw0LjM1ODczNjA2LDE0LjUyNDM5MDIgTDQuNzYyMDgxNzgsMTUuNzQzOTAyNCBaIiBpZD0iQSIgZmlsbD0iIzMzMzMzMyIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==)
bold (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCA4IDMwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2My4xICg5MjQ1MikgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+Ym9sZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJib2xkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMi4zMzExMjU4MywxOSBMMi43NTQ5NjY4OSwxNy4wODkyMzA4IEw1LjE2NTU2MjkxLDE3LjA4OTIzMDggTDUuNTg5NDAzOTcsMTkgTDgsMTkgTDUuMzc3NDgzNDQsMTAgTDIuNjIyNTE2NTYsMTAgTDAsMTkgTDIuMzMxMTI1ODMsMTkgWiBNNC43NTQ5NjY4OSwxNS4yNDc2OTIzIEwzLjE2NTU2MjkxLDE1LjI0NzY5MjMgTDMuMzExMjU4MjgsMTQuNjI0NjE1NCBDMy40MTcyMTg1NCwxNC4xOTA3NjkyIDMuNTIwOTcxMywxMy43MjIzMDc3IDMuNjIyNTE2NTYsMTMuMjE5MjMwOCBDMy43MjQwNjE4MSwxMi43MTYxNTM4IDMuODIzMzk5NTYsMTIuMjMzODQ2MiAzLjkyMDUyOTgsMTEuNzcyMzA3NyBMMy45MjA1Mjk4LDExLjc3MjMwNzcgTDMuOTczNTA5OTMsMTEuNzcyMzA3NyBDNC4wNzk0NzAyLDEyLjIyNDYxNTQgNC4xODU0MzA0NiwxMi43MDQ2MTU0IDQuMjkxMzkwNzMsMTMuMjEyMzA3NyBDNC4zOTczNTA5OSwxMy43MiA0LjUwMzMxMTI2LDE0LjE5MDc2OTIgNC42MDkyNzE1MiwxNC42MjQ2MTU0IEw0LjYwOTI3MTUyLDE0LjYyNDYxNTQgTDQuNzU0OTY2ODksMTUuMjQ3NjkyMyBaIiBpZD0iQSIgZmlsbD0iIzMzMzMzMyIgZmlsbC1ydWxlPSJub256ZXJvIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==)

`annotations.defaults.text_size` number

Text size.

`annotations.defaults.text_color` color

Text color.

`annotations.defaults.label_width` number

Max width.

Min: 2

Max: 20

`annotations.defaults.text_background_mode` string

Text background.

Allowed values:

none (None)
outline (Outline)
background (Background)

`annotations.defaults.text_bg` color

Outline.

`annotations.defaults.label_bg` color

Background.

`annotations.defaults.text_alignment` string

Alignment.

Allowed values:

auto (Auto)
start (Left)
center (Center)
end (Right)

`annotations.defaults.popup_position` string

Popup position.

Allowed values:

center (Center)
left (Left)
right (Right)
top (Top)
bottom (Bottom)

`annotations.defaults.line_marker` string

Marker.

Allowed values:

none (None)
arrowhead_open (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMzFweCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLC0wLjA3MTYsMC4wMDY2NzYzNSkiPgogICAgICAgIDxnPgogICAgICAgICAgICA8cmVjdCBpZD0iQXJ0Ym9hcmQyIiB4PSIwLjA3MiIgeT0iLTAuMDA3IiB3aWR0aD0iMTEuOTQ5IiBoZWlnaHQ9IjMwLjk3OSIgc3R5bGU9ImZpbGw6bm9uZTsiLz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Y2xpcFBhdGggaWQ9Il9jbGlwMSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgeD0iMC4wNzIiIHk9Ii0wLjAwNyIgd2lkdGg9IjExLjk0OSIgaGVpZ2h0PSIzMC45NzkiLz4KICAgICAgICAgICAgICAgIDwvY2xpcFBhdGg+CiAgICAgICAgICAgICAgICA8ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAxKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImNpcmNsZS1jb3B5LTMiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMC4wNzE1Nzc1LDAuOTkzMzI0KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJQYXRoLTIiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MTA3LC0wLjcwNzEwNywwLjcwNzEwNywwLjcwNzEwNywtNy4wMjM1Myw2LjI2Nzk5KSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCw4TDQsMTQiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOnJnYig1MSw1MSw1MSk7c3Ryb2tlLXdpZHRoOjFweDsiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iUGF0aC0yMSIgc2VyaWY6aWQ9IlBhdGgtMiIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxMDcsLTAuNzA3MTA3LDAuNzA3MTA3LDAuNzA3MTA3LC0zLjQ5OTE3LDkuNzkyMzUpIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDhMNCwxNCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6cmdiKDUxLDUxLDUxKTtzdHJva2Utd2lkdGg6MXB4OyIvPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuOTg0ODA4LC0wLjE3MzY0OCwwLjE3MzY0OCwwLjk4NDgwOCwtMTkuMzc5OSwtMy45NTE3MSkiPgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTguNDU1LDE3LjMzNUwxNy40NjQsMTcuMzM1TDE3LjQ2NiwyMi43TDE4LjAzMywyMy41MTJMMTguNDUzLDIzLjUwOEwxOC40NTUsMTcuMzM1WiIgc3R5bGU9ImZpbGw6cmdiKDUxLDUxLDUxKTsiLz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMTczNjQ4LDAuOTg0ODA4LDAuOTg0ODA4LDAuMTczNjQ4LC0xMi41MDI4LC0xMC44MzAzKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC40NTUsMTcuMzM1TDE3LjQ2NCwxNy4zMzVMMTcuNDY2LDIyLjdMMTguMDMzLDIzLjUxMkwxOC40NTMsMjMuNTA4TDE4LjQ1NSwxNy4zMzVaIiBzdHlsZT0iZmlsbDpyZ2IoNTEsNTEsNTEpOyIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)
arrowhead (data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMTIgMzAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYzLjEgKDkyNDUyKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT5jaXJjbGUgY29weSAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9ImNpcmNsZS1jb3B5LTMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4wMDAwMDAsIDEzLjAwMDAwMCkgcm90YXRlKC00NS4wMDAwMDApIHRyYW5zbGF0ZSgtNS4wMDAwMDAsIC0xMy4wMDAwMDApIHRyYW5zbGF0ZSgxLjAwMDAwMCwgNi4wMDAwMDApIj4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlRyaWFuZ2xlIiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjQgMCA4IDggMCA4Ij48L3BvbHlnb24+CiAgICAgICAgICAgIDxsaW5lIHgxPSI0IiB5MT0iOCIgeDI9IjQiIHkyPSIxNCIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjMzMzMzMzIiBvcGFjaXR5PSIwLjIwMDAwMDAwMyIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+PC9saW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+)

`annotations.defaults.stroke_width` number

Width.

Max: 4

`annotations.defaults.stroke_color` color

Color.

`annotations.defaults.connector_extend_line` string

Extend line.

Allowed values:

enabled (Enable)
disabled (Disable)

Animations

`data_trans_duration` number

Animation duration. The duration of <a href="https://help.flourish.studio/article/417-how-to-adjust-the-animation-speed-of-your-visualization">transitions</a> in milliseconds, for example between two slides in a story

Max: 10000000

`animate_on_load` boolean

Animate on load.

`data_trans_bind_series` boolean

Only animate series with same name. Determines how <a href="https://help.flourish.studio/article/417-how-to-adjust-the-animation-speed-of-your-visualization">animations</a> work when the data changes (e.g. between slides in a <a href="https://help.flourish.studio/article/13-creating-a-story">story</a>). When this is on, series (e.g. lines) will attempt to animate to become another line only if they have the same name (i.e. the same column header).

`data_trans_bind_data_points` boolean

Only animate points with same label. Determines how <a href="https://help.flourish.studio/article/417-how-to-adjust-the-animation-speed-of-your-visualization">animations</a> work when the data changes (e.g. between slides in a <a href="https://help.flourish.studio/article/13-creating-a-story">story</a>). When this is on, data points (e.g. dots or bars) will attempt to animate to become other data points if they have the same label (e.g. date or category).

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 main graphic or everything (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. Note that when direction is set to right to left 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

Header

`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

`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

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

`layout.header_logo_link_url` string

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.

Footer

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

`layout.footer_logo_link_url` string

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

URL settings

`url_state.enabled` boolean

Update project from URL. Make it possible to change the visualization's settings/state from the <a href="https://help.flourish.studio/article/297-how-url-state-settings-work?preview=6087fc728af76a714bfdb5c0">URL hash</a>, for example when embedding in an iframe or popup panel

`url_state.whitelist` text

Allowed state properties. List each state property you want to make changeable with the <a href="https://help.flourish.studio/article/297-how-url-state-settings-work?preview=6087fc728af76a714bfdb5c0">URL hash</a>. See the template page for a full list of state properties. Add one property name per line. Use dot format for nested properties, e.g. `layout.background_color`.

Line, bar and pie charts

Updated a day ago to v30.2.2 by Flourish team

How to use this template

How to get started

Making a grid of charts

FAQ

Tips

Credits and feedback

API information

Template data

1. Array of arrays, and a bindings object

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

3. Array of objects with template-defined keys

Meanings of the template data keys:

Template metadata

1. Array of objects with column indexes as keys

2. Array of objects with column headers as keys

Column type objects:

Template settings

Chart type

chart_type string

dual_axis boolean

secondary_series number

stack_sort string

facet_layout string

height_mode string

facet_aspect number

facet_aspect_mobile number

facet_aspect_breakpoint number

sort_mode string

Grid of charts

facets.columns_fixed boolean

facets.min_width number

facets.max_width number

facets.columns number

facets.gutter_w number

facets.gutter_h number

facets.animation string

facets.titles boolean

facets.title_align string

facets.title_size number

facets.title_unit string

facets.title_color color

facets.title_padding_top number

facets.title_padding_bottom number

facets.title_bg string

facets.title_bg_color color

facets.title_bg_padding number

x_axis_matching boolean

x_axis_last_row_only boolean

y_axis_matching boolean

y_axis_first_col_only boolean

y2_axis_matching boolean

y2_axis_last_col_only boolean

Controls & filters

series_filter_mode string

series_control_multi_text string

series_control_multi_none_text string

series_control_select_text string

max_series number

series_control_background color

series_control_text color

series_control_border color

series_control_pill_background color

series_control_pill_text color

series_control_pill_radius number

series_control_single_all boolean

series_control_single_all_text string

filter_rows_with_no_data boolean

series_control_single.control_type string

series_control_single.control_styles boolean

series_control_single.control_title string

series_control_single.button_group boolean

series_control_single.button_group_width_mode string

series_control_single.button_group_width_fixed number

series_control_single.dropdown_width_mode string

series_control_single.dropdown_width_fixed number

series_control_single.slider_width number

series_control_single.slider_max_label_width number

series_control_single.slider_step_time number

Template `data`

Template `metadata`

Template `settings`

`chart_type` string

`dual_axis` boolean

`secondary_series` number

`stack_sort` string

`facet_layout` string

`height_mode` string

`facet_aspect` number

`facet_aspect_mobile` number

`facet_aspect_breakpoint` number

`sort_mode` string

`facets.columns_fixed` boolean

`facets.min_width` number

`facets.max_width` number

`facets.columns` number

`facets.gutter_w` number

`facets.gutter_h` number

`facets.animation` string

`facets.titles` boolean

`facets.title_align` string

`facets.title_size` number

`facets.title_unit` string

`facets.title_color` color

`facets.title_padding_top` number

`facets.title_padding_bottom` number

`facets.title_bg` string

`facets.title_bg_color` color

`facets.title_bg_padding` number

`x_axis_matching` boolean

`x_axis_last_row_only` boolean

`y_axis_matching` boolean

`y_axis_first_col_only` boolean

`y2_axis_matching` boolean

`y2_axis_last_col_only` boolean

`series_filter_mode` string

`series_control_multi_text` string

`series_control_multi_none_text` string

`series_control_select_text` string

`max_series` number

`series_control_background` color

`series_control_text` color

`series_control_border` color

`series_control_pill_background` color

`series_control_pill_text` color

`series_control_pill_radius` number

`series_control_single_all` boolean

`series_control_single_all_text` string

`filter_rows_with_no_data` boolean

`series_control_single.control_type` string

`series_control_single.control_styles` boolean

`series_control_single.control_title` string

`series_control_single.button_group` boolean

`series_control_single.button_group_width_mode` string

`series_control_single.button_group_width_fixed` number

`series_control_single.dropdown_width_mode` string

`series_control_single.dropdown_width_fixed` number

`series_control_single.slider_width` number

`series_control_single.slider_max_label_width` number

`series_control_single.slider_step_time` number

`series_control_single.slider_loop` boolean

`series_control_single.slider_restart_pause` number

`series_control_single.sort` boolean

`row_filter_control_all` boolean

`row_filter_control_all_text` string

`row_filter_control.control_type` string

`row_filter_control.control_styles` boolean

`row_filter_control.control_title` string

`row_filter_control.button_group` boolean

`row_filter_control.button_group_width_mode` string

`row_filter_control.button_group_width_fixed` number

`row_filter_control.dropdown_width_mode` string

`row_filter_control.dropdown_width_fixed` number

`row_filter_control.slider_width` number

`row_filter_control.slider_max_label_width` number

`row_filter_control.slider_step_time` number

`row_filter_control.slider_loop` boolean

`row_filter_control.slider_restart_pause` number

`row_filter_control.sort` boolean