Drive engagement: a guide to transforming charts with filters
Reveal insights and comparisons in your data by adding interactive filters to your Flourish visualizations
Static charts often tell only part of the story. But what if your audience could explore the data themselves?
With interactive filters, you can transform your visualizations into powerful storytelling tools that invite users to dive deeper, tailor the view to their needs and uncover meaningful insights.
Filters are dynamic tools in data visualization that let users refine and organize data based on specific criteria. They help manage complex datasets by allowing them to focus on relevant information that matches their queries or interests.
In Flourish, you can easily add filters to a variety of templates:
When to use filters in data visualization
Interactive filters give your audience the power to tailor what they see – rather than passively consuming a one-size-fits-all chart.
1. For an improved user experience
Filters enhance the user experience by providing control over the data presentation, allowing users to navigate and interact with the visualization effectively.
Adding a filter means a user can explore the chart further and find the insights that are most relevant to them. In the chart below, the default view is the excess mortality in the European Union. Users can get customized insights by selecting their home country from the filter dropdown.
2. Filter data for targeted analysis and insights
Users can isolate specific subsets of data for closer examination, making it easier to identify trends, outliers, or patterns that may be obscured in a more comprehensive dataset.
In the chart below, detailed trends can be difficult to spot in the broader view of the data. Providing the option to zoom in on shorter time frames can make trends and changes clearer.
Similarly, you can add a time slider to a line chart to show how the shape of a line has changed between days, months, or years. Here’s an example inspired by the FT’s Alan Smith: a playable line chart showing the yield curve for UK bonds over the last 8 years.
3. Compare data segments with ease
Comparisons are best when the viewer can switch between segments, or view many side-by-side. Filters allow you to present flexible comparison tools in your chart. For instance, allow your user to pick two countries from a dropdown and instantly see how their curves differ – or let them toggle between demographic groups to compare performance.
Want a specific view to appear by default? You can pre-select filters by adding your chart to a Flourish story and setting the desired filter states. Read below to learn how to do this step-by-step.
4. Let your audience explore your data
Adding inline menus, buttons or sliders to your visualizations can be great for letting your viewers explore a rich dataset.
Filters encourage users to explore the data by interacting with it, which can lead to discovering insights that were not immediately obvious.
Filters also allow stakeholders to generate customized reports based on parameters like time periods, geographies, demographics, or any other variable relevant to the dataset.
5. Combine insights in one chart
Add filters for different metrics to explore various aspects of a topic more deeply.
By taking a closer look at different aspects and measurements, you can reveal insightful details and nuances that might not be immediately obvious. This approach allows you and your users to explore the topic from multiple angles.
Tip: In Flourish, combine row and series filter with the Grid layout in the Line, Bar, Pie template to show and filter by up to three metrics.
Equally, it’s useful to show opposite ends of the spectrum in one chart, for example for the ten best and worst countries.
Use filters for guided storytelling
Controls are handy for Flourish stories: just click a filter or drag a time slider to capture a particular view of your data in a slide. You can also guide your viewers through a few selected metrics before giving them the opportunity to explore the data further.
You can also create a GIF-like effect with autoplaying stories – ideal for looping animations that continuously play through your slides. This is a great alternative to traditional GIFs: instead of exporting heavy files, you can simply embed the story online. It loops seamlessly, maintains interactivity and responsiveness, and ensures your animations stay crisp across all screen sizes.
Three types of filters in Flourish
Flourish offers three main types of filters – row, series, and legend filters – giving you full control over how users interact with your data. Each works slightly differently, but together they cover a wide range of filtering needs, from simple dropdowns to dynamic, multi-metric controls.
1. Row filter
The most common type of filter in Flourish. It lets you control which rows of data are displayed based on user selection.
To add one, head to your Data tab in the editor and assign a column to the Filter binding. This will automatically create an interactive dropdown or button group in your visualization, allowing users to explore categories such as regions, years, or topics with a single click.
2. Series filter
The series filter is an additional control available in the Line, Bar, Pie template. It’s ideal when you have multiple metrics or value columns.
Simply turn it on in the Controls panel, and users can switch between metrics — for example, toggling from GDP to Population or Unemployment Rate. Series filters are great for helping users compare indicators without cluttering your chart.
3. Legend filter
When your chart includes a legend – for example, showing different categories or countries, you can make it interactive by enabling legend filtering.
This means users can click directly on the legend to include or exclude categories, focusing only on what matters to them. It’s an intuitive, visual way to let viewers explore subsets of your data without extra dropdowns or controls.
Together, these filters make it easy to create personalized, interactive experiences in your Flourish projects – whether you’re building a one-off chart, a multi-slide story, or a branded data report.
Tips and tricks
Once you’ve added your filters, Flourish gives you several control options to tailor the look and feel of your interactivity. You can choose between buttons, dropdown menus, or time sliders, depending on how you want users to explore your data.
Buttons work best when you have a few clear categories.
Dropdowns are perfect for longer lists, such as filtering by country or organization.
Time sliders are great for chronological data, allowing viewers to scrub through months, years, or even seconds to see change over time.
Each option can be styled and configured directly within the Controls panel in the Flourish editor, making it simple to customize without writing any code.
Make animations work with filters
Animation and filtering go hand in hand. You can experiment with the Animation settings to decide how your chart behaves when a user changes a filter – whether the chart should morph smoothly between states or redraw completely for clarity.
Adjust animation behavior under the Animations panel.
Control whether transitions happen across rows or columns.
If animations feel too slow or fast, tweak the animation speed to get the perfect balance.
Fine-tune colors and playback speed
For time-based visualizations, consider simplifying your color palette – for instance, use a single accent color (and disable “Auto extend”) so that colors stay consistent while the chart updates. Read more about using color in data visualization.
If you’re using a time slider, you can also set the autoplay speed under the Advanced settings. Just remember to adjust your animation speed accordingly so the chart updates finish before the slider moves on.
Pro tip:
Combining thoughtful filters with smooth animations and consistent design gives your visualization a polished, professional feel while keeping your audience engaged for longer.
