How get data name in Highcharts pie chart legend instead of "Slice" using array of values?

Question

I am creating a pie chart in Highcharts with a legend. When I specify the series as an array of values (my preferred method), the legend displays the string "Slice" for each value. If I instead specify the series as a list of objects with named values, I correctly see the data names. Can I see the data names if I specify the series as an array of values?

Here is the code that doesn't work but that I would like to use:

<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({    
    lang: {                
        decimalPoint: '.', 
        thousandsSep: ','  
    }                      
});                        
$(function () {                 
    $('#container').highcharts({
        chart: {                
            type: 'pie',        
            height: '500',         
            width: '750',          
            borderColor: '#EBBA95',
            borderWidth: 2         
        },                         
        plotOptions: {                                    
            pie: {                                        
                allowPointSelect: true,                   
                cursor: 'pointer', 
                showInLegend: true, 
                dataLabels: {                             
                    enabled: true,                        
                    format: '{point.y:,.0f}'              
                }                                         
            }                                             
        },                                                
        title: {                                          
            text: 'Rental Amounts for Paramount Directors'
        },                                                
        legend: {                                         
            enabled: true                                 
        },                                                
        xAxis: {                                                                
            categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
                         "SPIELBERG, S"],                                       
        },         
        series: [{                                                    
            name: 'Directors',                                        
            data: [74100000, 30673000, 36915000, 50000000, 90434000], 
        }]                                                            
    });                              
});                                  
</script>                                                    
</head>                                                      
<body>                                                       
<div id="container" style="width:600px; height:400px;"></div>
</body>                                                      
</html>

Here is the code that does work when I specify the series as a list of objects with named values:

<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({    
    lang: {                
        decimalPoint: '.', 
        thousandsSep: ','  
    }                      
});                        
$(function () {                 
    $('#container').highcharts({
        chart: {                
            type: 'pie',        
            height: '500',         
            width: '750',          
            borderColor: '#EBBA95',
            borderWidth: 2         
        },                         
        plotOptions: {                                    
            pie: {                                        
                allowPointSelect: true,                   
                cursor: 'pointer', 
                showInLegend: true,                       
                dataLabels: {                             
                    enabled: true,                        
                    format: '{point.y:,.0f}'              
                }                                         
            }                                             
        },                                                
        title: {                                          
            text: 'Rental Amounts for Paramount Directors'
        },                                                
        legend: {                                         
            enabled: true                                 
        },                                                
        series: [{                                        
            name: "Directors",                            
            slicedOffset: 20,                             
            data: [{    
               name: "BADHAM, J",                         
               y:    74100000                             
            }, {                
               name: "COPPOLA, F",                        
               y:    30673000                             
            }, {                  
               name: "GUILERMAN, J",                      
               y:    36915000                             
            }, {                    
               name: "HILLER, A",    
               y:    50000000        
            }, {                     
               name: "SPIELBERG, S", 
               y:    90434000        
            }]                
        }]                           
    });                              
});                                  
</script>                                                    
</head>                                                      
<body>                                                       
<div id="container" style="width:600px; height:400px;"></div>
</body>                                                      
</html>

wergeld wergeld · Accepted Answer · 2016-05-11T14:12:20

You can do this with tooltip.formatter and legend.labelFormatter and accessing the highchart options.

For the tooltip text:

tooltip: {
  formatter: function() {
    var sliceIndex = this.point.index;
    var sliceName = this.series.chart.axes[0].categories[sliceIndex];
    return 'The value for <b>' + sliceName +
      '</b> is <b>' + this.y + '</b>';
  }
},

And for the legend:

legend: {
  enabled: true,
  labelFormatter: function() {
    var legendIndex = this.index;
    var legendName = this.series.chart.axes[0].categories[legendIndex];

    return legendName;
  }
},

Live demo.

How get data name in Highcharts pie chart legend instead of "Slice" using array of values?

1 Answers