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="2020" min="2020" max="2024" />
		</div>
		<div id="container"></div>
	</div>
</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 #FF00B7;
    border-radius: 25px;
    color: white;
    background-color: #FF00B7;
    transition: background-color 250ms;
}

#play-pause-button:hover {
    background-color: #E10AAB;
}

#play-range {
    transform: translateY(2.5px);
    width: calc(100% - 90px);
    background-color: pink;
    border: 1px solid pink;
}

JavaScript

Highcharts.theme = {
  colors: ['#FF00B7',
    '#E10AAB',
    '#C3139E',
    '#A51D92',
    '#8D2785',
    '#75217A',
    '#5D2B6D',
    '#453560',
    '#2D3F54',
    '#154948'
  ],
  chart: {
    spacing: 0,
    panning: {
      enabled: false
    },
    zooming: {
      mouseWheel: {
        enabled: false
      }
    },
    style: {
      fontFamily: 'Montserrat, sans-serif'
    }
  },
  credits: {
    enabled: false
  },
  title: {
    style: {
      fontWeight: 'bold',
      fontSize: 20,
      color: '#1B1534'
    }
  },
  legend: {
    symbolRadius: 0,
    itemStyle: {
      fontSize: 14,
      fontWeight: 'bold',
      color: '#1B1534'
    }
  },
  plotOptions: {
    series: {
      legendSymbol: 'rectangle'
    },
    timeline: {
      marker: {
        symbol: 'circle'
      },
      dataLabels: {
        enabled: false
      }
    },
    spline: {
      marker: {
        enabled: false
      }
    },
    flags: {
      color: '#721F87',
      fillColor: '#721F87',
      shape: 'squarepin',
      crisp: true,
      style: {
        color: 'white'
      }
    }
  },
  xAxis: {
    maxPadding: 0.08,
    lineWidth: 0,
    title: {
      style: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#1B1534'
      }
    },
    labels: {
      style: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#1B1534'
      }
    }
  },
  yAxis: {
    showLastLabel: false,
    gridLineWidth: 4,
    gridLineColor: 'white',
    labels: {
      style: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#1B1534'
      }
    },
    title: {
      style: {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#1B1534'
      }
    }
  },
  responsive: {
    rules: [{
      condition: {
        maxWidth: 702
      },
      chartOptions: {
        yAxis: [{
            labels: {
              style: {
                fontSize: 12
              }
            },
            title: {
              style: {
               ...