1

I have two pie chart to display in the same chart, I am using angularjs, the two pie chart can displayed without any problems,

I have the same legend for both two chart, but in the chart all legend has been displayed. I followed this question in multiple-pie-charts-in-the-same-chart-with-highcharts but not working in my case.

This is my code:

 var total = $scope.widget.value;

            chartData = [];
            var serie2= [];
            var serie1= [];

            for (var key in $scope.summary['serie1']) {

                serie1.push([key, $scope.summary['serie1'][key]]);
            }
 for (var key in $scope.summary['serie2']) {

                serie2.push([key, $scope.summary['serie2'][key]]);
            }

            chartOptions = {

                series: [{
                    type: 'pie',
                    name: 'serie1,
                    center: [60, 50],
                    size: 60,

                    id: 'serie1',
                    allowPointSelect: true,
                    y: 50,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                       format: '<b>{point.y}</b>',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    showInLegend: true,
                    data: serie1
                },
                    {
                        type: 'pie',
                        name: 'serie2',
                        center: [220, 50],
                        size: 60,

                        dataLabels: {
                            enabled: true,
                           format: '<b>{point.y}</b>',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },

                        data: serie2
                    },
                ],
            }

I ask if there is a possibility to add this code in a plotOptions,

function(chart) {

    $(chart.series[0].data).each(function(i, e) {
        e.legendGroup.on('click', function(event) {
            var legendItem=e.name;

            event.stopPropagation();

            $(chart.series).each(function(j,f){
                   $(this.data).each(function(k,z){
                       if(z.name==legendItem)
                       {
                           if(z.visible)
                           {
                               z.setVisible(false);
                           }
                           else
                           {
                               z.setVisible(true);
                           }
                       }
                   });
            });

        });
    });
});

this is the result of my chart

piechart

Anybody knows a way to achieve this?

Thank you in advance...

beaver
  • 17,333
  • 2
  • 40
  • 66
Majdi Taleb
  • 731
  • 3
  • 9
  • 26

0 Answers0