Is it possible to sync between Line Chart and Scattered Chart ?

[zenhuzaini]

Hi, I have a scattered and a line chart type. I am trying to sync between these charts type.
I have these problems:

1. the tooltip does not appear in scattered chart when I hover to line chart, but the "cursor line" sync
2. when I hover in the scattered chart, there is no sync between line and scattered chart

the details can be seen here:

here is the code I have
`
const Chart = ({ type, matrixData, index, diagcodeLabel }) => {
const getMinValue = Math.min(...matrixData.map((data) => data[type]));
const getMaxValue = Math.max(...matrixData.map((data) => data[type]));

return (
	<div className="chart">
		<div className="title">{type}</div>
		<ResponsiveContainer key={"responsiveInformation"} width="100%" height={170}>
			{type === "DIAGCODE" ? (
				<ScatterChart
					syncId="chart"
					width={1200}
					height={400}
					margin={{
						top: 20,
						right: 20,
						bottom: 20,
						left: 20,
					}}
				>
					<YAxis
						type="number"
						dataKey="dLevel"
						tickFormatter={(value) => {
							return Object.keys(diagcodeLabel).find((k) => diagcodeLabel[k] === value);
						}}
					/>
					<Tooltip />
					<CartesianGrid strokeDasharray="3 3" className="chartGrid" />

					<Legend layout="vertical" content={<CustomLegend />} />
					<Scatter name="DiagCode" data={matrixData} fill="#8884d8" shape={"circle"}>
						{matrixData.map((entry, index) => {
							return (
								<Cell
									key={"cell-${index}"}
									fill={entry.IsLockout === "Lockout" ? "#5fb0ff" : "rgb(172, 45, 45)"}
								/>
							);
						})}
					</Scatter>
				</ScatterChart>
			) : (
				<LineChart
					syncId="chart"
					width={500}
					height={50}
					data={matrixData}
					margin={{
						top: 5,
						right: 30,
						left: 20,
						bottom: 5,
					}}
				>
					<CartesianGrid strokeDasharray="3 3" className="chartGrid" />
					<YAxis dataKey={type} domain={[getMinValue, getMaxValue]} />
					<Tooltip />
					<Line type="monotone" dataKey={type} stroke="#8884d8" activeDot={{ r: 8 }} />
				</LineChart>
			)}
		</ResponsiveContainer>
	</div>
);};

`

Is there a way I could sync them ?

[zenhuzaini]

Ok I ended up using composed charts (Scattered and Bar) https://recharts.org/en-US/examples/LineBarAreaComposedChart and I set the fillOpacity transparent for Bar. but I am not sure if it is the best workaround...