Barry Hamilton Barry Hamilton - 4 months ago 26
jQuery Question

High Charts PieChart How Can I show point value inside segment and label name outside

Exactly as the title says.
https://jsfiddle.net/4wrLampu/5/

I have this pie chart with a simple series of data, and a central pie displaying total.

I want the data name and value to stay as is just outside the segment but I also want to display the percentage value of the segment in the center of the segment.

Is this possible with high charts, what would be the most straightforward route to achieving this?

For those who don't want to look at jsfiddle, this is the code for the current chart.

$(document).ready(function($) {
$('#pieChart').highcharts({
credits: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'pie',
marginTop: 20,
marginRight: 10,
marginLeft: 10,
marginBottom: 20,
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0,
},
plotOptions: {
pie: {
size:'100%',
center: ['50%', '50%'],
borderWidth: 0,
dataLabels: {
enabled: true,
distance: 0,
color: '#333333',
formatter: function() {
return '<b>'+ this.point.name +'</b>: <br/>'+ this.point.y;
}
},
}
},

title: {
text: 'Your Repayment'
},
series: [{
type: 'pie',
name:'Total',
size: '39%',
dataLabels: {
enabled: true,
distance: -30,
y: -50,
color: '#ccc',
style: {
fontSize: "18px",
fontFamily: "Arial, sans-serif",
fontWeight: "normal"
},
labelFormatter:function () {
return '<span style="margin-top:-30px;">'+this.name+'<span>'+' $'+this.y;
}
},
data:[{
name: 'Total',
color:'#B2B2B2',
y:1309
}]
},
{ type: 'pie',
name: 'My Pie Chart',
colorByPoint: true,
size: '80%',
innerSize: '50%',
data:[{
name: 'Value Name 1',
color:'#72BB32',
y: 984
},{
name:'Value Name 2',
color:'#F1E52B',
y: 250
},{
name:'Value Name 3',
color:'#A67461',
y: 75
}]
}],
});
});

Answer

To have two separate values for a single pie chart slice (a value outside the slice and a percentage inside), you'll need two different series objects in your chart definition. Each one will have different dataLabels.

Basically, you'll want to add this extra object to the series array:

{
  type: 'pie',
  name: 'My Pie Chart',
  size: '90%',
  dataLabels: {
    distance: -50,
    formatter: function() {
      if (this.percentage != 0) return Math.round(this.percentage) + '%'
    }
  }
}

See jsfiddle for working version: https://jsfiddle.net/bb83f2by/

Comments