How to filter data-points in a scatterplot chart dynamically

posted on 9/4/2022, in learn

This post is a bit old and outdated. Rechart has evolved in the meantime.
Please refer to the more recent posts from here

If you need to let your users filtering dynamically a scatterplot chart using a Retool component, here the steps, with Rechart, to achieve the result:

range slider

Suppose you have a Rechart scatterplot showing a dataset and a slider component that should narrow the extent of the data-points by some condition. Let’s configure the chart first in Rechart Configurator:

range slider

In this example the dataset is the list of Olympics athletes. Each data-point contains the property age that we can exploit in a filter with the following condition:

datum.age > 30 && datum.age < 60

We can test the condition in the Configurator before wiring it with a Retool component:

range slider

Now, let’s suppose that our user should be able to narrow the dots according to the age extent, between a min and max value set by a Retool range-slider. If our Slider-Range component name is rangeSlider1, here the little hack we need to do in the Rechart model config:

"preFilter": "datum.age > {{rangeSlider1.value.start}} && datum.age < {{rangeSlider1.value.end}}"

range slider

Here the final result:

range slider

Remember that any Rechart property can be wired and controlled by any Retool component.