Simple theme editor

A Flourish template for creating basic themes

Updated 2 months ago to v2.0.0 by Flourish team

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

template: @flourish/simple-theme-editor

version: 2

Template data

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

    template: "@flourish/simple-theme-editor",
    version: "2",

Template settings

Options for opts.state.


color.categorical_palette colors

Default palette. The default color palette for you theme. <b>Click on the palette</b>, select <b>Edit palette</b> and input your colors as hex codes.

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

color.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. Write your custom thresholds, separated by a ";" For example 5;10;15

color.sequential_palette string


Allowed values:

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

color.sequential_reverse boolean


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


Allowed values:

  • false (Auto)
  • true (Custom)

color.sequential_domain_min number


color.sequential_domain_max number


color.diverging_palette string


Allowed values:

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

color.diverging_reverse boolean


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


Allowed values:

  • false (Auto)
  • true (Custom)

color.diverging_domain_min number


color.diverging_domain_mid number


color.diverging_domain_max number


layout_background_color color

Background color.

text_color color

Text color.


theme_font string

Your theme's default font. This font will apply to the whole graphic by default. You can override this for certain parts of your graphic on a visualization-specific level.

Logo. Upload your logo here. It will be displayed in the bottom-right corner of your visualizations.

Link. The link your logo should point to.

logo_height number

Height. The height of your logo. In rems.

Company information (required)

company_name string

Company name. Your company's name

External write

external_write.enabled boolean

Store result data externally.

external_write.endpoint string

Storage endpoint. Your external database, store, API or web app endpoint to post data to

external_write.google_apps_script boolean

Use with Google Sheets. In order to send the data from your visualization to a Google Sheet, you will need to create a Google Sheet and add a Google Apps Script to it.<br><br> Learn more about this in our External write help doc.

external_write.sheet_name string

Sheet name. Google Sheet name to write to. If a sheet with the given name doesn't exist yet, it will be created and written to.