narendrasinghrathore
Posts: 8
Joined: Tue Mar 16, 2021 7:02 am

Documentation for choropleth implementation

Note: We have purchased license already


I am very confused with documentation and actual API implementation.

For e.g
The url for chart https://api.highcharts.com/class-reference/Highcharts mention to pass container as first argument,

Code: Select all

var chart = Highcharts.chart('container', { ... });
But when using you can't, you need to pass in like this

Code: Select all

Highcharts.chart({
      chart: {
        renderTo: 'container',
      },
      title: {
        align: 'left',
        text: 'US DATA',
        verticalAlign: 'middle',
      },
      series: [{ type: 'map', data: [...mapData] }],
    });
 

Can anyone from Highcharts team quickly setup a call or help to implement the choropleth for US counties map?

I am struggling to go through documentation and get a solution .

Framework using: Angular 8 + Typescript

Thanks
Narendra Singh
Clarivate Inc.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Documentation for choropleth implementation

Hi,
Thanks for contacting us with your question!

For more personalized support you can use your LicenseID number.
To ensure your guaranteed 24 hours response time, please make sure you enter your LicenseID number in the subject when opening a ticket in our Support portal or when you send an email to [email protected].
https://www.highcharts.com/blog/support/

Here you will find examples of how to implement a map in angular application.

Demo:
https://stackblitz.com/edit/highcharts-angular-map

Documentation:
https://www.highcharts.com/demo/maps
https://github.com/highcharts/highchart ... harts-Maps

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
narendrasinghrathore
Posts: 8
Joined: Tue Mar 16, 2021 7:02 am

Re: Documentation for choropleth implementation

Still I am not happy with the documentation, it's very difficult to find what you are looking for. And even if you find, 50% chances not able to implement.

For example not able find documentation that help me add/change tile colors of province

Code: Select all

 chart.addSeriesAsDrilldown(e.point, {
                name: e.point.name,
                data: provinceData,
                fillColor: 'red',
                dataLabels: {
                  enabled: true,
                  backgroundColor: 'white',
                  color: 'black',
                } as Highcharts.PlotMapDataLabelsOptions,
                tooltip: {
                  headerFormat: '',
                  pointFormat: '<b>{point.name}</b> [{series.name}]',
                },
              } as Highcharts.SeriesOptionsType);
Getting black color of every tile in drilldown map of US.

Stackblitz demo: https://jvmipnpkg.github.stackblitz.io

Code: https://stackblitz.com/edit/highcharts- ... mponent.ts

Github Repo: https://github.com/narendrasinghrathore ... typescript


:?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Documentation for choropleth implementation

Hi,
Thanks for the detailed information.

You can try to set the color for the zone on the map, adding series.map.color to your case, I created a demo with this (line 50).

If this is your first time dealing with documentation, it is no surprise that you feel confused, there are many options and it is quite extensive.

Live demo:
https://jsfiddle.net/BlackLabel/eokxdbcz/

API References:
https://api.highcharts.com/highmaps/series.map.color

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
narendrasinghrathore
Posts: 8
Joined: Tue Mar 16, 2021 7:02 am

Re: Documentation for choropleth implementation

Code: Select all

 chart.addSeriesAsDrilldown(e.point, {
                name: e.point.name,
                data: provinceData,
                fillColor: 'red',
                // title: 'Som',
                dataLabels: {
                  enabled: true,
                  backgroundColor: '#dedede',
                  color: 'white',
                } as Highcharts.PlotMapDataLabelsOptions,
                tooltip: {
                  headerFormat: '',
                  pointFormat: '<b>{point.name}</b> [{series.name}]',
                },
              } as Highcharts.SeriesOptionsType);

              chart.setTitle(e.point.name, { text: e.point.name });
              
Few implementation need help:

1) Select/un-select counties from US map and also highlight selected one on counties, there can be one or multiple same time ( pre-selected ).
2) Map loaded with pre-selected counties if any.
3) Need to update background color(s) for counties. Can you please share where exactly i update from ?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Documentation for choropleth implementation

Hi,

I have two examples for you of how you can change color at the map for a specific point.

http://jsfiddle.net/BlackLabel/xbfeo716/
https://jsfiddle.net/BlackLabel/euzmj48r/

Let me know how are you doing with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Documentation for choropleth implementation

Thanks for sharing your solution :)

Regards.
Sebastian Hajdus
Highcharts Developer
narendrasinghrathore
Posts: 8
Joined: Tue Mar 16, 2021 7:02 am

Re: Documentation for choropleth implementation

Hi Sebastian,
We are moving forward in direction of purchasing highcharts license, but we have questions before that.

1. Do we have this drilldown feature for USA MAP - Counties - > City - Municipality- Town, Village OR how deep drilldown we can achieve
2. If there is feature request, will it be taken in consideration and how early will it be delivered
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Documentation for choropleth implementation

Hi,
Thanks for the message.

I can't hear about the limit of the module drill down.

Here are topics and example describing what you looking for:
viewtopic.php?f=14&t=44338
viewtopic.php?t=41527#p149268
https://jsfiddle.net/BlackLabel/6r3ds0pw/

Feel free to ask any questions.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”