Lightning custom column chart using Highcharts | Aura component 3D custom chart

 

Lightning custom column chart using Highcharts | Aura component 3D custom chart

ColumnChart.apxc

public class ColumnChart {
@AuraEnabled
    public static String getOppJSON(){
        
        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, 1) ;
            }
        }
        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;
        
    }
}

<aura:component controller="ColumnChart" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" 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="Stage"/>
    <aura:attribute name="chartSubTitle" type="string" default="Displaying Opportunity Count by Stage"/>
    <aura:attribute name="yAxisParameter" type="string" default="Count"/>
    <aura:attribute name="data" type="string"/>
    <div class="slds-card">
        <div class="slds-grid slds-wrap slds-grid--pull-padded">
            <div class="slds-col--padded cusdiv">
                <div aura:id="linechart" style="height: 400px"></div>
            </div>
        </div>
    </div>
</aura:component>

ColumnChartController.js

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

ColumnChartHelper.js 

({
    doInit : function(component, event, helper) 
    {
        var action = component.get("c.getOppJSON"); 
        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.Linechart(component,event,helper);
                
            } 
        });
        $A.enqueueAction(action);
    },
 
    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: 'column',
                options3d: {
                    enabled: true,
                    alpha: 5,
                    beta : 25,
                    depth: 50,
                    viewDistance: 25
                }
                
            },
            title: {
                text: component.get("v.chartTitle")
            },
            subtitle: {
                text: component.get("v.chartSubTitle")
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {
                min: 0,
                title: 
                {
                    text: component.get("v.yAxisParameter")
                }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                column: {
            depth: 25
        },
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name:'Count',
                data:dataObj
            }]
            
        });
        
    },
})

OUTPUT:-