How to Dynamically Apply Multiple Filters Using <> and [] Operations in Plotly?

I’m trying to dynamically apply multiple filters to a Plotly scatter plot using the transforms property. I want to use both (filter inside a range) and <> (filter outside a range) operations. While I can define these transforms during the initial plot creation, I’m having trouble dynamically updating them using Plotly.relayout.

Below is a simplified example that demonstrates the issue.


var xData = ['A', 'B', 'C', 'D', 'E'];
var yData = [10, 15, 8, 12, 7];

var customdata = [
  { metadata: { score1: 0, score2: 2 } },
  { metadata: { score1: 1, score2: 1 } },
  { metadata: { score1: 0, score2: 1 } },
  { metadata: { score1: 1, score2: 2 } },
  { metadata: { score1: 0, score2: 0 } }
];

var data = [{
  type: 'scattergl',
  x: xData,
  y: yData,
  mode: 'markers',
  customdata: customdata, 
  transforms: [
    {
      type: 'filter',
      target: customdata.map(item => item.metadata.score1), // Filter on score1
      operation: '[]', // Include values in range
      value: [0, 1]    // Include score1 between 0 and 1
    },
    {
      type: 'filter',
      target: customdata.map(item => item.metadata.score2), // Filter on score2
      operation: '<>', // Exclude values in range
      value: [1, 2]    // Exclude score2 between 1 and 2
    }
  ]
}];

// Layout for the plot
var layout = {
  title: 'Multiple Filters Example'
};

// Create the plot
Plotly.newPlot('myDiv', data, layout);

// Define new filter transforms
const newTransforms = [
  {
    type: 'filter',
    target: 'customdata.metadata.score1',
    operation: '<>', // Exclude values between 0 and 1
    value: [0, 0]
  },
  {
    type: 'filter',
    target: 'customdata.metadata.score2',
    operation: '[]', // Include values between 0 and 1
    value: [0, 1]
  }
];

// Attempt to update transforms using relayout
Plotly.relayout('myDiv', {
  transforms: newTransforms // This doesn't seem to work
});

Hi there,

Thank you for the suggestion! I actually tried using this logic in my implementation. However, I encountered an issue where the filtering doesn’t work as expected. I have tried updating the visibility property of the traces based on the filter criteria, but it doesn’t seem to reflect the intended changes.

When I filter based on x, y, and customdata, the filter works, but it becomes inefficient for large datasets, especially since I’m using dynamic scroll filtering.

I will attach a screenshot of the Plotly chart for reference, so you can see how the plot appears.


codepen url
Thanks again for your help, and I appreciate any further suggestions you might have!

Note: transforms are deprecated and will be removed in a future version of Plotly.js

To start I don’t know what version of Plotly you are using in your example it is 3.3 while the most current is 2.35, change that because it doesn’t work, second you have to understand that a graph is structured in three parts, the data, the layout and the configuration, the transformations are part of the data so the relayout function will not help you to add or modify the transformations since it only changes the layout, in this case you need to use the restyle or update function. To add transformations (shapes and annotations) after creating the graph you need to indicate the index and well finally I leave you this example I hope it helps you

These are the values ​​you can use in the property operation.

  • COMPARISON: ‘=’, ‘!=’, ‘<’, ‘>=’, ‘>’, ‘<=’
  • INTERVAL: ‘[ ]’, ‘()’, ‘[)’, ‘(]’, ‘][’, ‘)(’, ‘](’, ‘)[’
  • SET: ‘{}’, ‘}{’

Thank you for the insights! I really appreciate your detailed explanation.

You were right—after updating it to 2.35, everything started working as expected. I also made the necessary changes to use restyle instead of relayout for updating transforms dynamically, and now it works perfectly.

Thanks again for your help!