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="container"></div>

JavaScript

var percentages = [], circles = [];

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);  
  }
   
  while(percentages.length != 0) {
    percentages.pop().destroy();
  } 

  while(circles.length != 0){
    circles.pop().destroy();
  }

   var seriesfirst = undefined;
   if(chart.series[0].visible == true && chart.series[1].visible == true){
     seriesfirst = 0;
   }else if(chart.series[1].visible){
     seriesfirst = 1;
   }else if(chart.series[0].visible){
    seriesfirst = 0;
   }
  if(seriesfirst != undefined){
     chart.series[seriesfirst].points.forEach(function (p, index) {
                  var x = chart.plotSizeX - chart.plotLeft - 20;
                   
                  var y;
                  if(seriesfirst == 0){
                    y = p.dataLabel.alignAttr.y + chart.plotTop + 14.5;
                  }else{
                    y = chart.series[0].points[index].dataLabel.alignAttr.y + chart.plotTop + 14.5;
                  }
                   
                var datax1 = p.low;
                var numerator;
                if(chart.series[1].visible){
                  var datax2 = chart.series[1].points[index].high;
                  numerator = Math.abs(datax1) + datax2;
                 }else{
                   numerator = Math.abs(datax1);
                 }
                var percentage = Math.round((numerator/total) * 100) + "%";
                 
               
             var circle = chart.renderer.circle(x ,y,20)
                    .attr({
                      fill: 'transparent',
                      stroke: '#0494fe',
                      'stroke-width': 2
                    }).add();
              
              
            circles.push(circle)
            
           ...