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
}],
}
);
}
}