Legend title position in

Question

I'm using the legend title, but it's being positioned to the left and above the legend items:

While I need it to be to the right, and on the same line as, the legend items:

Legend title only accepts 2 properties - title and style,.

Using style - I couldn't find any style property to move it (tried float, textAlign).

Using text - I tried wrapping the title in HTML tag with style="transform:translate(742,18);", but that doesn't do anything to it either.

From analyzing it in Firebug, I see that the item which I can control in the style isn't the actual item that's in charge of the positioning. The item I want to control is the one highlighted in blue, but the one I'm actually controlling is its inner item:

How can I position the title?

Answer 1

Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG.

Or in a Highcharts way:

var title = chart.legend.title;
title.translate(x, y); // translate legend's title

Demo: http://jsfiddle.net/rum1rcum/