Reputation: 6221
My graph looks like this:
with plot lines on the x-axis as shown (just after 1993 and 2001) respectively. I need to get the lines of the label to be centered both between the two plot lines and with respect to each other. I started by making a hidden series that corresponded to the plot lines, then using those points to place the label:
function(chart){
var labelOnePos = chart.series[2].data[0],
text1 = chart.renderer.text(
'line #1<br>line2 different length',
labelOnePos.plotX,
labelOnePos.plotY + chart.plotTop - 300
).css({
color: 'white',
}).add(),
box1 = text1.getBBox();
but I can't figure out how to align the text.
Fiddle: http://jsfiddle.net/q8ef9mmk/
Upvotes: 1
Views: 1901
Reputation: 45079
To align text, use attr({ align: 'center' })
. Example: http://jsfiddle.net/q8ef9mmk/4/
However, when you want to render anything in dimensions of the chart, then remember that plotting area is translated by chart.plotTop
and chart.plotLeft
.
And code:
var labelOnePos = chart.series[1].data[0],
text1 = chart.renderer.text(
'line1<br>a line of diff length',
labelOnePos.plotX + chart.plotLeft, // add chart.plotLeft!
150).attr({
zIndex: 55,
align: 'center' // center label
}).css({
fontSize: sectionLabelFontSize,
color: 'blue'
}).add(),
box1 = text1.getBBox();
});
Extra:
You have wrong order of files, proper order is:
Extra2:
You can consider using Axis.toPixels(value, paneCoords)
method instead of dummy series.
Upvotes: 4