I tried to put my mapOptions inside a function and then I've got an error
Property 'series' does not exist on type '{ click: () => void; mouseOut: () => void; }'.ts(2339)
I'm using Angular 12
Code: Select all
locationData: any;
mapOptions: any;
ngOnInit() {
this.hotspotViolationLocMap(this.locationData);
}
hotspotViolationLocMap(locationData: any) {
this.mapOptions = {
chart: {
map: PHMap,
animation: true,
backgroundColor: '#d9dde3',
},
mapNavigation: {
enabled: true,
enableDoubleClickZoom: false,
},
title: {
text: '',
},
tooltip: {
enabled: false,
style: {
fontSize: '15px',
},
className: 'customTooltip',
borderRadius: 25,
borderColor: '#81B6F7',
},
credits: { enabled: false },
plotOptions: {
mappoint: {
marker: {
fillColor: '#BF1E06',
lineColor: '#fff',
lineWidth: 1,
},
cursor: 'pointer',
},
map: {},
},
series: [
{
name: 'Map Data',
data: this.data,
type: 'map',
animation: false,
},
{
name: 'Province',
type: 'mappoint',
data: locationData,
point: {
events: {
click: function () {
this.series.chart.update({ // this is where I got the error
chart: {
animation: false,
},
tooltip: {
enabled: true,
pointFormat: `<b>{point.name}</b> <br> <p>Vessel name: { point.lat }</p> <br> <p>Vessel type: Type Here</p> <br> <p>Gross Tonnage: GT Here</p> <br> <p>Net Tonnage: NT Here</p> <br> <br> <p>Respondent: Respondent Here</p> <br> <p>Place of Apprehension: Place Here</p> <br> <p>Date of Apprehension: Date Here</p> <br> <p>Violation: </p> <br>`,
},
});
console.log(this.name);
},
mouseOut: function () {
this.series.chart.update({ // this is where I got the error
chart: {
animation: false,
},
tooltip: {
enabled: false,
},
});
},
},
},
},
],
};
}