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'),
  600,
  300
);

const rect = renderer.rect(0, 50, 200, 100, 5).attr({
  fill: 'orange',
}).add();

const text = renderer.label('First text', 0, 10).attr({
  padding: 0,
  height: 40,
  fill: 'yellow'
}).css({
  fontSize: '40px',
  letterSpacing: -2,
  color: 'red',
}).add();

const rect2 = renderer.rect(350, 50, 200, 100, 5).attr({
  fill: '#2caffe',
}).add();

const rectAsText = renderer.rect(350, 10, 60, 20).attr({
  fill: 'red'
}).add();

// Run animation on click
renderer.button('Align', 10, 250)
  .on('click', () => {
    // Align first one
    text.align({
        align: 'right',
        verticalAlign: 'top',
        alignByTranslate: false,
        x: text.getBBox().width * -1,
      },
      false,
      rect.getBBox()
    )

    // Align second one
    rectAsText.align({
        align: 'right',
        verticalAlign: 'top',
        alignByTranslate: false,
        x: rectAsText.getBBox().width * -1,
      },
      false,
      rect2.getBBox()
    )

  })
  .add();