Highcharts Demo

author(s): Rafal Sebestjanski

by Black Label

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/dumbbell.js"></script>

<div id="container"></div>

JavaScript

var data = [{
  name: 'Austria',
  low: 69,
  high: 82,
  mid: 77
}, {
  name: 'Belgium',
  low: 70,
  high: 81,
  mid: 72
}, {
  name: 'Bulgaria',
  low: 69,
  high: 75,
  mid: 70
}, {
  name: 'Croatia',
  low: 65,
  high: 78
}, {
  name: 'Cyprus',
  low: 70,
  high: 81
}, {
  name: 'Czech Republic',
  low: 70,
  high: 79
}, {
  name: 'Denmark',
  low: 72,
  high: 81
}, {
  name: 'Estonia',
  low: 68,
  high: 78
}, {
  name: 'Finland',
  low: 69,
  high: 81
}, {
  name: 'France',
  low: 70,
  high: 83
}, {
  name: 'Greece',
  low: 68,
  high: 81
}];

Highcharts.chart('container', {
  chart: {
    type: 'dumbbell',
    inverted: true,
    events: {
      render: function() {
        let ren = this.renderer,
          data = this.series[0].data

        if (this.customCircle) {
          this.customCircle.destroy()
          this.customCircle = undefined
        }
        zIndex: 3
        this.customCircle = this.renderer.g('customCircle').attr({
          zIndex: 3
        }).add()

        data.forEach(el => {
          if (el.mid) {
            let distX = this.yAxis[0].toPixels(el.mid),
              distY = this.xAxis[0].toPixels(el.index)

            ren.circle(distX, distY, 3).attr({
              fill: 'red',
            }).add(this.customCircle);
          }
        })
      }
    }
  },
  xAxis: {
    type: 'category'
  },
  series: [{
    name: 'Life expectancy change',
    data: data,
  }]
});