CODEWITHSUNDEEP
csshighcharts
thumbtackthief
thumbtackthief

Reputation: 6221

center rendered label in High Charts

My graph looks like this:

enter image description here

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

Answers (1)

Paweł Fus
Paweł Fus

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:

  • load jQuery or standalone adapter for Highcharts
  • load Highcharts
  • load extra plugins for Highcharts

Extra2:
You can consider using Axis.toPixels(value, paneCoords) method instead of dummy series.

Upvotes: 4

Related Questions