Wednesday, 9 September 2015

How to use superscript in HighChart labels

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)'      
        }]
    });
});