How do I disable interaction on a Highcharts chart? - react-native

Question

In my react native application I have a Highcharts chart displaying some bar chart info.
I want to display the legend, so people know what the chart is showing, but I want to disable the functionality that hides bars when the legend is touched.
Additionally the bars themselves fade in and out when you press them... I have disabled the 'tooltip' but the fading still happens, how can I stop this?
If I could render to a static image that would be ideal!
just for info the code is
let Highcharts = "Highcharts";
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
tooltip: { enabled: false },
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: FieldStore.graphData.slice()
};

Answer 1

To disable hiding series on legend click, return false from legendItemClick event function.
To disable a tooltip and the fading effect on series hover set enableMouseTracking to false. If you want to also turn off the fading effect on legend hover, change opacity in inactive state:
plotOptions: {
series: {
enableMouseTracking: false,
states: {
inactive: {
opacity: 1
}
},
events: {
legendItemClick: function() {
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/gjkprbto/
API Reference:
https://api.highcharts.com/highcharts/series.bar.enableMouseTracking
https://api.highcharts.com/highcharts/series.bar.events.legendItemClick
https://api.highcharts.com/highcharts/series.bar.states.inactive.opacity