highcharts: disable hover on column chart when i use two chart togheder - highcharts

Question

Before the hover in the empty space
After the hover in the empty space
It consists of two simultaneous charts.
As I move the mouse over the empty space, the bottom chart becomes faint. I want nothing to happen in hover.
I searched the internet a lot for inactive and hover to false, and ... but none.
This is my chart info:
Highcharts.chart('stock-trading-process', {
title: {
text: ''
},
tooltip: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
visible: false
},
chart: {
backgroundColor: 'gray',
margin: [0, 0, 0, 0]
},
yAxis: [{
gridLineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
},
height: '50%',
lineWidth: 2,
}, {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: ''
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'line',
showInLegend: false,
color: '#00B1FC',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1, 1],
marker: {
enabled: false,
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
},
states: { hover: 'none' },
fillColor: '#F7F8FA'
}, {
type: 'column',
color: '#94E3FD',
pointWidth: 1,
showInLegend: false,
marker: {
enabled: true,
states: {
hover: {
enabled: true
},
inactive: {
opacity: 1
}
}
},
data: [1, 8, 6, 7, 4, 5, 9, 3, 2, 1, 7, 8, 5, 1, 2, 5, 9],
yAxis: 1,
states: { hover: 'none' }
}],
exporting: {
enabled: true
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
}
});

Answer 1

As I understood - setting the states.inactive.opacity to 1 on the series object is the solution which you are looking for.
states: {
inactive: {
opacity: 1
}
},
Demo: https://jsfiddle.net/BlackLabel/en5j4v31/
API: https://api.highcharts.com/highcharts/series.line.states.inactive.opacity
Am I right? If not, could you describe more precisely what do you have in mind?

Answer 2

Why doesn't it work for me?
Demo: https://jsfiddle.net/3uzfqs4m/
{
yAxis: [{
visible: false,
gridLineWidth: 0,
title: {
text: ''
},
labels: {
enabled: false
},
height: '50%',
lineWidth: 2,
}, {
visible: false,
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: ''
},
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'line',
showInLegend: false,
color: '#00B1FC',
data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
marker: {
enabled: false,
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
},
states: {
inactive: {
opacity: 1
}
},
states: { hover: 'none' },
fillColor: '#F7F8FA'
}, {
type: 'column',
color: '#94E3FD',
pointWidth: 1,
showInLegend: false,
marker: {
enabled: true,
states: {
hover: {
enabled: true
},
inactive: {
opacity: 1
}
}
},
states: {
inactive: {
opacity: 1
}
},
data: [50, 15, 8, 25, 84, 74, 26, 54, 29, 35, 9, 15, 17, 18, 54, 26, 34, 27, 26, 18, 57, 24, 35, 16, 24, 25, 27],
yAxis: 1,
states: { hover: 'none' }
}],
chart: {
backgroundColor: '#F4F7FA',
margin: [0, -5, 0, -5]
},
title: {
text: ''
},
tooltip: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
visible: false
},
exporting: {
enabled: true
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
}
}