Puspa
Posts: 4
Joined: Mon Aug 16, 2021 7:30 pm

LegendItemClick not hiding the data point in map

The expected behavior is to hide the particular series of data on click of that series of legend and show the rest. The legend item corresponding to that particular series is clickable but In the map those data points don't get hidden. The options used is shown below

options = {
chart: {
map: worldMap,
type: 'map',
borderWidth: 1,
margin:20,
},
lang: {
thousandsSep: ',',
noData: 'No data to render'
},
credits: {
enabled: false
},
title: {
text: 'No Title Provided'
},
colorAxis:{
dataClasses: [{
from: 1,
to: 49,
name: "1 - 49",
color: '#74777F'
}, {
from: 50,
to: 249,
name: "50 - 249",
color: '#B4E0E1'
}, {
from: 250,
to: 749,
name: "250 - 749",
color: '#7DC3F0'
}, {
from: 750,
to: 1249,
name: "750 - 1,249",
color: '#008297'
}, {
from: 1250,
name: "> 1,250",
color: '#00477B'
}]
},
mapNavigation: {
enabled: true
},
legend:{
layout:'horizontal',
itemDistance: 5,
title:{
text: '',
style:{
font: '12px OpenSans-Regular',
color: '#161616',
fontWeight: 'normal',
backgroundColor: '#fff'
}
},
verticalAlign: 'bottom',
x: -18,
y: 21,
},
series: [{
nullColor: '#f2f2f27f',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}, {
type: 'mappoint',
name: 'US Data',
data: [{name: "Madison, WI", lat: 43.06956, lon: -89.423861, value: 1, color: "#74777F"}
],
stickyTracking: false,
dataLabels: {
enabled: false,
format: '{point.name}'
},
minSize: 5,
maxSize: '7%',
showInLegend: false
}]
};
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: LegendItemClick not hiding the data point in map

Hello Puspa!

Welcome to our forum and thanks for contacting us with your question!

Do you want to hide a country from your map or maybe a point (mappoint)? Could you reproduce this issue in an online editor that I could work on? Please point out where the issue is. :-)

Best regards!
Dominik Chudy
Highcharts Developer
Puspa
Posts: 4
Joined: Mon Aug 16, 2021 7:30 pm

Re: LegendItemClick not hiding the data point in map

Hello Dominik,
Thank you for the reply. The issue has been solved.
But I want to ask is it possible to increase the size of the marker in legend with "view full screen mode". As in full screen The map is larger but legend doesn't increase it size.

Thank you
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: LegendItemClick not hiding the data point in map

Hi again!

I'm glad to hear that.

You can use the update method on the chart or legend and update its width, maxHeigh, symbolWidth or fontSize. By doing that the legend gets bigger.

Example:
https://jsfiddle.net/BlackLabel/uzLcpx5m/

API references:
https://api.highcharts.com/class-refere ... art#update
https://api.highcharts.com/highcharts/6 ... e.fontSize
https://api.highcharts.com/highcharts/6 ... ymbolWidth
https://api.highcharts.com/highcharts/6 ... .maxHeight
https://api.highcharts.com/highcharts/6 ... e.fontSize

Best regards!
Dominik Chudy
Highcharts Developer
Puspa
Posts: 4
Joined: Mon Aug 16, 2021 7:30 pm

Re: LegendItemClick not hiding the data point in map

Hi Dominik,

Thank you for the approach but I am actually using menu provided by highmaps which contains "View in full screen" not a custom button.
This is my complete react code. Can you help me in modifying the below code so that while using "View in full screen" of the contextMenu provided by react I can increase the legend size in full screen mode.

Also, by default when we click on the legend belonging to a particular series, map-points belonging to that series gets hidden and rest of the map-points belonging to other series are visible. But our requirement is only for the legends which are being clicked/selected the map-point should be visible in the map and rest should be invisible. To simplify we want just opposite of the default behaviour.

