Search code examples
javascripthighchartspie-chart

Grouping Legends in Pie Chart with Highcharts

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!

Solution

  • 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>