Hi All,

I want to create pi chart componant in parent component to show opportunity stage count but pi chart component nit visble in lightning page plz help.

here is code

public class OppPieChartController {
    
@AuraEnabled
    public static String getOpportunityJSON(){
 
       List<opportunity> lstopp = [SELECT Id, stagename FROM opportunity ];
        Map<String,Integer> mapLeadSource = new Map<String,Integer>();
 
        for(opportunity l : lstopp)
        {
            if(mapLeadSource.containsKey(l.stagename))
            {
                mapLeadSource.put(l.stagename, mapLeadSource.get(l.stagename)+1) ;
            }else{
                mapLeadSource.put(l.stagename, 0) ;
            }
        }
        system.debug('map values--'+mapLeadSource);
        list<RadarDataWrapper> radarData = new list<RadarDataWrapper>();
 
        for(String key : mapLeadSource.keySet())
        {
           RadarDataWrapper rdw = new RadarDataWrapper();
            rdw.name=key;
            rdw.y=mapLeadSource.get(key);
            radarData.add(rdw);
        }
        system.debug('rdw---'+radarData);
        return System.json.serialize(radarData);
        //return null;
    }
 
    /**
* Wrapper class to serialize as JSON as return Value
     * */
    class RadarDataWrapper
    {
       @AuraEnabled
       public String name;
       @AuraEnabled
       public integer y;
 
    }
 
}

// component

<aura:component controller="OppPieChartController" implements="force:appHostable,
                                                               flexipage:availableForAllPageTypes,
                                                               flexipage:availableForRecordHome,force:hasRecordId,
                                                               forceCommunity:availableForAllPageTypes,
                                                               force:lightningQuickAction" access="global" >
    
    
   <ltng:require scripts="{!join(',',$Resource.Highcharts,
                           $Resource.highchart3d,
                           $Resource.Highchartsexport
                           )}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    
  
    <aura:attribute name="chartType" type="string"/>
    <aura:attribute name="chartTitle" type="string" default="Opportunity by StageName"/>
    <aura:attribute name="chartSubTitle" type="string" default="Display Opportunity Count by StageName"/>
    <aura:attribute name="xAxisCategories" type="string[]" default="['Qualification','Negotiation/Review','Closed Won','Id. Decision Makers','Proposal/Price Quote','Proposition','Prospecting','Perception Analysis','Needs Analysis']"/>
    <aura:attribute name="yAxisParameter" type="string" default="No. of Opportunity"/>
    <aura:attribute name="data" type="string"/>
    
    
    
    <div class="slds-card">
        <br/>
        <center><b><h1 class="slds-page-header__title slds-truncate slds-align-middle">
            Graphical Representaion of Opportunity Vs StageName</h1></b></center>
        <br/>
        <div class="slds-grid slds-wrap slds-grid--pull-padded">
            <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
                <div aura:id="chart" style="height: 400px"></div>
            </div>
            <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
                <div aura:id="linechart" style="height: 400px"></div>
            </div>
            <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
                <div aura:id="donutchart" style="height: 400px"></div>
            </div>
        </div>
    </div>
</aura:component>

// JS File
 

({
    afterScriptsLoaded : function(component, event, helper)
    {
        helper.doInit(component,event,helper);
    }    
 
})

//Helper

({
    doInit : function(component, event, helper)
    {
        var action = component.get("c.getOpportunityJSON");
        action.setCallback(this, function(response) {
            var state = response.getState();
            //alert(state);
            if (state === "SUCCESS") {
                var dataObj= response.getReturnValue();
                //jsonData = dataObj;
                console.log('===='+dataObj);
                component.set("v.data",dataObj);
                helper.piechart(component,event,helper);
                helper.Linechart(component,event,helper);
                helper.donutchart(component,event,helper);
            }
        });
        $A.enqueueAction(action);
    },
    piechart : function(component,event,helper) {
        var jsonData = component.get("v.data");
        var dataObj = JSON.parse(jsonData);
 
        new Highcharts.Chart({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                renderTo: component.find("chart").getElement(),
                type: 'pie'
            },
            title: {
                text: component.get("v.chartTitle")+' (Pie Chart)'
            },
subtitle: {
                text: component.get("v.chartSubTitle")
            },
            xAxis: {
                categories: component.get("v.xAxisCategories"),
                crosshair: true
            },
            yAxis: {
                min: 0,
                title:
                {
                    text: component.get("v.yAxisParameter")
                }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.y} ',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name:'StageName',
                data:dataObj
            }]
 });
 
    },
 
    Linechart : function(component,event,helper) {
        var jsonData = component.get("v.data");
        var dataObj = JSON.parse(jsonData);
 
        new Highcharts.Chart({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                renderTo: component.find("linechart").getElement(),
                type: 'line'
            },
            title: {
                text: component.get("v.chartTitle")+' (Line Chart)'
            },
            subtitle: {
                text: component.get("v.chartSubTitle")
            },
            xAxis: {
                categories: component.get("v.xAxisCategories"),
                crosshair: true
            },
            yAxis: {
                min: 0,
                title:
                {
                    text: component.get("v.yAxisParameter")
                }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name:'StageName',
                data:dataObj
            }]
 
        });
 
    },
    donutchart : function(component,event,helper) {
        var jsonData = component.get("v.data");
        var dataObj = JSON.parse(jsonData);
 
        new Highcharts.Chart({
            chart: {
                renderTo: component.find("donutchart").getElement(),
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            },
            title: {
                text: component.get("v.chartTitle")+' (Donut Chart)'
            },
            subtitle: {
                text: component.get("v.chartSubTitle")
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            },
            series: [{
                type: 'pie',
                name:'StageName',
                data:dataObj
            }]
 
        });
 
    }
})

​​​​​​​