I'm trying to use Highcharts stacked bar graph. I have two series to create the effect of fading like the picture below.
But when I use stacked bar, it highlights both of the series, like this.

What I'm trying to do is disabling highlight, so I can get the fading effect I want. So far I tried disabling with hover enable:false and inactive:true but nothing worked... By the way when I only use one series, I can disable it with both options.
Here is my files.
var options = {
chart: {
renderTo: 'graph',
type: 'bar',
styledMode: true,
},
title: {
text: ''
},
xAxis: { //actually y axis adds more variable in y axis
categories: ['Lisansüstü', 'Lisans', 'Önlisans']
},
yAxis: {
title: {
text: ''
},
labels: {
overflow: 'justify'
},
},
tooltip:{
enabled: false
},
credits: {
enabled: false
},
plotOptions:{
series:{
stacking: 'normal',
states: {
hover: {
enabled: false,
}
}
}
},
series: [{
name: '',
data: [5, 3, 4]
}, {
name: '',
data: [2, 2, 3]
},
]
};
var chart1 = new Highcharts.Chart(options);
.highcharts-color-0 {
fill: rgba(10, 89, 114, 0.5);
}
.highcharts-color-1 {
fill: rgba(10, 89, 114, 0.2);
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="graph" style="width:100%; height:100%;"></div>
plotOptions:{
series:{
stacking: 'normal',
enableMouseTracking: false,
}
},
After I searched so long, 3 minutes after posting this question solved the problem... This works fine!!