Skip to main content
1 of 4

HighChart in LWC with APEX

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luck. here is my code: import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs"; import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid;

@wire(AccountDataNew,  {accountId : '$recordid'})
AccountData({error,data}){
    if(data){
        this.data=data;
        console.log("++++Data++++",data);
        this.error=undefined;
        this.runHighcharts();
    }
    else if (error) {
        this.error = error;
        this.partnerSpend = undefined;
    }
}

renderedCallback() {
            
    loadScript(this, HIGHCHARTS + "/highcharts.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");
    
    loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");

    loadScript(this, HIGHCHARTS + "/exporting.js")
    .then(() => {
        console.log("SUCCESS: exporting.js");

        loadScript(this, HIGHCHARTS + "/export-data.js")
        .then(() => {
            console.log("SUCCESS: export-data.js");
        //    this.runHighcharts();

        loadScript(this, HIGHCHARTS + "/accessibility.js")
        .then(() => {
            console.log("SUCCESS: accessibility.js");
             this.runHighcharts();
            })
            .catch(error => console.log("ERROR: accessibility.js"));
        })
        .catch(error => console.log("ERROR: export-data.js"));
        
    })
    .catch(error => console.log("ERROR: exporting.js"));
})
.catch(error => console.log("ERROR: highcharts-3d.js"));

})
.catch(error => console.log("ERROR: highcharts.js"));
}

runHighcharts() {
    const containerId = this.template.querySelector('div').id;
    console.log('containerId: ',containerId);
    console.log('data: ',this.data);
    new Highcharts.chart(this.template.querySelector('div'), {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
            title: {
                text: 'Browser market shares in January, 2018'
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth : 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Brands',
                colorByPoint: true,
                data: this.data
            }],
        }

    );
}

}