Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

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

JavaScript

function dynamicCircle(chart) {
  var total = chart.series[0].points.reduce(function(accumulator, val) {
    return accumulator + Math.abs(val.low);
  }, 0);
  if (chart.series[1].visible) {
    var total = total + chart.series[1].points.reduce(function(accumulator, val) {
      return accumulator + val.high;
    }, 0);
  }


  chart.series[0].points.forEach(function(p, index) {
    var x = chart.plotSizeX - chart.plotLeft - 20;

    var y = p.dataLabel.alignAttr.y + chart.plotTop + 14.5 //p.dataLabel.alignAttr.y + 60;

    var datax1 = p.series.visible ? p.low : 0;
    var numerator;
    if (chart.series.length > 1) {
      var datax2 = chart.series[1].visible ? chart.series[1].points[index].high : 0;
      numerator = Math.abs(datax1) + datax2;
    } else {
      numerator = Math.abs(datax1);
    }
    var percentage = Math.round((numerator / total) * 100) + "%";


    if (p.customCircle || percentage === '0%') {
      p.customCircle.destroy();
    }

    p.customCircle = chart.renderer.circle(x, y, 20)
      .attr({
        fill: 'transparent',
        stroke: '#0494fe',
        'stroke-width': 2
      }).add();

    if (p.customPercent || percentage === '0%') {
      p.customPercent.destroy();
    }

    p.customPercent = chart.renderer.text(percentage, x, y + 4)
      .css({
        color: '#262e38',
        fontSize: '14px',
        fontWeight: 'bold',
        'text-anchor': "middle",
        fontFamily: 'proxima_nova_regular'
      }).add();

    if (percentage === '0%' && p.customPercent && p.customCircle) {
      p.customPercent.hide();
      p.customCircle.hide();

    }
  })

}


$('#container1').highcharts({

  chart: {
    type: 'columnrange',
    inverted: true,
    marginLeft: 240,
    events: {
      render: function() {
        dynamicCircle(this)

      },
    }
  },

  title: {
    text: ""
  },


  xAxis: {
    categories: ['Physics', 'Computer Science', 'Maths'],
    labels: {
      useHTML: true,
      align: 'left',
      //distance: 10,
  ...