Filters & Requesters


Let the user choose what data to display by adding filters or requesters to your stories.


There are various UX components to do it: buttons, dropdowns, checkboxes or sliders.



I’d like to have a button from which I can choose a country, so the chart will only display data for the selected country.


In the above example we want to slice data on the country column :


In Toucan there are two ways to do that.

Slice data with a filter

In this case, the browser retrieves the full dataset and the filtering is done client-side. Consequently :

  • The transition at click is smooth ✅
  • The initial query of data might be heavy if you have a large number of rows and many filters options 👎

With the following configuration you slice the domain on the on the country column:


📖 Learn More about adding filters with this tutorial.

Slice data with a requester

In this case you are using templating to create a dynamic data query.

In this case, the browser retrieves only the dataset that will be displayed. Consequently:

  • The initial query of data is lighter and the first rendering is quickier ✅
  • The transition when changing the input can be less fluid as the browser has to wait for the data from the server 👎

With the following dynamic query you slice domain on the country column:

  country:"<%= requestersManager.variable %>"

Position and types of filters/requesters

Filters or requesters can be positionned at 3 places:

  • upper-right: above the legend
  • upper-middle: above the chart
  • bottom-right: under the chart

Filters or requesters can be:

  • buttons
  • slider
  • dropdown
  • checkboxes (only for filters)


Toucan’s Design Touch 🎨

  • The upper-right filter/requester is consider as a secondary filter, so its design is sighlty lighter.
  • The dropdown type is recommended for the upper-right filter/requester. The upwards display is not optimal when positioned at the bottom. This is why it’s called dropDOWN 😉
  • On the contrary, sliders are recommended for bottom-right position!
  • Report and date requesters have different colors to help the user differenciate them.