So I have this issue where i pass in categories with html, but if I send in
JavaScript
x
2
1
<a href="javascript:void(0)">foo</a>
2
the only thing that comes out is
JavaScript
1
2
1
<a>foo</a>
2
Does anyone know why this happens? Here is the code for the highchart. This has worked before and I haven’t changed anything that I can remember. These are all the details I have to post. How many more details do you need?
JavaScript
1
93
93
1
var test1 = Highcharts.chart('zoneChart', {
2
chart: {
3
type: 'bar',
4
height: 600
5
},
6
title: {
7
text: ''
8
},
9
xAxis: {
10
categories: categories,
11
labels: {
12
useHTML: true,
13
}
14
},
15
yAxis: {
16
min: 0,
17
max: 100,
18
title: {
19
text: null
20
}
21
},
22
tooltip: {
23
valueSuffix: '%',
24
formatter:function(){
25
var deviation = this.point.series.options.avvik;
26
var app = this.x;
27
var name = this.point.series.name;
28
var value = this.point.y
29
var html = this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.y,0,',','.') + '%</b><br/>';
30
$.each(deviation, function(i, item) {
31
/*<![CDATA[*/
32
if(item.key == app && item.avvik > 0) {
33
/*]]>*/
34
35
html = name + ': <b>' + Highcharts.numberFormat(value,0,',','.') + '%</b><br/><br />Har '+item.avvik+' avvik!';
36
}
37
})
38
39
return html;
40
}
41
},
42
credits: {
43
enabled: true,
44
},
45
legend: {
46
enabled: false,
47
layout: 'vertical',
48
align: 'right',
49
verticalAlign: 'middle',
50
borderWidth: 0
51
},
52
plotOptions: {
53
bar: {
54
dataLabels: {
55
enabled: true,
56
overflow: 'none',
57
crop: false,
58
useHtml: true
59
}
60
},
61
series: {
62
stacking: 'normal',
63
dataLabels: {
64
useHTML:true,
65
enabled: true,
66
color: '#FFFFFF',
67
align: 'right',
68
enabled: true,
69
overflow: 'none',
70
crop: false,
71
y: -10,
72
formatter: function(){
73
var app = this.x;
74
var html = '';
75
$.each(this.series.options.avvik, function(i, item) {
76
/*<![CDATA[*/
77
if(item.key == app && item.avvik > 0) {
78
/*]]>*/
79
html = '<img style="padding: 5px;" src="/css/icons/32/error.png" />';
80
}
81
})
82
83
return html;
84
}
85
}
86
}
87
},
88
credits: {
89
enabled: false
90
},
91
series: [seriesObject]
92
});
93
Advertisement
Answer
That behaviour was introduced in Highcharts 9 and it is intended. You can separate the click handlers from the config.
JavaScript
1
6
1
Highcharts.addEvent(Highcharts.Chart, 'load', e => {
2
[e.target.renderTo.querySelectorAll('a.alerter')].forEach(
3
a => a.onclick = function () { alert(a.innerHTML); }
4
);
5
});
6
Live demo: https://codepen.io/TorsteinHonsi/pen/RwoWPqd
Please check this github issue: https://github.com/highcharts/highcharts/issues/15031 for more information.