Why inactive option not working on scatter highcharts - reactjs

Question

I have try to show inactive setting in my chart. But it's not showing in my project { it's worked on another live editor }
Chart Library: Highcharts
Chart type: scatter
Chart Version:
"highcharts": "^6.1.1",
"highcharts-more": "^0.1.7","highcharts-react-official": "^3.1.0",
``const config = {
chart: {
zoomType: 'x',
type: 'scatter',
height: 400,
spacingLeft: 0,
spacingRight: 0,
spacingTop: 0,
spacingBottom: 0,
margin: [30, 50, 80, 180],
width: null,
style: {
fontFamily: 'Fira Sans'
},
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 3600 * 4000,
minTickInterval: 3600 * 100,
minRange: 1000 * 60 * 60,
dateTimeLabelFormats: {
minute: '%I:%M',
hour: '%I %P',
},
offset: 0,
},
yAxis: [
{
title: {
text: 'Part A',
align: "high",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: -10,
x: -15,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
labels: {
style: {
fontWeight: 300,
fontSize: '14px',
lineHeight: 16,
color: "#333333",
letterSpacing: 0,
},
y: 3,
align:'right',
},
categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
},
{
title: {
text: 'Part B',
align: "middle",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: 30,
x: 25,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
},
],
plotOptions: {
column: {
stacking: 'normal',
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
grouping: true,
}
},
},
series: [
{
"name": "Poor",
"data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
color: '#FF8A45',
marker: {
symbol: 'square'
},
},
{
"name": "Fair",
"data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
color: '#FFC100',
marker: {
symbol: 'square'
},
},
{
"name": "Moderate",
"data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
color: '#B7DCFD',
marker: {
symbol: 'square'
},
},
{
"name": "Good",
"data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
color: '#00C96A',
marker: {
symbol: 'square'
},
},
],
credits: {
enabled: false
},
};``
Here is my full config of hoghchart

Answer 1

You are using the 6.1.1 version but inactive option is available from 7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 .
I would recommend to always using the latest highcharts version.
So, all you have to do is set "highcharts": "latest" in your project.
If for some reason you need to use an older version, use mouseOver and mouseOut events to change the series color on hover.
plotOptions: {
series: {
events: {
mouseOver: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 0.5)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 0.5)'
})
}
})
},
mouseOut: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 1)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 1)'
})
}
})
}
}
}
},
Example demo:
https://jsfiddle.net/BlackLabel/zgjsof7L/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver