4 plots communication

[SafwanMakeTheWay]

I just started studying React and found your beautiful tool.

Based on your example (Association filter), I tried to create 4 plots where each one will communicate with the rest of the plots. Is that possible?
If yes, could you please guide me on how to do this?

Below is my attempt:

import React, { useState, useEffect } from 'react';
import { Mix } from '@ant-design/plots';

const BarInteraction = () => {
const [data, setData] = useState({});

useEffect(() => {
asyncFetch();
}, []);

const asyncFetch = () => {
// const file='https://gw.alipayobjects.com/os/antfincdn/HkxWvFrZuC/association-data.json';
const file='/DATA/data_1.json';
fetch(file)
.then((response) => response.json())
.then((json) => {
console.log('Fetched Data:', json); // Print fetched data to console
setData(json);
})
.catch((error) => {
console.log('Fetch data failed:', error);
});
};
if (!Object.keys(data).length) {
return null;
}
const config = {
tooltip: false,
plots: [
// ==== Plot 1 occupies the top-left quadrant (0,0) to (0.5,0.5).====
{
type: 'area',
region: {
start: {
x: 0,
y: 0,
},
end: {
x: 0.5,
y: 0.5,
},
},
options: {
data: data.line,
xField: 'time',
yField: 'value',
seriesField: 'area',
line: {},
point: {
style: {
r: 2.5,
},
},
meta: {
time: {
range: [0, 1],
},
},
smooth: true,
tooltip: {
showCrosshairs: true,
shared: true,
},
interactions: [
{
type: 'association-highlight',
},
{
type: 'element-click',
},
{
type: 'custom-association-filter',
},
],

    },
  },
  // ==== Plot 2 occupies the top-right quadrant (0.5,0) to (1,0.5).====
  {
    type: 'area',
    region: {
      start: {
        x: 0.5,
        y: 0.0,
      },
      end: {
        x: 1,
        y: 0.5,
      },
    },
    options: {
      data: data.line,
      xField: 'time',
      yField: 'value',
      seriesField: 'area',
      line: {},
      point: {
        style: {
          r: 2.5,
        },
      },
      meta: {
        time: {
          range: [0, 1],
        },
      },
      smooth: true,
      tooltip: {
        showCrosshairs: true,
        shared: true,
      },
      interactions: [
        {
          type: 'association-highlight',
        },
        { 
          type: 'element-click',
        },
        {
          type: 'custom-association-filter',
        },
      ],

    },
  },
  // ==== Plot 3 occupies the bottom-left quadrant (0,0.5) to (0.5,1).====
  {
    type: 'area',
    region: {
      start: {
        x: 0,
        y: 0.5,
      },
      end: {
        x: 0.5,
        y: 1,
      },
    },
    options: {
      data: data.line,
      xField: 'time',
      yField: 'value',
      seriesField: 'area',
      line: {},
      point: {
        style: {
          r: 2.5,
        },
      },
      meta: {
        time: {
          range: [0, 1],
        },
      },
      smooth: true,
      tooltip: {
        showCrosshairs: true,
        shared: true,
      },
      interactions: [
        {
          type: 'association-highlight',
        },
        { 
          type: 'element-click',
        },
        {
          type: 'custom-association-filter',
        },
      ],
    },
  },
  // ==== Plot 4 occupies the top-left quadrant (0,0) to (0.5,0.5).====
  {
    type: 'pie',
    region: {
      start: {
        x: 0.5,
        y: 0.5,
      },
      end: {
        x: 1,
        y: 1,
      },
    },
    options: {
      appendPadding: 10,
      data: data.pie,
      angleField: 'bill',
      colorField: 'area',
      tooltip: {
        showMarkers: false,
      },
      radius: 0.85,
      label: {
        type: 'inner',
        formatter: '{name}',
        offset: '-15%',
      },
      interactions: [
        {
          //type: 'element-highlight',
          type: 'element-single-selected',
        },
        {
          type: 'custom-association-filter',
        },
      ],
      
    },
  },
],

};

return (
<Mix
{...config}
style={{ width: '100vw', height: '800px' }} // Adjust width and height as needed
/>
);
};

export default BarInteraction;