Highcharts Demo

author(s): Torstein Hønsi

by hendrikdegraaf

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

#container {
    width: 400px;
    height: 300px;
    margin: 0 auto;
}

JavaScript

const renderer = new Highcharts.Renderer(
    document.getElementById('container'),
    400,
    300
);

const rect = renderer.rect(10, 50, 200, 100, 5).attr({
    fill: '#2caffe',
    stroke: 'black',
    'stroke-width': 1
}).add();

const label = renderer.label('Hello world', 10, 10)
  .attr({fill: 'magenta'})
  .css({
    fontSize: '16pt',
    color: '#00e272'
  })
  .add();

// Run animation on click
renderer.button('Align', 10, 250)
    .on('click', () => {
    	const { width } = label.getBBox()
    	label.align(
 				{
      		align: 'right',
        	verticalAlign: 'top',
        	alignByTranslate: false,
          // correcting for the element height and width fixes things
          x: width * -1,
      	},
				false,
				rect.getBBox()
			)
    })
    .add();