Election results chart

A stacked bar chart ideal for election results. Includes a coalition builder feature

Updated 2 months ago to v4.0.0 by Flourish team

How to use this template

Election results chart

This template is ideal for visualising election results. You can show one overall result, or specific regions that can be selected from a dropdown.

Features

  • Toggle parties in the legend to create custom "coalitions"
  • Add historical data to compare the current results to a previous election

Data requirements

Each row after the header should be a region (eg. a state, constituency or just "nationwide"). There should be a column for the name of the region, and a column for each party in the election. In the historical data sheet you can add data for a previous election. This sheet follows the same format as the current results, make sure to use exactly the same region and party names, as this is being used to compare the results.

Tips

  • You can specify custom colors to represent the right parties in the "Chart colors" box
  • It's possible to translate the labels in this chart to your own language in the "Text and translation" box
  • You can change the default region to show in "Dropdown" box, make sure your value is case sensitive
  • You can also show other values than %, in "Label styles" and "Custom scale" boxes you can change the scale and the suffix

API information

Explains to developers how to use this template with the Flourish Live API.

template: @flourish/election-results-chart

version: 4

Chart styles

color.palette colors

Palette.

color.extend boolean

Auto-extend. Automatically generate additional colours when needed to avoid the palette colours being used more than once. Added colours are based on the average lightness and chroma values of the palette. This works best if the palette’s colours do not have very high or low saturation.

color.advanced boolean

Fine tune. Fine tune how additional colours are added to the palette.

color.hue_rotation_angle number

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

Max: 360

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

chart_height number

Min: 50

use_custom_scale boolean

Scale type. On default, will use the sum of all data points as the max value. Enable this setting to use a custom value

Allowed values:

  • false (Auto)
  • true (Custom)

custom_scale_max number

Max value for scale. This will set the maximum value of the scale. Eg. the total amount of seats to be won in an election

Threshold line

middle_line_position number

Position.

middle_line_content string

Text.

middle_line_text_color color

Colour.

middle_line_dashoffset string

Dash width and offset. eg. 2,2

middle_line_width number

Thickness.

middle_line_color color

Colour.

Chart labels

label_font_size number

Text size.

label_font_color color

Text colour.

label_format.prefix string

Prefix. Text to place in front of number

label_format.suffix string

Suffix. Text to place after number

label_format.n_dec number

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

Min: -10

Max: 10

label_format.strip_zeros boolean

Remove trailing zeros.

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

label_format.transform_labels boolean

Multiply/divide values.

label_format.transform string

Allowed values:

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

label_format.multiply_divide_constant number

label_format.exponentiate_constant number

label_suffix string

Historical label suffix. The suffix used to compare the current election result to the historical one, for example "%" or "seats"

Dropdown and legend

hide_dropdown boolean

Allowed values:

  • false (Enabled)
  • true (Disabled)

hide_empty_rows boolean

Hide empty rows in dropdown.

current_id string

Default value of dropdown.

legend_position string

Position.

Allowed values:

  • below (Below)
  • above (Above)
  • off (Off)

Text and translation

Text left of dropdown.

instruction_label string

Instruction text above legend.

placeholder_text string

No data placeholder text. Placeholder text if there is no data

subtitle_text string

Text below results.

Pretty dropdown values. If your data contains raw values (such as united_kingdom), add the translations below. Write every translation a new line in this format: original_word:translation

Number formatting

localization.input_decimal_separator string

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

Allowed values:

  • . (.)
  • , (,)

localization.output_separators string

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

Allowed values:

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

Layout

Layout

layout.body_font font

Font.

layout.max_width number

Maximum width. Leave blank to stretch to container width

Min: 50

layout.background_color color

Background.

layout.margin number

Margin.

layout.layout_order string

Layout order.

Allowed values:

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

layout.space_between_sections string

Space between sections.

Allowed values:

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

layout.space_between_sections_custom number

Custom.

Max: 100

Header

layout.header_align string

Alignment.

Allowed values:

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

layout.title string

layout.title_styling boolean

Change title styles.

layout.title_size string

Size.

Allowed values:

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

layout.title_size_custom number

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

layout.title_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.title_color color

Color.

layout.title_line_height number

Line height.

Max: 3

layout.subtitle string

layout.subtitle_styling boolean

Change subtitle styles.

layout.subtitle_size string

Size.

Allowed values:

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

layout.subtitle_size_custom number

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

layout.subtitle_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.subtitle_color color

Color.

layout.subtitle_line_height number

Line height.

Max: 3

layout.subtitle_space_above string

Space above.

Allowed values:

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

layout.subtitle_space_above_custom number

Custom.

Max: 100

layout.text string

layout.text_styling boolean

Change text styles.

layout.text_size string

Size.

Allowed values:

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

layout.text_size_custom number

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

layout.text_weight string

Weight.

Allowed values:

  • bold (Bold)
  • normal (Regular)

layout.text_color color

Color.

layout.text_line_height number

Line height.

Max: 3

layout.text_space_above string

Space above.

Allowed values:

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

layout.text_space_above_custom number

Custom.

Max: 100

Footer

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

Note.

layout.size number

Size.

layout.color color

Color.

layout.footer_align string

Alignment.

Allowed values:

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

layout.logo_url url

Image.

Link.

layout.logo_height number

Height.

layout.logo_margin number

Margin.

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