Grouping Legends in Pie Chart with Highcharts

Question

I have a pie chart that has a single series with all the data it shows, this data has objects of two types, source and destiny. By default the legends that appear are of each object name, but I need that the legends group the objects by type, source objects between them and destiny objects between them. I saw something similar in this post: Grouping Legends in Highcharts but it does not work for pie charts, I need that same thing but it works with pie charts. I'm using highcharts 4.2.6 .

Here is my pie chart with all its legends, I need show only two legends, one for blue section and the other one for light-blue section.

There is an example of my series object:

{
  "id": "Group11App36",
  "data": [
    {
      "name": "apple.com",
      "y": 2158959,
      "origin": "destiny",
      "color": "#195580"
    },
    {
      "name": "machtv.info",
      "y": 46442,
      "origin": "destiny",
      "color": "#195580"
    },
    {
      "name": "10.10.10.151",
      "y": 462724,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.11.213",
      "y": 133774,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.8.120",
      "y": 111039,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.13.99",
      "y": 69530,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.8.9",
      "y": 66338,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.12.36",
      "y": 64559,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.8.251",
      "y": 57293,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.11.196",
      "y": 53450,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.12.191",
      "y": 44372,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.10.119",
      "y": 43556,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.12.149",
      "y": 36618,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.11.139",
      "y": 35831,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.12.42",
      "y": 35316,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.10.17",
      "y": 34151,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.10.125",
      "y": 33135,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.10.117",
      "y": 32885,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.11.93",
      "y": 31926,
      "origin": "source",
      "color": "#8fbbda"
    },
    {
      "name": "10.10.12.102",
      "y": 31816,
      "origin": "source",
      "color": "#8fbbda"
    }
  ]
}

Thanks in advance!

Answer 1

i don't think its possible without a custom legends

here is an example (with custom legends)

 var data = [{ "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" }]; Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Banyantmaya out' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, formatter: function () { return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %'; } }, showInLegend: false } }, series: [{ colorByPoint: true, data: data }] }, function(chart) { $legend = $('#customLegend'); var types = chart.series[0].data.reduce((arr, {origin, color}, i) => { var obj = arr.find(o => o.origin === origin); if (obj) obj.indexes.push(i); else arr.push({ origin, color, indexes: [i] }); return arr; }, []); types.forEach(type => { $legend.append('<label class="serieLabel" data-name="' + type.origin + '"><span class="symbol" style="background-color:' + type.color + '"></span><span class="name">' + type.origin + '</span></label>'); }); $('#customLegend .serieLabel').click(function() { var indexes = types.find(t => t.origin === this.dataset.name).indexes; $(this).toggleClass('hide'); indexes.forEach((inx, i) => { var point = chart.series[0].data[inx]; point.setVisible(!point.visible, i === indexes.length - 1); }); }); }); 

 div#customLegend { background-color: #fff; text-align: center; padding-bottom: 20px; } .symbol { width: 12px; height: 12px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; } .name { margin: 0 20px 0 10px; display: inline-block; vertical-align: text-bottom; font-weight: bold; font-size: 14px; } .serieLabel { cursor: pointer; text-transform: capitalize; } .serieLabel.hide { opacity: 0.2; } 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container"></div> <div id="customLegend"></div>