Line, bar and pie charts

Choose from line, bar, grouped bar, stacked bar, area or pie charts, with multi-chart feature

Updated 2 years ago by Template retirement home

How to use this template

The Swiss Army Knife of templates. Choose from line, bar, grouped bar, stacked bar, area or pie charts – and animate between them all.

Data requirements

You need one column of “Labels” (categories, times, numbers, etc) and one or more columns of “Values” (which must contain numbers). Each “Values” column creates a line on a line chart, a series of bars in a bar chart, or a pie chart.

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.

Tips

  • You can use custom colours by typing them as a comma-separated list in to the “Colour scheme or custom colours” menu. You can use any named CSS colour 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.

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

template: _176

version: _21

Template data

There are two different formats in which you can supply data to this template. Which one will be more convenient for you likely depends on the source of your data, as described below.

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. To tell the API how these 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: "_176",
    version: "_21",
    bindings: {
        data: {
            x: "DataHeader1"
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

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

{
    template: "_176",
    version: "_21",
    bindings: {
        data: {
            x: "DataHeader1",
            y: ["DataHeader2", "DataHeader3", ...],
            facet: "DataHeader4"
        }
    },
    data: {
        data: [
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            { "DataHeader1": ..., "DataHeader2": ..., ... },
            ...
        ]
    }
}

(As before, the keys containing "Header" would be replaced by column names from your data source.)

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: "_176",
version: "_21",
data: {
    data: [
        {
            x: ...,
            y: [...]
        },
        ...
    ]
},
...
}

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

{
template: "_176",
version: "_21",
data: {
    data: [
        {
            x: ...,
            y: [...],
            facet: ...
        },
        ...
    ]
},
...
}

Meanings of the template data keys:

  • data.x: A column of names or times
  • data.y: One or more columns of numbers
  • data.facet: If specified and “Grid of charts” view is on, creates a separate mini chart for each value found in the column.

Template settings

Options for opts.state.

Chart type

chart_type string

Allowed values:

  • line (Line chart)
  • column_grouped (Bar chart)
  • column_stacked (Stacked bar chart)
  • area (Area chart)
  • donut (Pie chart)

layout string

Grid mode. “Grid of charts” creates a mini chart for each series (or each value in your ”Charts grid” column, if specified)

Allowed values:

  • single (Single chart)
  • facets (Grid of charts)

layout_fit boolean

Fill container with graphic. This is how the graphic will look when embedded at a fixed height

facet_aspect number

Chart height, % of width.

facet_fixed_cols boolean

Fixed number of columns in grid.

facet_min_w number

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

facet_cols number

Number of columns in grid. Leave blank for automatic layout

Min: 1

Chart styles

bg_color color

Background colour.

legend_show boolean

Show legend. Ignored in grid mode if colouring by chart

palette string

Colour scheme or custom colours. Choose from the list of enter a custom pallete as a comma-separated list of colour codes or names (e.g. #343434, red, rgb(28,28,28))

Predefined values:

  • schemeCategory10 (10 colours (bold))
  • #5F4690,#1D6996,#38A6A5,#0F8554,#73AF48,#EDAD08,#E17C05,#CC503E,#94346E,#6F4070,#994E95,#666666 (12 colours (rainbow))
  • #7F3C8D,#11A579,#3969AC,#F2B701,#E73F74,#80BA5A,#E68310,#008695,#CF1C90,#f97b72,#4b4b8f,#A5AA99 (12 varied (mixed))
  • schemeCategory20 (20 colours (paired))
  • schemeCategory20b (20 colours (dark groups))
  • schemeCategory20c (20 colours (light groups))
  • schemeBrBG (Brown-BlueGreen)
  • schemePRGn (PurpleRed-Green)
  • schemePiYG (Pink-YellowGreen)
  • schemePuOr (Purple-Orange)
  • schemeRdBu (Red-Blue)
  • schemeRdGy (Red-Grey)
  • schemeRdYlBu (Red-Yellow-Blue)
  • schemeRdYlGn (Red-Yellow-Green)
  • schemeSpectral (Spectral)
  • schemeBlues (Blues)
  • schemeGreens (Greens)
  • schemeGreys (Greys)
  • schemePurples (Purples)
  • schemeReds (Reds)
  • schemeOranges (Orange)
  • schemeBuGn (Blue-Green)
  • schemeBuPu (Blue-Purple)
  • schemeGnBu (Green-Blue)
  • schemeOrRd (Orange-Red)
  • schemePuBuGn (PurpleBlueGreen)
  • schemePuBu (Purple-Blue)
  • schemePuRd (Purple-Red)
  • schemeRdPu (Red-Purple)
  • schemeYlGnBu (Yellow-GreenBu)
  • schemeYlGn (Yellow-Green)
  • schemeYlOrBr (Yellow-Orange-Brown)
  • schemeYlOrRd (Yellow-Orange-Red)

line_width number

Line width.

line_opacity number

Line opacity.

Max: 1

dot_radius number

Dot radius.

Max: 25

dot_opacity number

Dot opacity.

Max: 1

area_opacity number

Stack opacity.

Max: 1

line_curve string

Line curve.

Allowed values:

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

line_end_labels boolean

Show labels at end of lines. Add margin-right the layout panel if using end labels

column_padding_inner number

Space between bars (%).

Max: 100

column_padding_outer number

Space before/after bars (%).

Max: 100

donut_inner_radius number

Doughnut hole (%).

Max: 99

donut_corner_radius number

Corner curve (pixels).

donut_pad_angle number

Segment padding (degrees).

Max: 10

Title and subtitle

title string

Title.

subtitle string

Subitle.

title_padding number

Margin (pixels).

title_color color

Colour.

Chart margins

margin_top number

Top.

margin_bottom number

Bottom.

margin_left number

Left.

margin_right number

Right.

X axis

x_axis_min number

X min. Ignored if axis is showing categories rather than numbers

x_axis_max number

X max. Ignored if axis is showing categories rather than numbers

x_axis_padding_left number

X axis padding. Horizontal space between the y and x axes

x_axis_label string

X axis label.

x_axis_label_y number

Label position.

x_axis_show boolean

Show x axis.

x_axis_show_domain boolean

Line at bottom.

x_axis_num_ticks number

No of tick marks. Approximate. The actual number will depend on the range of values, chart size, etc.

x_axis_tick_dashed number

Tick dash size. Zero for a solid line, bigger numbers for bigger dashes

x_axis_color color

Text colour.

x_axis_tick_color color

Tick colour.

x_axis_tall_ticks boolean

Tick marks full height.

x_axis_ticks_inline boolean

Tick labels next to line.

Y axis

y_axis_label string

Y label.

y_axis_min number

Y min.

y_axis_max number

Y max.

facet_matching_axis boolean

Matching axis across grid of charts.

y_axis_log boolean

Log scale.

y_axis_show boolean

Show y axis.

y_axis_show_domain boolean

Line at edge.

y_axis_num_ticks number

Number of tick marks. Approximate. The actual number will depend on the range of values, chart size, etc.

y_axis_tick_dashed number

Tick dash size. Zero for a solid line, bigger numbers for bigger dashes

y_axis_color color

Text colour.

y_axis_tick_color color

Tick colour.

y_axis_wide_ticks boolean

Tick marks full width.

y_axis_ticks_inline boolean

Tick labels above line.

Popups

show_popups boolean

Show popups.

Font size.

Number formatting

number_prefix string

Number prefix.

number_suffix string

Number suffix.

Animations

data_trans_duration number

Animation duration. The duration, in milliseconds, of transitions – for example between two slides in a story