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:
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:
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:
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}}"
Here the final result:
Remember that any Rechart property can be wired and controlled by any Retool component.