This is how you can use superscript in HighChart labels using useHTML property :
(you can run and edit below code here : http://jsfiddle.net/lahoti32/j0ue1naf/ )
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
credits : {
enabled : false
},
title: {
text: 'Chart Title<sup>1</sup>',
useHTML : true,
},
xAxis: {
categories: [ 'label1','label2','label3<sup>4</sup>','label4'],
title:{
enabled: false
},
labels: {
useHTML : true,
title: {
enabled: false
}
},
},
yAxis: {
title: {
enabled: false
},
labels: {
useHTML : true,
formatter:function(){
if(this.value != 10){
return this.value;
}else{
return this.value + '<sup> 2</sup>';
}
}
}
},
legend: {
useHTML : true,
borderWidth: 0,
labelFormatter:function(){
if(this.name != 'legend1'){
return this.name;
}else{
return this.name + '<sup> 5</sup>';
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML : true,
y:-1,
formatter:function(){
if(this.y != 0){
if(this.y > 8 && this.y < 10){
return this.y + '<sup> 3</sup>';
}else{
return this.y;
}
}else{
return null;
}
}
}
}
},
series: [{
data: [{
y: 14.913
}, {
y: 8.281
}, {
y: 3.592
}, {
y: 3.017
}],
showInLegend: false,
},{
name: 'legend1',
color: 'rgb(14,178,89)'
},{
name: 'legend2',
color: 'rgb(100,100,9)'
}]
});
});
(you can run and edit below code here : http://jsfiddle.net/lahoti32/j0ue1naf/ )
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
credits : {
enabled : false
},
title: {
text: 'Chart Title<sup>1</sup>',
useHTML : true,
},
xAxis: {
categories: [ 'label1','label2','label3<sup>4</sup>','label4'],
title:{
enabled: false
},
labels: {
useHTML : true,
title: {
enabled: false
}
},
},
yAxis: {
title: {
enabled: false
},
labels: {
useHTML : true,
formatter:function(){
if(this.value != 10){
return this.value;
}else{
return this.value + '<sup> 2</sup>';
}
}
}
},
legend: {
useHTML : true,
borderWidth: 0,
labelFormatter:function(){
if(this.name != 'legend1'){
return this.name;
}else{
return this.name + '<sup> 5</sup>';
}
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
useHTML : true,
y:-1,
formatter:function(){
if(this.y != 0){
if(this.y > 8 && this.y < 10){
return this.y + '<sup> 3</sup>';
}else{
return this.y;
}
}else{
return null;
}
}
}
}
},
series: [{
data: [{
y: 14.913
}, {
y: 8.281
}, {
y: 3.592
}, {
y: 3.017
}],
showInLegend: false,
},{
name: 'legend1',
color: 'rgb(14,178,89)'
},{
name: 'legend2',
color: 'rgb(100,100,9)'
}]
});
});