score:1
Accepted answer
After some hours of struggling found my own question-answer. I'm still learning and improving my attention to detail on my programming problems.
Solution
Let me spoon feed you, so you just copy-paste it and get it done.
Some globally declarations:
Highcharts;
chartConstructor = "mapChart";
chartOptions: Highcharts.Options;
updateFromInput = false;
chart;
chartCallback;
Put the below code snippet in your component constructor
this.chartCallback = chart => {
this.chart = chart;
};
Put below code in ngOnInit()
this.generateMap();
Now the main part:
generateMap() {
const self = this;
self.Highcharts = Highcharts;
const usMapData = require("@highcharts/map-collection/countries/us/us-all.geo.json");
const usMap = Highcharts.geojson(usMapData);
self.chartOptions = {
chart: {
height: (8 / 16) * 100 + "%",
events: {
drilldown: function (e: any) {
setTimeout(() => {
self.methodMap(e.point.splitName);
const mapKey = "countries/us/" + e.point.drilldown + "-all";
const mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`);
const provinceData = Highcharts.geojson(mapData);
self.chart.hideLoading();
self.chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: provinceData,
dataLabels: {
enabled: true,
format: '{point.name}'
}
} as Highcharts.SeriesOptionsType);
self.chart.setTitle(null, { text: e.point.name });
}, 100);
},
drillup() {
self.resetMethod();
}
}
},
title: {
text: ""
},
colorAxis: {
min: 0,
minColor: "#E6E7E8",
maxColor: "#417BCC"
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom"
}
},
plotOptions: {
map: {
states: {
hover: {
color: "#F8BA03"
}
}
}
},
series: [
{
type: "map",
name: "United States",
data: null,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: `{point.splitName}`,
style: {
textTransform: 'uppercase',
}
},
}
],
drilldown: {}
};
self.CurrentVendorService.getAllVendorStates().pipe(
tap(result => {
self.chart.showLoading();
usMap.forEach((el: any, i) => {
el.splitName = el.properties["hc-key"].split('-')[1].toUpperCase();
el.drilldown = el.properties["hc-key"];
const getFirstMatchedVendor = result.data.find(vendorObj => vendorObj.State_Code == el.splitName);
if (getFirstMatchedVendor) {
el.value = getFirstMatchedVendor.Vendor_Count;
}
});
self.chartOptions.series = [
{
type: "map",
data: usMap
}
];
self.updateFromInput = true;
self.chart.hideLoading();
},
(error: any) => {
self.gifLoader = false
self.errorMessage = error.error.message;
self.snackBar.open(self.errorMessage, '', {
duration: 2000,
});
console.log(`error on retriving all vendors state list : ${error}`);
}
),
finalize(() => { })).subscribe();
}
Yes, you will customize the above business logic as per your need. But that's what I want. I've done some modifications in self.chartOptions
object and add setTimeout
.
Cheers!
Source: stackoverflow.com
Related Articles
- Drill Down (Highcharts) not working with dynamic data in Angular
- HighCharts : dynamic data with drill down
- HighCharts angular not working with dynamic data from Angular service
- How to structure Angular with Highcharts and lots of dynamic data
- HighCharts with Dynamic Data not working
- Drill Down (Highcharts) not working in Angular 5
- Highcharts Angular with API data
- Add dynamic data to line chart from mysql database with highcharts
- Highcharts - Global configuration with common code and unique data & Headings
- AngularJS for Highcharts with dynamic ajax data
- dynamic highcharts with json data
- Angular Highcharts dynamic x-axis not working
- Add different symbols to highcharts chart with dynamic data
- dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng
- Highcharts Line Chart Drill down not working properly
- Using yii with dynamic data and highcharts
- I am using click event to trigger a new page to generate the drill down data from highcharts however the entire chart is being generated
- Highcharts Sparkline chart with dynamic data for table -Angular js
- Highcharts series visibility with csv data source
- Highcharts column with drilldown results in blurred data label in main chart, except for the drilled down columns
- Highcharts upgrade to 8.1.2 not working with Angular 8
- How to have multiple highcharts with different series data in vuejs without repeating code
- Dynamic column based highcharts feeding data with jquery and php
- Static Highcharts graphic with external csv data and dynamic footnote
- Static Highcharts graphic with csv data and dynamic footnote
- Angular 9 Highcharts - when using series of type pie with type gauge the innerSize of pie is not working
- Display data from CSV in Highcharts with Angular
- Highcharts cloud issue with data source when duplicating chart
- Highcharts highstock x axis max/min not working with 3+ data elements
- Dynamic chart using Highcharts with data from MySQL database
- Prepare my data for HighStocks data series input
- Angular highchart and ng-grid headers not respecting frame widths
- Highcharts' verifying stacking issues
- highcharts sum up tooltip {point.y} with a specific number
- Parsing Data From HTML Table
- multiple series in Highcharter R stacked barchart
- Viewing IP in highcharts
- Use HTML class as Highcharts table data source
- How to get the angular component class reference inside an emitted Highcharts selection event callback function?
- How to make highcharts boxplot with drilldown?
- Highcharts - Custom format for dateTimeLabelFormats (1st hour, 2nd hour....)
- yii highcharts how to set date format in x-axis
- Highcharts.js variable pie chart not rendering data correctly along percentage dataLabels
- Populating highchart line with array of objects
- Highcharts data label vertical alignment - bug
- Highlight a region in scatter plot using Highcharts
- Disable tooltip on certain points in Highcharts
- Where can I find the type definition of the Highcharts.AnnotationsOptions type?
- On click of a button, render all pie's of pie chart in highcharts in a different div
- How to place dataLabels on series point in Highcharts