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 = 0;
  if(chart.series[0].visible){
    total = chart.series[0].points.reduce(function(accumulator, val) {
      return accumulator + Math.abs(val.low);
    }, 0);
  }
   
  if (chart.series[1].visible) {
    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;

    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 = 0 + "%";
    if(total != 0){
      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: {
      
      load: function() {
       
        this.series.forEach(function(s) {
          s.update({
            showInLegend: s.points.length
          });
        });
      },
...