Highcharts Renderer Fiddle

by J. Albert Bowden

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<h1>
Understanding text alignment
</h1>
<p>
Drag the slider to see how labels are aligned to boxes, lines and points. Notice that a <em>left</em> aligned text will actually draw to the <em>right</em> of the line or point that it is aligned to.
</p>
<div id="container" style="height: 200px; width: 200px; border: 1px solid silver"></div>

<input type="range" min="1" max="100" value="100" id="width" /> Width

JavaScript

var ren = new Highcharts.Renderer(
    document.getElementById('container'),
    200,
    200
);

var box = ren.rect(50.5, 50.5, 100, 100)
	.attr({
    	'stroke': 'black',
        'stroke-width': 1
    })
    .add();
    
var left = ren.label('Left', 50, 50)
    .add();

var right = ren.label('Right', 150, 130) 
	.attr({
    	align: 'right'
    })
    .add();
    
$('input#width').bind('input', function (e) {
	var w = parseInt(e.target.value, 10);
    box.attr({
    	x: 100.5 - w / 2,
    	width: w
    });
    left.attr({ x: 100.5 - w / 2})
    right.attr({ x: 100.5 + w / 2 });
});