I need to disable animation so that when I switch to another chart the tooltip on the previous chart will instantly disappear. I am attaching a photo and my code.
Image
`document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('cpu_container', {
title: {
text: null
},
chart: {
backgroundColor: null,
height: 100
},
xAxis: {
type: null,
visibility: false,
labels: {
enabled: false
},
},
yAxis: {
gridLineColor: null,
visibility: false,
title: {
text: null
},
labels: {
enabled: false
}
},
legend: {
enabled: false
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
plotOptions: {
series: {
color: '#B469FF',
borderWidth: 0,
states: {
inactive: {
enabled: false,
},
stickyTracking: false,
}
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, 'rgba(180, 105, 255, 0.5)'],
[1, 'rgba(180, 105, 255, 0.05)']
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function (d) {
var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
return rV;
},
backgroundColor: "#373A41",
borderWidth: 0,
},
series: [{
type: 'area',
name: 'EUR',
data: [30, 50, 70, 20],
}]
});
Highcharts.chart('ram_container', {
title: {
text: null
},
chart: {
backgroundColor: null,
height: 100,
},
xAxis: {
type: null,
visibility: false,
labels: {
enabled: false
},
},
yAxis: {
gridLineColor: null,
visibility: false,
title: {
text: null
},
labels: {
enabled: false
}
},
legend: {
enabled: false
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
plotOptions: {
series: {
color: '#B469FF',
borderWidth: 0,
states: {
inactive: {
enabled: false,
},
stickyTracking: false,
}
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, 'rgba(180, 105, 255, 0.5)'],
[1, 'rgba(180, 105, 255, 0.05)']
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function (d) {
var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
return rV;
},
backgroundColor: "#373A41",
borderWidth: 0,
},
series: [{
type: 'area',
name: 'EUR',
data: [30, 50, 70, 20],
}]
});
Highcharts.chart('new_users_container', {
title: {
text: null
},
chart: {
backgroundColor: null,
height: 100
},
xAxis: {
type: null,
visibility: false,
labels: {
enabled: false
},
},
yAxis: {
gridLineColor: null,
visibility: false,
title: {
text: null
},
labels: {
enabled: false
}
},
legend: {
enabled: false
},
colors: ['#0000FF', '#0066FF', '#00CCFF'],
plotOptions: {
series: {
color: '#B469FF',
borderWidth: 0,
states: {
inactive: {
enabled: false,
},
stickyTracking: false,
}
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, 'rgba(180, 105, 255, 0.5)'],
[1, 'rgba(180, 105, 255, 0.05)']
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function (d) {
var rV = "<p style='font-size: 10px; color: #8E9092;'>21.01.2021, 16:00</p><br>";
rV += '<p style="font-size: 16px; color: #fff; margin-top: 2px;">56,11%</p>';
return rV;
},
backgroundColor: "#373A41",
borderWidth: 0,
},
series: [{
type: 'area',
name: 'EUR',
data: [30, 50, 70, 20],
}]
});
});`
JsFiddle - https://jsfiddle.net/ay1m4cxp/