Column comparison

author(s): Sebastian Wedzel

by jpeter06

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<!-- Flag sprites service provided by Martijn Lafeber,
    https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css"
      href="https://github.s3.amazonaws.com/downloads/lafeber/world-flags-sprite/flags32.css" />

<div class='buttons'>
  <button id='2000'>
    2000
  </button>
  <button id='2004'>
    2004
  </button>
  <button id='2008'>
    2008
  </button>
  <button id='2012'>
    2012
  </button>
  <button id='2016'>
    2016
  </button>
  <button id='2020' class='active'>
    2020
  </button>
</div>
<div id="container"></div>

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto;
}

.buttons {
    min-width: 310px;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0;
}

.buttons button {
    cursor: pointer;
    border: 1px solid silver;
    border-right-width: 0;
    background-color: #f8f8f8;
    font-size: 1rem;
    padding: 0.5rem;
    transition-duration: 0.3s;
    margin: 0;
}

.buttons button:first-child {
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
}

.buttons button:last-child {
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    border-right-width: 1px;
}

.buttons button:hover {
    color: white;
    background-color: rgb(158 159 163);
    outline: none;
}

.buttons button.active {
    background-color: #0051b4;
    color: white;
}

JavaScript

const dataPrev = {
    2020: [
        ['South Korea', 9],
        ['Japan', 12],
        ['Australia', 8],
        ['Germany', 17],
        ['Russia', 19],
        ['China', 26],
        ['Great Britain', 27],
        ['United States', 46]
    ],
    2016: [
        ['South Korea', 13],
        ['Japan', 7],
        ['Australia', 8],
        ['Germany', 11],
        ['Russia', 20],
        ['China', 38],
        ['Great Britain', 29],
        ['United States', 47]
    ],
    2012: [
        ['South Korea', 13],
        ['Japan', 9],
        ['Australia', 14],
        ['Germany', 16],
        ['Russia', 24],
        ['China', 48],
        ['Great Britain', 19],
        ['United States', 36]
    ],
    2008: [
        ['South Korea', 9],
        ['Japan', 17],
        ['Australia', 18],
        ['Germany', 13],
        ['Russia', 29],
        ['China', 33],
        ['Great Britain', 9],
        ['United States', 37]
    ],
    2004: [
        ['South Korea', 8],
        ['Japan', 5],
        ['Australia', 16],
        ['Germany', 13],
        ['Russia', 32],
        ['China', 28],
        ['Great Britain', 11],
        ['United States', 37]
    ],
    2000: [
        ['South Korea', 7],
        ['Japan', 3],
        ['Australia', 9],
        ['Germany', 20],
        ['Russia', 26],
        ['China', 16],
        ['Great Britain', 1],
        ['United States', 44]
    ]
};

const data = {
    2020: [
        ['South Korea', 6],
        ['Japan', 27],
        ['Australia', 17],
        ['Germany', 10],
        ['Russia', 20],
        ['China', 38],
        ['Great Britain', 22],
        ['United States', 39]
    ],
    2016: [
        ['South Korea', 9],
        ['Japan', 12],
        ['Australia', 8],
        ['Germany', 17],
        ['Russia', 19],
        ['China', 26],
        ['Great Britain', 27],
        ['United States', 46]
    ],
    2012: [
        ['South Korea', 13],
        ['Japan', 7],
        ['Australia', 8],
        ['Germany', 11],
       ...