CODEWITHSUNDEEP
javascriptcsschartshighcharts
aimfeld
aimfeld

Reputation: 3141

Individual positioning of x-axis labels in a polar highchart

I have a polar highchart with 12 categories. Since x-axis labels contain up to 4 lines, automatic label y-positioning is slightly off for the categories on the top and the bottom. It looks similar to this example, but in my case, the labels overlap with the chart area, not with each other. So I need to subtract a few pixels from the y-coordinate of the labels on the top and add a few pixels for the category labels at the bottom.

I tried setting the offset parameter of the x-axis, but this shifts up or down all labels by the same amount:

xAxis: {
    offset: 20
}

I also tried adding a callback function to the formatter of the x-axis labels, but I just can't figure out how to adjust every category label position.

Upvotes: 2

Views: 2567

Answers (2)

Lazaro Arcos
Lazaro Arcos

Reputation: 11

this is a solution of highchart Heldesk

http://jsfiddle.net/crguqmsv/1/

function(chart){
    var len = chart.xAxis[0].ticks.length;

    $.each(chart.xAxis[0].ticks,function(i,tick){

        if(i>=0 && i<=90) {
            console.log(tick.label.attr({
                rotation:-45
            }));
        } 
    });
}

Upvotes: 1

MrShmee
MrShmee

Reputation: 175

You can adjust the position of the labels with the "x" and "y" options within the "labels" category under the axis definition. 

labels: {
     x: 20,
     y: 10
}

In the above case, the labels will be 20px right and 10px down from their default position.

EDIT: I re-read the title, and Im sorry, this is for all the labels, not individually. My Bad.

Upvotes: 0

Related Questions