CODEWITHSUNDEEP
javascriptjqueryhighcharts
perseus
perseus

Reputation: 1381

Updating fontsize with highcharts using zoomtype

I have a column chart in Highcharts with a big number of columns so the columns are very small. That's fine but I want to do zoom. So I used zoomtype: 'x' and it work well.

The problem is that I want to make the font bigger on the xAxis when they are selected. I tried by doing this:

chart: {
            type: 'column',
            zoomType: 'x',
            events: {
                redraw: function(event) {
                    if(this.xAxis[0].tickPositions.length>80){
                        this.xAxis[0].options.labels.style.fontSize = 1;
                    }else{
                        this.xAxis[0].options.labels.style.fontSize = 20;
                        console.log(this.xAxis[0].options.labels.style.fontSize);                  
                    }

                }

            }
        }

When I check the console the value of this.xAxis[0].options.labels.style.fontSize is updated to 20. This code works only when I press the Reset zoom button. So my question is how can I update the chart when the event is triggered so it takes the same effects as if I use the Reset zoom button?

Or how can I make changes in the font when I make zoom and when reseting the zoom?

Upvotes: 0

Views: 311

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can catch afterSetExtremes event and then axis.update() with new styles for bales.

events:{
            afterSetExtremes:function(){
                this.update({
                    labels:{
                        style:{
                            fontSize:20
                        } 
                    }
                });
            }
 }

Example: http://jsfiddle.net/m180dxsu/

Upvotes: 1

Related Questions