how to manage line, scatter plot by same label? - chart.js

Question

I'm new in react-chartjs 2
this is my plot.
there are same labels such as FACTOR5 FACTOR5 FACTOR6 FACTOR6 ...
What I want to do is turn on/off the plot same time.
When I disable FACTOR5, then points, and line will disable.
but now I have to click each others.
How can I do?
Here is my code.
function createChart4() {
let result = Object.assign([], resultScatter);
let result2 = Object.assign([], resultData);
let columns = Object.keys(resultScatter[0]).filter(el => el !== "Y");
const colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#17becf"
"#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"];
let x=[];
for (let i=0; i<columns.length; i++){
x[i] = result.map((data) => data[columns[i]]);
}
let y = result.map((data) => data.Y);
let scatterData = {
datasets:[],
};
for (let i = 0; i < columns.length; i++) {
let color = colors[i];
let label = columns[i];
let lines = result2.filter(el => el.FACTOR_CD === transLangKey(columns[i]))[0];
let minX = Math.min(...x[i]);
let maxX = Math.max(...x[i]);
scatterData.datasets.push({
label: label,
data: x[i].map((val, index) => ({x: val, y: y[index]})),
backgroundColor: color,
borderColor: color,
hidden: i !== 0,
showLine: false,
},
{
label: label,
showLine: true,
data: [{x: minX, y: lines.REG_COEF * minX + lines.CONSTANT},
{x: maxX*1.05, y: lines.REG_COEF * maxX*1.05 + lines.CONSTANT},
],
backgroundColor: color,
borderColor: color,
hidden: i !== 0,
});
}
setChart4Data(scatterData);
}
When I click a label, points and line are disable or visualize in same time.