Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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

CSS

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

JavaScript

const align = Highcharts.Series.prototype.alignDataLabel;

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

const texts = ['10 000', '100 000'];

let i = 0;

const label = renderer.label(texts[0], 200, 200)
	.add();


renderer.path([
  ['M', 200, 0],
  ['L', 200, 400]
]).attr({
  stroke: 'red'
}).add()

setInterval(() => {
  i++;

  label.attr({
    text: texts[i % 2]
  });

  label.align({
    align: "right",
    width: label.getBBox().width
  }, false, {
    height: 0,
    width: 0,
    x: 200,
    y: 200
  });


}, 1001);