atpim
Posts: 5
Joined: Thu Mar 19, 2020 9:31 pm

Correct legend on the map with multiple series

Tue Jun 01, 2021 8:43 am

I created map with multiple series. I have noticed that legend is not being displayed correctly (there is heatmap legend from nowehere, but the series labels are not in the legend at all).
I recreated the issue here:
https://codesandbox.io/s/highcharts-vue ... pChart.vue

Also one more thing I noticed is that when using this series configuartion as data:

Code: Select all

                    series: [
                        {
                            allAreas: true,
                            showInLegend: false,
                        },
                        {
                            name: 'UTC',
                            data: ['IE', 'IS', 'GB', 'PT'].map(function (code) {
                                return {code: code};
                            })
                        }, {
                            name: 'UTC + 1',
                            data: ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
                                'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'].map(function (code) {
                                return {code: code};
                            })
                        }, {
                            name: 'UTC + 2',
                            data: ['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'].map(function (code) {
                                return {code: code};
                            })
                        }, {
                            name: 'UTC + 3',
                            data: [{
                                code: 'RU'
                            }]
                      }]
The other series are being overlayed on the whole map, so when you zoom in and out you can see the colored series are lagging and it is visible that there are two maps overlayed on top of each other. I wonder if there is any fix to this available? Is there a way to color the countries directly on the main map instead of creating overlay colored countries?

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

Re: Correct legend on the map with multiple series

Wed Jun 02, 2021 12:10 pm

Hi,
Thanks for your questions.

This heatmap rectangle is called colorAxis and has no information to display because it hasn't a value to which it can relate.
https://api.highcharts.com/highmaps/colorAxis
https://www.highcharts.com/docs/maps/map-collection

Live demo highcharts map in Vue:
https://codesandbox.io/s/highcharts-vue ... rked-fcef3

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer

atpim
Posts: 5
Joined: Thu Mar 19, 2020 9:31 pm

Re: Correct legend on the map with multiple series

Thu Jun 03, 2021 2:13 pm

Hey thanks for the reply.
I think this is a misunderstanding. I am trying to get rid of this heatmap rectangle and instead have a legend based on the 4 series I included in the chart (UTC, UTC+1...) that are names of the series. But I cant figure out how to do it. Also if its possible for other countries that are not in any of those series above I was thinking about adding another legend item that says "no data" but again I cant find anything in the documentation (but maybe im overlooking something).

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

Re: Correct legend on the map with multiple series

Fri Jun 04, 2021 8:39 am

Hi,
Thanks for the message.

Do you mean disabling the legend? Sorry but I don't get your point.

What shows up after hovering over a given country is a tooltip, do you want to work on it?

You mean the appearance of the tooltip, you need to change tooltp.pointFormat.
https://api.highcharts.com/highmaps/tooltip.pointFormat

Code: Select all

pointFormat: "{point.name}: <b>{series.name}</b>",
Also if it's possible for other countries that are not in any of those series above I was thinking about adding another legend item that says "no data" but again I can't find anything in the documentation

We need to figure out what you want to work on.
You can show me in the code what you are working on now, I will quickly know what's going on, you can comment on what doesn't work and simplify the example for clarity.

Best regards.
Sebastian Hajdus
Highcharts Developer

atpim
Posts: 5
Joined: Thu Mar 19, 2020 9:31 pm

Re: Correct legend on the map with multiple series

Wed Jun 09, 2021 9:01 am

Hey
When you access my example in codesandbox you can see there are countries that are green, blue, orange (they have some colors that I applied to series). So when you see each color you want to know what it represents. Thats why I need to create legend based on those colors that those countries are marked on the map.
For example Poland is green and Russia is blue in my example.
Underneath the map I wanted to have a legend that would explain what green color on Poland means (which would be just series name) and what other colors mean too.
So bascially simple legend.
But using code from documentation it creates some random heatmap legend which explains nothing about the chart.
I hope its more clear now.

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

Re: Correct legend on the map with multiple series

Wed Jun 09, 2021 1:23 pm

Hi,

Ok, now it's clear, you want to create custom legend, I recommend using legend.labelFormatter
https://api.highcharts.com/highmaps/leg ... lFormatter
https://jsfiddle.net/gh/get/library/pur ... formatter/

or you can styling by legend.useHTML.
https://api.highcharts.com/highmaps/legend.useHTML
https://www.highcharts.com/docs/chart-c ... formatting

This heatmap legend is colorAxis and you can set enable to false, also you have a possibility to edit like on this example.
https://jsfiddle.net/gh/get/library/pur ... formatter/

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”