Dumbbell series

author(s): Rafal Sebestjanski

by Umair Rafiq

HTML

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

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

<figure class="highcharts-figure">
    <div id="container"></div>

</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
.main-color,
.main-color .highcharts-point {
    fill: red;
}

JavaScript

var data = [
{name: 'Austria',    low: 0,    high: 0},        {name: 'Austria',    low: 0,    high: 82}, 
{name: 'Belgium',    low: 0,    high: 0},      {name: 'Belgium',    low: 0,    high: 81}, 
{name: 'Bulgaria',    low: 1,    high: 0},       {name: 'Bulgaria',    low: 0,    high: 75}, 
{name: 'Croatia',     low: -5, high: 0},  	       {name: 'Croatia',     low: 0, high: 90},
{name: 'Cyprus',    low: -14,    high: 0},        {name: 'Cyprus',    low: 0,    high: 81}, 
{name: 'Czech Republic',    low: -17,    high: 0},{name: 'Czech Republic',    low: 0,    high: 79}, 
{name: 'Denmark',    low: -27,    high: 0},       {name: 'Denmark',    low: 0,    high: 81}, 
{name: 'Estonia',    low: -38,    high: 0},       {name: 'Estonia',    low: 0,    high: 78}, 
{name: 'Finland',    low: -69,    high: 0},       {name: 'Finland',    low: 0,    high: 31}, 
{name: 'France',    low: -70,    high: 0},        {name: 'France',    low: 0,    high: 23}, 
{name: 'Greece',    low: -68,    high: 0},        {name: 'Greece',    low: 0,    high: 11}, 
{name: 'Spain',    low: -69,    high: 0},         {name: 'Spain',    low: 0,    high: 11}, 
{name: 'Netherlands',    low: -73,    high: 0},   {name: 'Netherlands',    low: 0,    high: 12}, 
{name: 'Ireland',    low: -70,    high: 0},       {name: 'Ireland',    low: 0,    high: 12}, 
{name: 'Lithuania',    low: -70,    high: 0},     {name: 'Lithuania',    low: 0,    high: 15}, 
{name: 'Luxembourg',    low: -68,    high: 0},    {name: 'Luxembourg',    low: 0,    high: 3}, 
{name: 'Latvia',    low: -70,    high: 0},        {name: 'Latvia',    low: 0,    high: 75}, 
{name: 'Malta',    low: -69,    high: 0},         {name: 'Malta',    low: 0,    high: 82}, 
{name: 'Germany',    low: -69,    high: 0},       {name: 'Germany',    low: 0,    high: 81}, 
{name: 'Poland',    low: -68,    high: 0},        {name: 'Poland',    low: 0,    high: 78}, 
{name: 'Portugal',    low: -63,    high: 0},      {name: 'Portugal',    low: 0,    high: 81}, 
{name:...