Question

I have a custom chart here
I have set label property as

labels: {
            formatter: function() {
                return Highcharts.dateFormat('%Y', this.value);
            },
                align:'center',
            x:150
        }

I have a linked axis which shows year.
What I want is the axis label should be in center of the two extremes as in image.

what I have done now is, I have given x:150 to label.but that wont work if I resize the browser window.
Is there a way to do it?
Thanks in advance.

Answer 1

Here is the way I found it.

Instead of using static values,

I used useHTML, and positioned labels by CSS styles.

 labels: {
            useHTML:true,
            formatter: function() {
                return '<span class="label">'+Highcharts.dateFormat('%Y', this.value)+'</span>';
            }
        }

Simple example here