<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/dumbbell.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
 <div id="container"></div>

.size{
  font-size:25px;
}
.blueDot{
  color:#2222b2;
  
}
.redDot{
  color:#B22222;
}
.smallSize{
  font-size:12px;  !important;
}

var data = [{
    name: 'Denmark',
    low: 6,
    high: 25
  },
  {
    name: 'Finland',
    low: 6,
    high: 34
  },
  {
    name: 'Norway',
    low: 8,
    high: 26
  },
  {
    name: 'France',
    low: 8,
    high: 37
  },
  {
    name: 'Sweden',
    low: 9,
    high: 25
  },
  {
    name: 'Ireland',
    low: 9,
    high: 35
  },
  {
    name: 'Belgium',
    low: 10,
    high: 34
  },
  {
    name: 'Austira',
    low: 10,
    high: 32
  },
  {
    name: 'Germany',
    low: 10,
    high: 33
  },
  {
    name: 'Luxembourg',
    low: 11,
    high: 33
  },
  {
    name: 'United kingdom',
    low: 11,
    high: 30
  },
  {
    name: 'Canada',
    low: 12,
    high: 25
  },
  {
    name: 'Korea',
    low: 18,
    high: 20
  },
  {
    name: 'United states',
    low: 18,
    high: 27
  }
];

Highcharts.chart('container', {

  chart: {
    type: 'dumbbell',
    inverted: true,
    zoomType: 'x'
  },

  legend: {
    enabled: false
  },

  subtitle: {
    useHTML: true,
    text: '<br/><span class="blueDot size">&bull;</span> Before taxes and transfers <br/><span class="redDot size" >&bull;</span> After taxes and transfers'
  },

  title: {
    text: 'Poverty rate 2016<br> <span class="smallSize">Source:cbpp.org</span>'
  },

  tooltip: {
    shared: true,
    useHTML: true,
    formatter: function() {
      debugger;
      return '<b>' + this.points[0].point.name + '</b> <br/> <span class="blueDot" >Before taxes and transfers: ' + this.points[0].point.high + ' %</span>' + '<br/><span  class="redDot" >After taxes and transfers: ' + this.points[0].point.low + ' %</span>';
    }
  },

  xAxis: {
    type: 'category'
  },

  yAxis: {
    min: 0,
    max: 50,
    labels: {
      format: '{value} %'
    },
    title: {
      text: null
    }
  },
  plotOptions: {
    dumbbell: {
      grouping: false
    }
  },

  series: [{
    name: 'Poverty rate 2016',
    data: data,
    lowColor: "#B22222",
    marker: {
      fillColor: "#2222b2"
    }
  }]

});