Page layout — Charts

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the charts component.


There are five chart types available by default in Flow – Bar, Line, Pie, Doughnut, and Polar Area. The charts are rendered using the Chart.js library.

This is where we can find the charts:

We drag and drop the chart we would like to use, in a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.

This is an example of how a bar chart looks like when we are done configuring it in the page layout:

Charts > Columns

Charts support four columns for configuring the chart data.

  1. Label for the data (required)
  2. Value for the data (required)
  3. Background color, overrides the default (optional)
  4. Border color, overrides the default (optional)

Each item in the list that the chart is bound to (whether loaded from an ObjectDataRequest, or from a static value) will map to a data point on the chart.

Charts > Colors

By default, background and border colors will be fetched from the global settings. We can override colors globally when we configure the player – for all or any chart; or for a data point in a chart, by specifying them in a column.

Charts > Outcomes

Outcomes associated with a chart component will be executed when an item on the chart is clicked. The item from the bound data source will be set as selected, before the outcome is executed. Only the first outcome bound to the chart will be used. If an outcome is defined as Is Bulk Action, then it will be displayed above the chart.

Charts > Displaying multiple datasets

Displaying multiple datasets on the same chart is supported by using the charts container.

Charts > Attributes

We can add attributes to charts by clicking the New Attribute button in the configuration panel.

Charts take custom classes as attributes. For example:

The classes key takes a custom class name (string) that will be added to the mw-chart-* element as value. This is the metadata of a sample chart:

Charts > Bar

We use bar charts to display various data points as vertical bars.

This is an example of how a bar chart is rendered in Flow:

We can find more information on bar charts here.

Charts > Line

Lines let us plot data points on a line.

This is an example of how a line is rendered in Flow:

We can find more information on lines here.

Charts > Pie & Doughnut

Pie and doughnut charts show the proportional value of data points as segments of a circle; the arc of the circle representing the value.

This is an example of how a pie chart is rendered in Flow:

This is an example of how a doughnut is rendered in Flow:

We can find more information on pie charts here.

Charts > Polar area

Polar area charts are also round like pie charts, but here, instead of the arc segments, the radius varies.

This is an example of how a polar area chart is rendered in Flow:

Want to know more about how to make charts?

Why, yes, of course!

Here is a flow ( that shows the charts in action. If we want to download the JSON of the flow, here goes.

Happy charting! May the odds be forever in your favor.

Goody bag 
  1. Sample flow –
  2. Sample package –