CODEWITHSUNDEEP
highcharts
Jason Butera
Jason Butera

Reputation: 2460

Align Legend with x-Axis Title in HighCharts

The default behavior of the x-axis title alignment is within the bounds of the x-axis. However, the legend alignment is within the bounds of the entire chart. Thus, if you align both center, they have a slight offset. How can I get the legend to base its position off of the x-axis bounds instead? My graph options are dynamic, so I would need to do it dynamically.

Sample JS Fiddle

$('#container').highcharts({
     legend: { margin:5, padding:0 },
     xAxis:{
         title:{ 
             text:'THIS IS MY X-AXIS TITLE',
             align:'middle',
         },
        categories:["A","B","C","D","E","F"]
     }
});

Thanks in advance!

Upvotes: 0

Views: 1598

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Example for you: http://jsfiddle.net/xqag5e72/2/

In short, you can change translation for legend to be similar to xAxis' title:

function moveLegend(e) {
    var legend = this.legend,
        x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
        y = legend.group.translateY;
    legend.group.attr({
        transform: 'translate(' + x + ',' + y +')' 
    });
}

Note: I'm using load and redraw events, to translate legend after first initialization and later to make this legend responsive.

Upvotes: 2

Related Questions