Highchart: is it possible to change the font of the label in Highchart via a click of a button?

Question

Link to JFiddle: http://jsfiddle.net/z24ysp8m/3/ Here is the code in concern:

$(function() {
    var chartData = [-5, 5, -10, -20]; 
    var timeStamps = [];
    var index = 1;
    var pWidth = 25;

    $('#b').click(function(){
        timeStamps.push(new Date());
        var buttonB =  document.getElementById('b');
        buttonB.disabled = true;
       /* if(index == 1){
            $('#container').highcharts().xAxis[0].labels.style = {"color":"#6D869F","fontWeight":"bold"};
        }*/
        if(index <= chartData.length){
            $('#container').highcharts().series[0].remove();               
            $('#container').highcharts().addSeries({pointPlacement: 'on', data: [chartData[index - 1]], 
                pointWidth: pWidth});
            $('#container').highcharts().xAxis[0].setCategories([index]);
            setTimeout(function(){index++;}, 2000);

        }
        if(index < chartData.length){
            setTimeout(function(){buttonB.disabled = false;}, 1500);
        }else{
            setTimeout(function(){buttonB.style.visibility="hidden";}, 1500);
        }
        if(index == chartData.length - 1){
            setTimeout(function(){document.getElementById('b').innerHTML = 'Lasst Period';}, 1500);
        }
        console.log(timeStamps);
    })
   // $(document).ready(function () {
    Highcharts.setOptions({
        lang: {
            decimalPoint: ','
        },
    });
    $('#container').highcharts({
        chart: {
            type: 'column',
            width: 170,
            marginLeft: 74,
            marginRight: 16,
            marginBottom: 60
        },
        title: {
            text: ''
        },
        colors: [
            '#0000ff',
        ],
        xAxis: {
             title: {
                text: ''
                // offset: 23                
            },
            gridLineWidth: 1,
            startOnTick: true,
            tickPixelInterval: 80,
            categories: ['Filler'], // used only to make sure that the x-axis of the two charts
            // are aligned, not shown on the chart via setting the font color to white            
            min:0,
            max:0,
            labels: {
                style: {
                    color: 'white'
                }
            }
        },
        yAxis: {
            title: {
                text: 'Value'
            },
            min: -20,
            max: 20,
            tickPixelInterval: 40
        },
        plotOptions: {
            series: {
                animation: {
                    duration: 1000
                }
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return Highcharts.numberFormat(this.y, 2) + '%';
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            data: [],
            pointWidth: pWidth
        }]
    });
   // });
});

I want that the x-axis has no label when the page is loaded (The reason why I added in a filler text with white font is due to the fact that I don't want the size of the chart change upon click of a button). And upon the click of button, the label should be consecutively 1, 2, 3, 4...

Is there anyway around it except for setting marginBottom (which is not very precise)?

Answer 1

You may use .css() method for changing fill color of your text label.

Here you can find information about this method: http://api.highcharts.com/highcharts#Element.css

Highcharts.each($('#container').highcharts().xAxis[0].labelGroup.element.children, function(p, i) {
    $(p).css({
      fill: 'red'
    });
  });

And here you can find simple example how it can work: http://jsfiddle.net/z24ysp8m/6/