import React from "react";
import * as Highcharts from 'highcharts';
const worldMap = require("@highcharts/map-collection/custom/world.geo.json");
const usCities = require("./../assets/js/us-zip-code-latitude-and-longitude.geo.json");
worldMap.features = worldMap.features.concat(usCities.features);
let mapData = [[{name: "Madison, WI", lat: 43.06956, lon: -89.423861, value: 1, color: "#74777F"}],[],[],[],[]]
class MapsComponentt extends React.Component {
options = {
chart: {
map: worldMap,
type: "map",
borderWidth: 1,
margin: 20,
backgroundColor: '#fff',
reflow: true,
borderColor: '#fff',
},
lang: {
thousandsSep: ",",
noData: "No data to render",
},
credits: {
enabled: false,
},
title: {
text: "No Title Provided",
},
mapNavigation: {
enabled: true,
},
legend: {
layout: "horizontal",
itemDistance: 5,
title: {
text: "",
style: {
font: "12px OpenSans-Regular",
color: "#161616",
fontWeight: "normal",
backgroundColor: "#fff",
},
},
verticalAlign: "bottom",
x: -10,
y: 15,
},
series: [
{
nullColor: "#f2f2f27f",
states: {
hover: {
color: "#BADA55",
},
},
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: false,
},
{
type: "mappoint",
name: "1 - 49",
data: mapData[0],
stickyTracking: false,
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: true,
marker: {
symbol: "circle",
radius: 5,
lineColor: "#74777F",
fillColor: "#74777F",
},
},
{
type: "mappoint",
name: "50 - 249",
data: mapData[1],
stickyTracking: false,
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: true,
marker: {
symbol: "circle",
radius: 5,
lineColor: "#B4E0E1",
fillColor: "#B4E0E1",
},
},
{
type: "mappoint",
name: "250 - 749",
data: mapData[2],
stickyTracking: false,
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: true,
marker: {
symbol: "circle",
radius: 5,
lineColor: "#7DC3F0",
fillColor: "#7DC3F0",
},
},
{
type: "mappoint",
name: "750 - 1,249",
data: mapData[3],
stickyTracking: false,
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: true,
marker: {
symbol: "circle",
radius: 5,
lineColor: "#008297",
fillColor: "#008297",
},
},
{
type: "mappoint",
name: ">= 1,250",
data: mapData[4],
stickyTracking: false,
dataLabels: {
enabled: false,
format: "{point.name}",
},
showInLegend: true,
marker: {
symbol: "circle",
radius: 5,
lineColor: "#00477B",
fillColor: "#00477B",
},
},
],
exporting: {
buttons: {
contextButton: {
align: 'right',
menuItems: ["viewFullscreen"]
}
}
}

};

componentDidUpdate(){
Highcharts.chart('map',this.options)
}
render(){
return(
<div
id="map"
style={{ marginTop: 10, height: "230px" }}
/>
)
}
}

export const Mapps = MapsComponentt;
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: LegendItemClick not hiding the data point in map

Hi again!

In your code, I've got a problem with usCities module, so if you want to fix your issue in React please reproduce this issue firstly in the online editor.

Besides that, I've prepared a demo in which I replaced the default "View in full screen" button in the context menu with a custom one. Here you've got a demo: https://jsfiddle.net/BlackLabel/q6vo1xyr/

I hope it'll help you to implement this solution in your code. :-)

Best regards!
Dominik Chudy
Highcharts Developer
Puspa
Posts: 4
Joined: Mon Aug 16, 2021 7:30 pm

Re: LegendItemClick not hiding the data point in map

Hi Dominik,
Thanks a lot for the piece of code. :D I am able to implement that in my react code. But after I click on "exit full screen" I need to update those legend size again. So how do I track through the code if I am currently in full screen and update the context menu so that after I click on "exit full screen" the legend size decreases again.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: LegendItemClick not hiding the data point in map

Hello Puspa,

To execute some code before or after some Highcharts function executes (fullscreen close and open), you can use a wrap.

Demo: https://jsfiddle.net/BlackLabel/jtk7buxo/
More about wrapping functions: https://www.highcharts.com/docs/extendi ... -functions

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”