how to use Bootstrap font icons on x-axis lables in highcharts

Question

i am trying to put bootstrap font icons in my highchart x-axis labels, i have put that in a fiddle, to that you can see it,

http://jsfiddle.net/sanjaybathre/cJRMx/

i am using .net api of highchart code is:

public static string SocialBarStats()
    {
        Highcharts chart = new Highcharts("chart_SocialBarStats")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
            .SetTitle(new Title { Text = "PAGEVIEWS PER VISIT" })
            .SetXAxis(new XAxis
            {
                Categories = new[] { "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>",
                    "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>" },
                Title = new XAxisTitle { Text = string.Empty }
            })
            .SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle
                {
                    Text = "",
                    Align = AxisTitleAligns.High
                }
            })
            .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +' millions'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Bar = new PlotOptionsBar
                {
                    DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
                }
            })
            .SetLegend(new Legend
            {
                Enabled = false
            })
            .SetCredits(new Credits { Enabled = false })
            .SetSeries(new[]
                       {
                           new Series { Name = "Facebook", Data = new Data(new object[] { 2.5 }), Color = System.Drawing.Color.FromName("'#4c66a4'")},
                           new Series { Name = "Pinterest", Data = new Data(new object[] { 1.2 }), Color = System.Drawing.Color.FromName("'#cc181e'") },
                           new Series { Name = "Youtube", Data = new Data(new object[] { 1.8 }), Color = System.Drawing.Color.FromName("'#a825a9'") },
                           new Series { Name = "Twitter", Data = new Data(new object[] { 2.3 }), Color = System.Drawing.Color.FromName("'#129fca'") },
                           new Series { Name = "Google Plus", Data = new Data(new object[] { 2.9 }), Color = System.Drawing.Color.FromName("'#00933B'") }
                       });

        return chart.ToHtmlString();
    }

Answer 1

You can use a custom HTML formatter with useHTML and apply the according image based on the element value.

Code:

xAxis: {
    categories: ['Google Plus', 'Twitter', 'Youtube', 'Pinterest', 'Facebook'],
    title: {
        text: ''
    },
    labels: {
        useHTML: true,
        formatter: function () {
            return {
                'Google Plus': '<i class="icon-google-plus"></i>',
                    'Twitter': '<i class="icon-twitter"></i>',
                    'Facebook': '<i class="icon-facebook"></i>',
                    'Pinterest': '<i class="icon-pinterest"></i>',
                    'Youtube': '<i class="icon-youtube"></i>'
            }[this.value]; 
        }
    }
},

Demo: http://jsfiddle.net/IrvinDominin/XB7Nw/