How to display Δ in Highcharts category labels? - highcharts

Question

I've come across an issue that I'm pretty sure it's just where I'm setting my object value, however, I can't seem to get this to work.
I'm attempting to put the Δ character in the highcharts.js category as seen in this code snippet below:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Catawba Average Points'
},
xAxis: {
categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
labels: {
useHtml: true
}
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.10,
pointPadding: 0,
dataLabels: {
enabled: true,
alignt: 'right',
formatter: function() {
if (this.y != 0) {
return this.y;
}
}
}
}
},
series: [{
name: '(-) Var',
data: [0, 0, 0, 0, 0, 2, 0, 0],
color: '#ffa6a6',
stack: '2017Q3',
showInLegend: false
}, {
name: '(+) Var',
data: [0, 0, 0, 0, .1, 0, 0, 5.10],
color: '#a6e3c2',
stack: '2017Q2',
showInLegend: false
}, {
name: '2017Q3',
color: '#d9d9d9',
data: [10, 15, 10, 10, 3.1, 0, 25, 15],
stack: '2017Q3'
}, {
name: '2017Q2',
color: '#f2f2f2',
data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
stack: '2017Q2'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
I've tried putting the useHtml in several places to no avail. Any thoughts to what I'm doing wrong?
Here is a fiddle to play around with as well:
http://jsfiddle.net/crk3vn76/
EDIT
Note, the data comes from a database, and if I put the Δ in directly, it renders as a ?
EDIT 2
Okay, so this will work if I set my charset to utf-8 in the database and put the Δ directly in there. However, I'd still like to figure out how to do this using the html character code.

Answer 1

Creating my own JSFiddle to work with, it appears the configuration useHTML is case-sensitive and changing useHTML to useHTML correctly creates Δ in the categories
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Catawba Average Points'
},
xAxis: {
categories: ['Emergency TS Δs', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
labels: {
useHTML: true
}
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.10,
pointPadding: 0,
dataLabels: {
enabled: true,
alignt: 'right',
formatter: function() {
if (this.y != 0) {
return this.y;
}
}
}
}
},
series: [{
name: '(-) Var',
data: [0, 0, 0, 0, 0, 2, 0, 0],
color: '#ffa6a6',
stack: '2017Q3',
showInLegend: false
}, {
name: '(+) Var',
data: [0, 0, 0, 0, .1, 0, 0, 5.10],
color: '#a6e3c2',
stack: '2017Q2',
showInLegend: false
}, {
name: '2017Q3',
color: '#d9d9d9',
data: [10, 15, 10, 10, 3.1, 0, 25, 15],
stack: '2017Q3'
}, {
name: '2017Q2',
color: '#f2f2f2',
data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
stack: '2017Q2'
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

Answer 2

You could try the unicode representation as \u0394. This appears to work with labels.useHTML: true.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Catawba Average Points'
},
xAxis: {
categories: ['Emergency TS \u0394s', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'],
labels: {useHtml: true}
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.10,
pointPadding: 0,
dataLabels: {
enabled: true,
alignt: 'right',
formatter: function(){
if(this.y != 0){
return this.y;
}
}
}
}
},
series: [{
name: '(-) Var',
data: [0, 0, 0, 0, 0, 2, 0, 0],
color: '#ffa6a6',
stack: '2017Q3'
}, {
name: '(+) Var',
data: [0, 0, 0, 0, .1, 0, 0, 5.10],
color: '#a6e3c2',
stack: '2017Q2'
}, {
name: '2017Q3',
color: '#d9d9d9',
data: [10, 15, 10, 10, 3.1, 0, 25, 15],
stack: '2017Q3'
}, {
name: '2017Q2',
color: '#f2f2f2',
data: [10, 15, 10, 10, 3.0, 2, 25, 9.90],
stack: '2017Q2'
}]
});