Highcharts Annotations for donut chart

Question

I am trying to implement position of Annotations for donut chart outside of donut. I tried distance, x & y property, but they are not providing the desired result. Is there any way we can position the annotations for donut chart? Jsfiddle link is: http://jsfiddle.net/83dhb04j/5/

Code is:

    Highcharts.chart('container', {
  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Annotation label shapes'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '90%',
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5']
    ]
  }],

  tooltip: {
    enabled: false
  },

  annotations: [{
    labels: [{
      point: '0',
      shape: 'callout',
      y: -65,
      useHTML:true,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '1',
      shape: 'callout',
      useHTML:true,
      y: -50,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '2',
      shape: 'callout',
      useHTML:true,
      y: -50,
      x: 10,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }


    }, {
      point: '3',
      shape: 'callout',
      useHTML:true,
      y: 70,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '4',
      shape: 'callout',
      useHTML:true,
      y: 80,
      formatter: function() {
       return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '5',
      shape: 'callout',
      useHTML:true,
      y: -60,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }
    }]
  }]
});
function getVal(obj){
alert("value of y is $"+ obj)
}

If this is possible using datalabel property, please suggest that solution as well..

Hi, welcome to stack overflow. Please refer the [ask] link for more details on how to ask a question and update your question accordingly. — Jeroen Heier, Jan 12 '18 at 17:47
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/members/renderer-callout/ it will be helpful — Deep 3015, Jan 13 '18 at 13:34
I want to implement this..https://imgur.com/yKhWKOu....but unable to set datalabels/annotations in similar way..and datalabels/annotations are dynamic (i.e. based on value they can move). If possible, could you please help me.. — Coder, Jan 13 '18 at 14:59
as you state _datalabels/annotations are dynamic (i.e. based on value they can move)._ your best option to go is this http://jsfiddle.net/deep3015/28s30wmg/ . In the above comment you can see best possible annotations provided by highcharts but these are not matching your requirements. — Deep 3015, Jan 13 '18 at 17:17
yes..I've already created this..but the problem is I also need the shape of datalabel similar to the shape of datalabel in the image i.e. 'callout' shape.. — Coder, Jan 13 '18 at 18:09

Deep 3015 · Answer 1 · 2018-01-14T13:53:47.990

check this SO post for reference.You requirement is very unique. Make you own algorithm to place the callout according your dynamic data.

I managed to get only two position 'left' and 'right', with this I updated the position of callout.

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Annotation label shapes'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        useHTML: true,
        connectorWidth: 0,
        formatter: function() {
          //console.log(this.point.labelPos)
          if (this.point.labelPos[6] == "left") {
            return '<div class="callout right" onclick="getVal(' + this.y + ')" >$' + this.y + '</div>'
          }
          if (this.point.labelPos[6] == "right") {
            return '<div class="callout left" onclick="getVal(' + this.y + ')" >$' + this.y + '</div>'
          }

        }
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '70%',
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5']
    ]
  }],

  tooltip: {
    enabled: false
  },


});

function getVal(obj) {
  alert("value of y is $" + obj)
}

#container {
  max-width: 800px;
  margin: 0 auto;
}

div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.top::before {
  left: 30%;
  bottom: -20px;
  border-top: 11px solid #444;
}

.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}

.callout.left::before {
  right: -19px;
  top: 10%;
  border-left: 10px solid #444;
}

.callout.right::before {
  left: -20px;
  top: 10%;
  border-right: 10px solid #444;
}

.callout.top-left::before {
  left: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.top-right::before {
  right: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

Fiddle demo

Update for same color of callout shape color match to datalabel background

Follow steps

Add custon color in highcharts

colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'],
Add css accordingly

.callout.left::before { //default behaviour
  right: -19px;
  top: 10%;
}

.callout.left0::before { //setting border color of specific element having color index (means #058DC7 is first color index of color added beginning) 
  border-left: 10px solid #058DC7;
}

.callout.left1::before {
  border-left: 10px solid #50B432;
}

.callout.left2::before {
  border-left: 10px solid #ED561B;
}

.callout.left3::before {
  border-left: 10px solid #DDDF00;
}

.callout.left4::before {
  border-left: 10px solid #24CBE5;
}

.callout.left5::before {
  border-left: 10px solid #64E572;
}

update plotoption function adding class with color index

 formatter: function() {
  if (this.point.labelPos[6] == "left") {
    return '<div class="callout right right' + this.point.colorIndex + '" style="background:' + this.point.color + '">' + this.y + '</div>'
  }
  if (this.point.labelPos[6] == "right") {
    return '<div  class="callout left left' + this.point.colorIndex + '" style="background:' + this.point.color + '">' + this.y + '</div>'
  }

}

Updated demo

Thanks deep..I've tried your solution in my app. But facing two issues now: 1. Can we apply 'before' css dynamically i.e. I've changed the color of datalabel to the point color using 'this.point.color' property, but unable to change the notch color. Could you please check? 2. The datalabels are not responsive here. Is there any way, we can make them responsive? — Coder, Jan 14 '18 at 09:57
check i managed to get same color. It is dynamic based on color. — Deep 3015, Jan 14 '18 at 13:57
Thanks a lot bro..u've solved most of the problem.. i've applied it in my code and it's working fine..but only one issue is pending about the responsiveness.. the datalabels are not responsive..thanks a lot again:) — Coder, Jan 14 '18 at 16:29
If this helped mark this post accepted as instructed here https://meta.stackexchange.com/a/5235 — Deep 3015, Jan 14 '18 at 16:36
You can try the solution that I proposed in this topic: https://stackoverflow.com/questions/48213120/highcharts-datalabel-callout-shape-not-working-for-donut-chart/48279706#48279706 — Kamil Kulig, Jan 17 '18 at 12:49

Highcharts Annotations for donut chart

1 Answers1