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 Query
- Drill Down (Highcharts) not working with dynamic data in Angular
- HighCharts angular not working with dynamic data from Angular service
- HighCharts : dynamic data with drill down
- HighCharts with Dynamic Data not working
- Drill Down (Highcharts) not working in Angular 5
- How to structure Angular with Highcharts and lots of dynamic data
- Angular Highcharts dynamic x-axis not working
- Highcharts Line Chart Drill down not working properly
- Highcharts upgrade to 8.1.2 not working with Angular 8
- Angular 9 Highcharts - when using series of type pie with type gauge the innerSize of pie is not working
- Highcharts highstock x axis max/min not working with 3+ data elements
- Using Highcharts with minutes, seconds and milliseconds as Data not working
- Highcharts.SVGRenderer not working properly with Drill Down
- Highcharts navigator not working with data set
- HighCharts Drill down not working
- Angular HighCharts ParlimentChart is not working
- 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
- Highcharts not displaying series data for graph with multiple Y-axes
- Highcharts - update column graph with setData() not working
- AngularJS for Highcharts with dynamic ajax data
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- dynamic highcharts with json data
- HighChart with large amount of data not working
- Highcharts buttons with different menuitems not working
- Highcharts-Angular not working with Angular Universal
- Add different symbols to highcharts chart with dynamic data
- HighCharts Angular - data from API not showing in chart
- Angular Highcharts hideNoData not working dynamically
More Query from same tag
- How To Show All Data Labels For Datetime Axis In Highcharts
- How to have different cursor style for legends in Highcharts?
- Make chart width exclude x axis labels
- Chart with different colour for each cell
- Highcharts - How can I put a 100% fix value in the X axis?
- Colouring of lines in Highchart takes ages
- highchart combine pie and spiderweb
- Highcharts - Parent color in legend
- Highcharts: Column Chart Select State Fill Color
- Highcharts bar: height by xAxis
- highcharts map Zoom by a single click
- highstock charts - button for date range
- highcharts dynamic plotlines
- Changing bar width with pointPadding in Highcharts
- What's the difference between 'legend' and 'showInLegend' in highcharts
- highchart chart redraw method is not refreshing the chart
- Highcharts => Getting the id of a point when clicking on a line chart
- How to draw SVG shapes at a specific position (dependent on the xAxis)
- Show S0-Ticks with Highcharts
- highcharts have data Labels only on some points
- Leaflet use popup not display
- Drawing a dynamic Mixed Bar and Line chart with HIghchart.js with socket.io for live data
- Highcharts displaying improperly labeled data points
- Highcharts Multiseries Gauge with DataLabels at Ends
- HighCharts Render Annotated Queryset in Jinja2 Template
- Highchart export, execute function after completion
- External variable in the title of the chart
- Highcharts yaxis negative values error
- Geojson Incomplete Rendering in JsFiddle for Highmaps Useage
- Highcharts Angular Error 15 despite correctly ordered values