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

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

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
            }
        }
    }

Answer 2

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?