World population by country

by Black Label

HTML

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

<figure class="highcharts-figure">
    <div id="parent-container">
		<div id="play-controls">
			<button id="play-pause-button" class="fa fa-play" title="play"></button>
			<input id="play-range" type="range" value="1960" min="1960" max="2018" />
		</div>
		<div id="container"></div>
	</div>
    <p class="highcharts-description">
        Bar chart showing the world population by countries from 1960 to 2018.
    </p>
</figure>

CSS

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

.highcharts-figure {
    margin: 0;
}

#play-controls {
    max-width: 1000px;
    margin: 1em auto;
}

#container {
    height: 900px;
    max-width: 1000px;
    margin: 0 auto;
}

#play-pause-button {
    margin-left: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid rgba(2, 117, 255, 1);
    border-radius: 25px;
    color: white;
    background-color: rgba(2, 117, 255, 1);
    transition: background-color 250ms;
}

#play-pause-button:hover {
    background-color: rgba(2, 117, 255, 0.5);
}

#play-range {
    transform: translateY(2.5px);
    width: calc(100% - 90px);
    background: #f8f8f8;
}

JavaScript

const startYear = 1960,
    endYear = 2018,
    btn = document.getElementById('play-pause-button'),
    input = document.getElementById('play-range'),
    nbr = 20;

let dataset, chart;


/*
 * Animate dataLabels functionality
 */
(function (H) {
    const FLOAT = /^-?\d+\.?\d*$/;

    // Add animated textSetter, just like fill/strokeSetters
    H.Fx.prototype.textSetter = function () {
        let startValue = this.start.replace(/ /g, ''),
            endValue = this.end.replace(/ /g, ''),
            currentValue = this.end.replace(/ /g, '');

        if ((startValue || '').match(FLOAT)) {
            startValue = parseInt(startValue, 10);
            endValue = parseInt(endValue, 10);

            // No support for float
            currentValue = Highcharts.numberFormat(
                Math.round(startValue + (endValue - startValue) * this.pos),
                0
            );
        }

        this.elem.endText = this.end;

        this.elem.attr(this.prop, currentValue, null, true);
    };

    // Add textGetter, not supported at all at this moment:
    H.SVGElement.prototype.textGetter = function () {
        const ct = this.text.element.textContent || '';
        return this.endText ? this.endText : ct.substring(0, ct.length / 2);
    };

    // Temporary change label.attr() with label.animate():
    // In core it's simple change attr(...) => animate(...) for text prop
    H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
        const attr = H.SVGElement.prototype.attr,
            chart = this.chart;

        if (chart.sequenceTimer) {
            this.points.forEach(point =>
                (point.dataLabels || []).forEach(
                    label =>
                        (label.attr = function (hash) {
                            if (
                                hash &&
                                hash.text !== undefined &&
                                chart.isResizing === 0
                            ) {
           ...