Highcharts v11.3 doesn't work properly on internet explorer 11 #21098
Description
We recently updated our application from highcharts v7 to the v11.3; since we need to be compatible with internet explorer 11, we load the library (highstock) from the es5 folder as shown here https://www.highcharts.com/docs/getting-started/system-requirements.
All the charts are drawn but we encountered the following problems:
- There is no way to show the tooltip.
- The event click doesn't work, we have to click several times on the chart (we especially tested pie charts) and only few times the event is fired.
Unfortunately I haven't found a fiddle that works with ie11 or edge in internet explorer mode.
Here there is an example you can try on internet explorer:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="https://code.highcharts.com/es5/highstock.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
series: {
cursor: 'pointer'
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false,
events: {
click: function(event) {
// event click function...
alert ("clicked");
}
}
}
},
tooltip: {
enabled: true
},
series: [
{
name: 'Percentage',
colorByPoint: true,
data: [
{
name: 'Water',
y: 55.02
},
{
name: 'Fat',
y: 26.71
},
{
name: 'Carbohydrates',
y: 1.09
},
{
name: 'Protein',
y: 15.5
},
{
name: 'Ash',
y: 1.68
}
]
}
]
});
});
</script>
<head>
<body>
<div id="container">
</div>
</body>
</html>