score:0

this is how you can use usehtml property at chart title, axis labels, legend labels and data labels -

$(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)'      
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

score:11

consider using usehtml property:

...
//some options
title: {
   usehtml: true,
   text: "<sub>sub</sub>normal<sup>sup</sup>"
}
//other options
...

Related Query

More Query from same tag