Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Map Chart Export

Hi Team,

I am trying to export Map chart using HighChart Export API with this chart options, but I am only getting blank image with legend and Title. Please find the attached zip file for Json Stringifyed chart Options.

I am trying to test this chart Options in JsFiddle, but that page is getting hang as the chart Options are quite large as it is the map chart of the world.
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Map Chart Export

Hi,

Thanks for the question!

I can't see the attached .zip file, but please try to reproduce it in JSFiddle if possible - we only need a minimal reproducible example and then we will be able to investigate your problem quicker.

You don't need to provide your entire config - just the one that will enable us to see the problem.

I'll be waiting for your response.

Best regards!
Jakub
Highcharts Developer
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Hi Team

Sorry for late response

For the map chart in map i am passing the url for the world map json file. I am passing this to export API chart Options. Is their any other way to fetch the map chart please help.

Code: Select all

{
    "colors": [
        "#7cb5ec",
        "#434348",
        "#90ed7d",
        "#f7a35c",
        "#8085e9",
        "#f15c80",
        "#e4d354",
        "#2b908f",
        "#f45b5b",
        "#91e8e1"
    ],
    "chart": {
        "alignThresholds": false,
        "panning": {
            "enabled": true,
            "type": "xy"
        },
        "styledMode": false,
        "borderRadius": 0,
        "colorCount": 10,
        "defaultSeriesType": "line",
        "ignoreHiddenSeries": true,
        "spacing": [
            10,
            10,
            15,
            10
        ],
        "resetZoomButton": {
            "theme": {
                "zIndex": 6
            },
            "position": {
                "align": "right",
                "x": -10,
                "y": 10
            }
        },
        "zoomBySingleTouch": false,
        "width": null,
        "height": null,
        "borderColor": "#335cad",
        "backgroundColor": "#ffffff",
        "plotBorderColor": "#cccccc",
        "type": "map",
        "map": "https://code.highcharts.com/mapdata/custom/world.topo.json"
    },
    "title": {
        "style": {
            "color": "#333333",
            "fontSize": "18px",
            "fill": "#333333",
            "width": "1400px"
        },
        "text": "Spend (USD) by Region",
        "align": "left",
        "margin": 15,
        "widthAdjust": -44
    },
    "subtitle": {
        "style": {
            "color": "#666666",
            "fill": "#666666",
            "width": "1400px"
        },
        "text": "",
        "align": "center",
        "widthAdjust": -44
    },
    "caption": {
        "style": {
            "color": "#666666",
            "fill": "#666666",
            "width": "1444px"
        },
        "margin": 15,
        "text": "",
        "align": "left",
        "verticalAlign": "bottom"
    },
    "plotOptions": {
        "polygon": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": "#ffffff",
                "lineWidth": 0,
                "radius": 4,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": false,
                        "radiusPlus": 2,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": false
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "bottom",
                "x": 0,
                "y": 0
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 10,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": false,
            "turboThreshold": 1000,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "trackByArea": true
        },
        "map": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": false,
            "events": {},
            "marker": null,
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 0,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "crop": false,
                "inside": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": null,
                    "brightness": 0.2
                },
                "select": {
                    "animation": {
                        "duration": 0
                    },
                    "color": "#cccccc"
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 1
                }
            },
            "stickyTracking": false,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "affectsMapView": true,
            "nullColor": "#f7f7f7",
            "allAreas": true,
            "borderColor": "#cccccc",
            "borderWidth": 1,
            "joinBy": "hc-key"
        },
        "mapline": {
            "lineWidth": 1,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": false,
            "events": {},
            "marker": null,
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 0,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "crop": false,
                "inside": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": null,
                    "brightness": 0.2
                },
                "select": {
                    "animation": {
                        "duration": 0
                    },
                    "color": "#cccccc"
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 1
                }
            },
            "stickyTracking": false,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "affectsMapView": true,
            "nullColor": "#f7f7f7",
            "allAreas": true,
            "borderColor": "#cccccc",
            "borderWidth": 1,
            "joinBy": "hc-key",
            "fillColor": "none"
        },
        "mappoint": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": "#ffffff",
                "lineWidth": 0,
                "radius": 4,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": true,
                        "radiusPlus": 2,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": true
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": false,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "#000000",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "bottom",
                "x": 0,
                "y": 0,
                "crop": false,
                "enabled": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 10,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": true,
            "turboThreshold": 1000,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            }
        },
        "mapbubble": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": null,
                "lineWidth": 1,
                "radius": null,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": true,
                        "radiusPlus": 0,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": true,
                "fillOpacity": 0.5,
                "symbol": "circle"
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "inside": true
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": false,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 5,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": true,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "animationLimit": 500,
            "minSize": 8,
            "maxSize": "20%",
            "zThreshold": 0,
            "zoneAxis": "z",
            "joinBy": "hc-key"
        }
    },
    "labels": {
        "style": {
            "position": "absolute",
            "color": "#333333"
        }
    },
    "legend": {
        "enabled": true,
        "align": "center",
        "alignColumns": true,
        "className": "highcharts-no-tooltip",
        "layout": "horizontal",
        "borderColor": "#999999",
        "borderRadius": 0,
        "navigation": {
            "activeColor": "#003399",
            "inactiveColor": "#cccccc"
        },
        "itemStyle": {
            "color": "#333333",
            "cursor": "pointer",
            "fontSize": "12px",
            "fontWeight": "bold",
            "textOverflow": "ellipsis"
        },
        "itemHoverStyle": {
            "color": "#000000"
        },
        "itemHiddenStyle": {
            "color": "#cccccc"
        },
        "shadow": false,
        "itemCheckboxStyle": {
            "position": "absolute",
            "width": "13px",
            "height": "13px"
        },
        "squareSymbol": true,
        "symbolPadding": 5,
        "verticalAlign": "bottom",
        "x": 0,
        "y": 0,
        "title": {
            "style": {
                "fontWeight": "bold"
            }
        },
        "bubbleLegend": {
            "borderWidth": 2,
            "connectorDistance": 60,
            "connectorWidth": 1,
            "enabled": false,
            "labels": {
                "allowOverlap": false,
                "format": "",
                "align": "right",
                "style": {
                    "fontSize": "10px",
                    "color": "#000000"
                },
                "x": 0,
                "y": 0
            },
            "maxSize": 60,
            "minSize": 10,
            "legendIndex": 0,
            "ranges": {},
            "sizeBy": "area",
            "sizeByAbsoluteValue": false,
            "zIndex": 1,
            "zThreshold": 0
        },
        "accessibility": {
            "enabled": true,
            "keyboardNavigation": {
                "enabled": true
            }
        }
    },
    "loading": {
        "labelStyle": {
            "fontWeight": "bold",
            "position": "relative",
            "top": "45%"
        },
        "style": {
            "position": "absolute",
            "backgroundColor": "#ffffff",
            "opacity": 0.5,
            "textAlign": "center"
        }
    },
    "tooltip": {
        "enabled": true,
        "animation": true,
        "borderRadius": 3,
        "dateTimeLabelFormats": {
            "millisecond": "%A, %b %e, %H:%M:%S.%L",
            "second": "%A, %b %e, %H:%M:%S",
            "minute": "%A, %b %e, %H:%M",
            "hour": "%A, %b %e, %H:%M",
            "day": "%A, %b %e, %Y",
            "week": "Week from %A, %b %e, %Y",
            "month": "%B %Y",
            "year": "%Y"
        },
        "footerFormat": "",
        "headerShape": "callout",
        "hideDelay": 500,
        "padding": 8,
        "shape": "callout",
        "shared": false,
        "snap": 10,
        "headerFormat": "<span style=\"font-size: 10px\">{point.key}</span><br/>",
        "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y}</b><br/>",
        "backgroundColor": "rgba(247,247,247,0.85)",
        "borderWidth": 1,
        "shadow": true,
        "stickOnContact": false,
        "style": {
            "color": "#333333",
            "cursor": "default",
            "fontSize": "12px",
            "whiteSpace": "nowrap"
        },
        "useHTML": false,
        "followTouchMove": false,
        "userOptions": {
            "followTouchMove": false,
            "enabled": true
        }
    },
    "credits": {
        "enabled": false,
        "href": null,
        "position": {
            "align": "right",
            "x": -10,
            "verticalAlign": "bottom",
            "y": -5
        },
        "style": {
            "cursor": "pointer",
            "color": "#999999",
            "fontSize": "9px"
        },
        "text": "Highcharts.com",
        "mapText": " © <a href=\"{geojson.copyrightUrl}\">{geojson.copyrightShort}</a>",
        "mapTextFull": "{geojson.copyright}"
    },
    "drilldown": {
        "activeAxisLabelStyle": {
            "cursor": "pointer",
            "color": "#003399",
            "fontWeight": "bold",
            "textDecoration": "underline"
        },
        "activeDataLabelStyle": {
            "cursor": "pointer",
            "color": "#FFFFFF",
            "fontWeight": "bold",
            "textDecoration": "none",
            "textOutline": "1px #000000"
        },
        "animation": {
            "duration": 500
        },
        "drillUpButton": {
            "position": {
                "align": "right",
                "x": -10,
                "y": 10
            }
        }
    },
    "mapNavigation": {
        "buttonOptions": {
            "alignTo": "spacingBox",
            "align": "left",
            "verticalAlign": "bottom",
            "x": 0,
            "width": 18,
            "height": 18,
            "padding": 5,
            "style": {
                "fontSize": "15px",
                "fontWeight": "bold"
            },
            "theme": {
                "stroke-width": 1,
                "text-align": "center"
            }
        },
        "buttons": {
            "zoomIn": {
                "text": "+",
                "y": 0
            },
            "zoomOut": {
                "text": "-",
                "y": 28
            }
        },
        "mouseWheelSensitivity": 1.1,
        "enabled": true
    },
    "exporting": {
        "type": "image/png",
        "url": "https://export.highcharts.com/",
        "pdfFont": {},
        "printMaxWidth": 780,
        "scale": 2,
        "buttons": {
            "contextButton": {
                "className": "highcharts-contextbutton",
                "menuClassName": "highcharts-contextmenu",
                "symbol": "menu",
                "titleKey": "contextButtonTitle",
                "menuItems": [
                    "viewFullscreen",
                    "printChart",
                    "separator",
                    "downloadPNG",
                    "downloadJPEG",
                    "downloadPDF",
                    "downloadSVG"
                ]
            }
        },
        "menuItemDefinitions": {
            "viewFullscreen": {
                "textKey": "viewFullscreen"
            },
            "printChart": {
                "textKey": "printChart"
            },
            "separator": {
                "separator": true
            },
            "downloadPNG": {
                "textKey": "downloadPNG"
            },
            "downloadJPEG": {
                "textKey": "downloadJPEG"
            },
            "downloadPDF": {
                "textKey": "downloadPDF"
            },
            "downloadSVG": {
                "textKey": "downloadSVG"
            }
        },
        "libURL": "https://code.highcharts.com/10.0.0/lib/",
        "accessibility": {
            "enabled": true
        },
        "enabled": false
    },
    "navigation": {
        "buttonOptions": {
            "symbolSize": 14,
            "symbolX": 12.5,
            "symbolY": 10.5,
            "align": "right",
            "buttonSpacing": 3,
            "height": 22,
            "verticalAlign": "top",
            "width": 24,
            "symbolFill": "#666666",
            "symbolStroke": "#666666",
            "symbolStrokeWidth": 3,
            "theme": {
                "padding": 5
            }
        },
        "menuStyle": {
            "border": "1px solid #999999",
            "background": "#ffffff",
            "padding": "5px 0"
        },
        "menuItemStyle": {
            "padding": "0.5em 1em",
            "color": "#333333",
            "background": "none",
            "fontSize": "11px",
            "transition": "background 250ms, color 250ms"
        },
        "menuItemHoverStyle": {
            "background": "#335cad",
            "color": "#ffffff"
        }
    },
    "mapView": {},
    "colorAxis": [
        {
            "min": 0,
            "stops": [
                [
                    0,
                    "#EFEFFF"
                ],
                [
                    0.5,
                    "#EFEFFF"
                ]
            ],
            "index": 0
        }
    ],
    "series": [
        {
            "name": "Spend (USD)",
            "type": "map",
            "mapData":"https://code.highcharts.com/mapdata/custom/world.topo.json",
            "joinBy": [
                "hc-key",
                "hc-key"
            ],
            "states": {
                "hover": {
                    "enabled": true,
                    "fillColor": "#9c9a9a"
                }
            },
            "color": "#417BCC",
            "dataLabels": {
                "enabled": false
            },
            "allAreas": true,
            "data": [
                { "hc-key": "us", "value": 328.2 }, 
                { "hc-key": "ca", "value": 37.6 } 
               
            ],
            "events": {},
            "tooltip": {
                "headerFormat": "<span class=\"fontSize10\"><span class=\"fontSize10\">{point.key}<br/></span></span><br/>",
                "footerFormat": "</table>",
                "shared": true,
                "useHTML": true,
                "format": "configFormat",
                "formatKey": "",
                "currenyBeforeAmount": true
            }
        }
    ],
    "yAxis": [
        {
            "visible": false,
            "index": 0
        }
    ],
    "xAxis": [
        {
            "visible": false,
            "index": 0,
            "isX": true
        }
    ],
    "pane": [
        null
    ]
}
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Map Chart Export

Hi,

Thanks for sharing the config!

Do I understand correctly that you're using this config on our https://export.highcharts.com/ page? If yes, this will not work because the mapData is an external resource which is by default blocked on our Export Server.

If you'd like it to work, you can set up your own Export Server (https://github.com/highcharts/node-export-server) and allowExternalResources.

If that's not the case and you experience this problem from our exporting module, please try to reproduce this issue in JSFiddle so I could investigate this further.

Best regards!
Jakub
Highcharts Developer
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Hi Jakub,

Please find the chart Configuration that is working for Jsfiddle for map chart.
For the Export API, I have seperately called https://code.highcharts.com/mapdata/cus ... .topo.json API and populate it's Json response to chart.map and series.mapData.

When I export the chart I am getting 200 OK response but the image only have the legend of the map chart while the chart itself is absent.

Code: Select all

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/custom/world.topo.json'
    ).then(response => response.json());

    Highcharts.mapChart('container', {
        chart: {
        "alignThresholds": false,
        "panning": {
            "enabled": true,
            "type": "xy"
        },
        "styledMode": false,
        "borderRadius": 0,
        "colorCount": 10,
        "defaultSeriesType": "line",
        "ignoreHiddenSeries": true,
        "spacing": [
            10,
            10,
            15,
            10
        ],
        "resetZoomButton": {
            "theme": {
                "zIndex": 6
            },
            "position": {
                "align": "right",
                "x": -10,
                "y": 10
            }
        },
        "zoomBySingleTouch": false,
        "width": null,
        "height": null,
        "borderColor": "#335cad",
        "backgroundColor": "#ffffff",
        "plotBorderColor": "#cccccc",
        "type": "map",
            map: topology
        },

        "title": {
        "style": {
            "color": "#333333",
            "fontSize": "18px",
            "fill": "#333333",
            "width": "1400px"
        },
        "text": "Spend (USD) by Region",
        "align": "left",
        "margin": 15,
        "widthAdjust": -44
    },
    "subtitle": {
        "style": {
            "color": "#666666",
            "fill": "#666666",
            "width": "1400px"
        },
        "text": "",
        "align": "center",
        "widthAdjust": -44
    },
		 "caption": {
        "style": {
            "color": "#666666",
            "fill": "#666666",
            "width": "1444px"
        },
        "margin": 15,
        "text": "",
        "align": "left",
        "verticalAlign": "bottom"
    },
    "plotOptions": {
        "polygon": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": "#ffffff",
                "lineWidth": 0,
                "radius": 4,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": false,
                        "radiusPlus": 2,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": false
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "bottom",
                "x": 0,
                "y": 0
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 10,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": false,
            "turboThreshold": 1000,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "trackByArea": true
        },
        "map": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": false,
            "events": {},
            "marker": null,
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 0,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "crop": false,
                "inside": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": null,
                    "brightness": 0.2
                },
                "select": {
                    "animation": {
                        "duration": 0
                    },
                    "color": "#cccccc"
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 1
                }
            },
            "stickyTracking": false,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "affectsMapView": true,
            "nullColor": "#f7f7f7",
            "allAreas": true,
            "borderColor": "#cccccc",
            "borderWidth": 1,
            "joinBy": "hc-key"
        },
        "mapline": {
            "lineWidth": 1,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": false,
            "events": {},
            "marker": null,
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 0,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "crop": false,
                "inside": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": null,
                    "brightness": 0.2
                },
                "select": {
                    "animation": {
                        "duration": 0
                    },
                    "color": "#cccccc"
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 1
                }
            },
            "stickyTracking": false,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "affectsMapView": true,
            "nullColor": "#f7f7f7",
            "allAreas": true,
            "borderColor": "#cccccc",
            "borderWidth": 1,
            "joinBy": "hc-key",
            "fillColor": "none"
        },
        "mappoint": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": "#ffffff",
                "lineWidth": 0,
                "radius": 4,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": true,
                        "radiusPlus": 2,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": true
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": false,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "#000000",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "bottom",
                "x": 0,
                "y": 0,
                "crop": false,
                "enabled": true,
                "overflow": false
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": true,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 10,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": true,
            "turboThreshold": 1000,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            }
        },
        "mapbubble": {
            "lineWidth": 0,
            "allowPointSelect": false,
            "crisp": true,
            "showCheckbox": false,
            "animation": {
                "duration": 1000
            },
            "events": {},
            "marker": {
                "enabledThreshold": 2,
                "lineColor": null,
                "lineWidth": 1,
                "radius": null,
                "states": {
                    "normal": {
                        "animation": true
                    },
                    "hover": {
                        "animation": {
                            "duration": 50
                        },
                        "enabled": true,
                        "radiusPlus": 0,
                        "lineWidthPlus": 1
                    },
                    "select": {
                        "fillColor": "#cccccc",
                        "lineColor": "#000000",
                        "lineWidth": 2
                    }
                },
                "enabled": true,
                "fillOpacity": 0.5,
                "symbol": "circle"
            },
            "point": {
                "events": {}
            },
            "dataLabels": {
                "animation": {},
                "align": "center",
                "defer": true,
                "padding": 5,
                "style": {
                    "fontSize": "11px",
                    "fontWeight": "bold",
                    "color": "contrast",
                    "textOutline": "1px contrast"
                },
                "verticalAlign": "middle",
                "x": 0,
                "y": 0,
                "inside": true
            },
            "cropThreshold": 300,
            "opacity": 1,
            "pointRange": 0,
            "softThreshold": false,
            "states": {
                "normal": {
                    "animation": true
                },
                "hover": {
                    "animation": {
                        "duration": 50
                    },
                    "lineWidthPlus": 1,
                    "marker": {},
                    "halo": {
                        "size": 5,
                        "opacity": 0.25
                    }
                },
                "select": {
                    "animation": {
                        "duration": 0
                    }
                },
                "inactive": {
                    "animation": {
                        "duration": 50
                    },
                    "opacity": 0.2
                }
            },
            "stickyTracking": true,
            "turboThreshold": 0,
            "findNearestPointBy": "xy",
            "jitter": {
                "x": 0,
                "y": 0
            },
            "animationLimit": 500,
            "minSize": 8,
            "maxSize": "20%",
            "zThreshold": 0,
            "zoneAxis": "z",
            "joinBy": "hc-key"
        }
    },
    "labels": {
        "style": {
            "position": "absolute",
            "color": "#333333"
        }
    },
    "legend": {
        "enabled": true,
        "align": "center",
        "alignColumns": true,
        "className": "highcharts-no-tooltip",
        "layout": "horizontal",
        "borderColor": "#999999",
        "borderRadius": 0,
        "navigation": {
            "activeColor": "#003399",
            "inactiveColor": "#cccccc"
        },
        "itemStyle": {
            "color": "#333333",
            "cursor": "pointer",
            "fontSize": "12px",
            "fontWeight": "bold",
            "textOverflow": "ellipsis"
        },
        "itemHoverStyle": {
            "color": "#000000"
        },
        "itemHiddenStyle": {
            "color": "#cccccc"
        },
        "shadow": false,
        "itemCheckboxStyle": {
            "position": "absolute",
            "width": "13px",
            "height": "13px"
        },
        "squareSymbol": true,
        "symbolPadding": 5,
        "verticalAlign": "bottom",
        "x": 0,
        "y": 0,
        "title": {
            "style": {
                "fontWeight": "bold"
            }
        },
        "bubbleLegend": {
            "borderWidth": 2,
            "connectorDistance": 60,
            "connectorWidth": 1,
            "enabled": false,
            "labels": {
                "allowOverlap": false,
                "format": "",
                "align": "right",
                "style": {
                    "fontSize": "10px",
                    "color": "#000000"
                },
                "x": 0,
                "y": 0
            },
            "maxSize": 60,
            "minSize": 10,
            "legendIndex": 0,
            "ranges": {},
            "sizeBy": "area",
            "sizeByAbsoluteValue": false,
            "zIndex": 1,
            "zThreshold": 0
        },
        "accessibility": {
            "enabled": true,
            "keyboardNavigation": {
                "enabled": true
            }
        }
    },
    "loading": {
        "labelStyle": {
            "fontWeight": "bold",
            "position": "relative",
            "top": "45%"
        },
        "style": {
            "position": "absolute",
            "backgroundColor": "#ffffff",
            "opacity": 0.5,
            "textAlign": "center"
        }
    },
    "tooltip": {
        "enabled": true,
        "animation": true,
        "borderRadius": 3,
        "dateTimeLabelFormats": {
            "millisecond": "%A, %b %e, %H:%M:%S.%L",
            "second": "%A, %b %e, %H:%M:%S",
            "minute": "%A, %b %e, %H:%M",
            "hour": "%A, %b %e, %H:%M",
            "day": "%A, %b %e, %Y",
            "week": "Week from %A, %b %e, %Y",
            "month": "%B %Y",
            "year": "%Y"
        },
        "footerFormat": "",
        "headerShape": "callout",
        "hideDelay": 500,
        "padding": 8,
        "shape": "callout",
        "shared": false,
        "snap": 10,
        "headerFormat": "<span style=\"font-size: 10px\">{point.key}</span><br/>",
        "pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y}</b><br/>",
        "backgroundColor": "rgba(247,247,247,0.85)",
        "borderWidth": 1,
        "shadow": true,
        "stickOnContact": false,
        "style": {
            "color": "#333333",
            "cursor": "default",
            "fontSize": "12px",
            "whiteSpace": "nowrap"
        },
        "useHTML": false,
        "followTouchMove": false,
        "userOptions": {
            "followTouchMove": false,
            "enabled": true
        }
    },
    "credits": {
        "enabled": false,
        "href": null,
        "position": {
            "align": "right",
            "x": -10,
            "verticalAlign": "bottom",
            "y": -5
        },
        "style": {
            "cursor": "pointer",
            "color": "#999999",
            "fontSize": "9px"
        },
        "text": "Highcharts.com",
        "mapText": " © <a href=\"{geojson.copyrightUrl}\">{geojson.copyrightShort}</a>",
        "mapTextFull": "{geojson.copyright}"
    },
    "drilldown": {
        "activeAxisLabelStyle": {
            "cursor": "pointer",
            "color": "#003399",
            "fontWeight": "bold",
            "textDecoration": "underline"
        },
        "activeDataLabelStyle": {
            "cursor": "pointer",
            "color": "#FFFFFF",
            "fontWeight": "bold",
            "textDecoration": "none",
            "textOutline": "1px #000000"
        },
        "animation": {
            "duration": 500
        },
        "drillUpButton": {
            "position": {
                "align": "right",
                "x": -10,
                "y": 10
            }
        }
    },
    "mapNavigation": {
        "buttonOptions": {
            "alignTo": "spacingBox",
            "align": "left",
            "verticalAlign": "bottom",
            "x": 0,
            "width": 18,
            "height": 18,
            "padding": 5,
            "style": {
                "fontSize": "15px",
                "fontWeight": "bold"
            },
            "theme": {
                "stroke-width": 1,
                "text-align": "center"
            }
        },
        "buttons": {
            "zoomIn": {
                "text": "+",
                "y": 0
            },
            "zoomOut": {
                "text": "-",
                "y": 28
            }
        },
        "mouseWheelSensitivity": 1.1,
        "enabled": true
    },
    "exporting": {
        "type": "image/png",
        "url": "https://export.highcharts.com/",
        "pdfFont": {},
        "printMaxWidth": 780,
        "scale": 2,
        "buttons": {
            "contextButton": {
                "className": "highcharts-contextbutton",
                "menuClassName": "highcharts-contextmenu",
                "symbol": "menu",
                "titleKey": "contextButtonTitle",
                "menuItems": [
                    "viewFullscreen",
                    "printChart",
                    "separator",
                    "downloadPNG",
                    "downloadJPEG",
                    "downloadPDF",
                    "downloadSVG"
                ]
            }
        },
        "menuItemDefinitions": {
            "viewFullscreen": {
                "textKey": "viewFullscreen"
            },
            "printChart": {
                "textKey": "printChart"
            },
            "separator": {
                "separator": true
            },
            "downloadPNG": {
                "textKey": "downloadPNG"
            },
            "downloadJPEG": {
                "textKey": "downloadJPEG"
            },
            "downloadPDF": {
                "textKey": "downloadPDF"
            },
            "downloadSVG": {
                "textKey": "downloadSVG"
            }
        },
        "libURL": "https://code.highcharts.com/10.0.0/lib/",
        "accessibility": {
            "enabled": true
        },
        "enabled": false
    },

        "navigation": {
        "buttonOptions": {
            "symbolSize": 14,
            "symbolX": 12.5,
            "symbolY": 10.5,
            "align": "right",
            "buttonSpacing": 3,
            "height": 22,
            "verticalAlign": "top",
            "width": 24,
            "symbolFill": "#666666",
            "symbolStroke": "#666666",
            "symbolStrokeWidth": 3,
            "theme": {
                "padding": 5
            }
        },
        "menuStyle": {
            "border": "1px solid #999999",
            "background": "#ffffff",
            "padding": "5px 0"
        },
        "menuItemStyle": {
            "padding": "0.5em 1em",
            "color": "#333333",
            "background": "none",
            "fontSize": "11px",
            "transition": "background 250ms, color 250ms"
        },
        "menuItemHoverStyle": {
            "background": "#335cad",
            "color": "#ffffff"
        }
    },
    "mapView": {},
    "colorAxis": [
        {
            "min": 0,
            "stops": [
                [
                    0,
                    "#EFEFFF"
                ],
                [
                    0.5,
                    "#EFEFFF"
                ]
            ],
            "index": 0
        }
    ],
		
         "series": [
        {
            "name": "Spend (USD)",
            "type": "map",
            "mapData":topology,
            "joinBy": [
                "hc-key",
                "hc-key"
            ],
            "states": {
                "hover": {
                    "enabled": true,
                    "fillColor": "#9c9a9a"
                }
            },
            "color": "#417BCC",
            "dataLabels": {
                "enabled": true,
                
            },
            "allAreas": true,
            "data": [
                { "hc-key": "us", "value": 328.2 }, 
                { "hc-key": "ca", "value": 37.6 } 
               
            ],
            "events": {},
            "tooltip": {
                "headerFormat": "<span class=\"fontSize10\"><span class=\"fontSize10\">{point.key}<br/></span></span><br/>",
                "footerFormat": "</table>",
                "shared": true,
                "useHTML": true,
                "format": "configFormat",
                "formatKey": "",
                "currenyBeforeAmount": true
            }
        }
    ],
    "yAxis": [
        {
            "visible": false,
            "index": 0
        }
    ],
    "xAxis": [
        {
            "visible": false,
            "index": 0,
            "isX": true
        }
    ],
    "pane": [
        null
    ]
    });

})();
Attachments
ExportedMapChart.png
ExportedMapChart.png (16.05 KiB) Viewed 251 times
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Hi Team,

Any Update?

Please help regarding the issue
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Map Chart Export

Hi,

Thanks for the question!

I've pasted your config into JSFiddle and everything seems to work as expected: https://jsfiddle.net/BlackLabel/o1k6zs83/

Please take a look at the demo I've attached. Could you please reproduce your issue in JSFiddle (minimal reproducible example)? Only then will I be able to help.

Best regards!
Jakub
Highcharts Developer
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Thank you for response.

I want to highlight that what you have responded, same I had mentioned in my initial query. Same chart Options work in JsFiddle but gives blank in HighChart Export Api.

Do we have to pass some extra configuration for map chart....or anything else needed for it...please highlight.

Your help will be appreciated.
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

We've observed a discrepancy in rendering behavior when using Highcharts.mapChart versus Highcharts.Chart for map charts.

In JSFiddle, when we utilize Highcharts.mapChart('container', {}), it correctly renders the map chart with all the expected features. However, if we switch to Highcharts.Chart('container', {}), it results in a blank chart with only the title and color axis displayed, even though the configuration remains the same.

Our concern is whether the Highcharts Export API (https://export.highcharts.com) automatically handles this difference in rendering behavior when exporting charts. We've noticed that when we pass the same configuration that works with Highcharts.mapChart in JSFiddle to the Export API, it produces a blank chart image, similar to what we see when using Highcharts.Chart for map charts in JSFiddle.

We'd appreciate clarification on how the Highcharts Export API handles map chart configurations and whether there are specific considerations or adjustments required to ensure successful export of map charts.

Thank you for your assistance in resolving this issue.
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Map Chart Export

Hi,

Thanks for clarifying! You're absolutely right.

If you scroll down on this page https://export.highcharts.com/ you'll see that there is a 'constructor' that is either 'chart', or 'stockChart' (the Exporting UI does not currently support `mapChart` even though it is supported by the Export Server).

I've created an issue for it on the highcharts-export-server repository on GitHub here: https://github.com/highcharts/node-expo ... issues/503 where you can track its progress. I will try to complete that before the upcoming v4.0.0 release.

Best regards!
Jakub
Highcharts Developer
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Thank You Jakub for your assistance, will track the issue, but please inform when you get to know that the issue is resolved as we need it as soon as possible.

Thanks again for help
jakub.s
Posts: 1225
Joined: Fri Dec 16, 2022 11:45 am

Re: Map Chart Export

I've created a pull request for it: https://github.com/highcharts/node-expo ... r/pull/504 and it will be a part of the next release

Feel free to test this pull request out and let me know if it works as expected.

Best regards!
Jakub
Highcharts Developer
Silver
Posts: 16
Joined: Tue Feb 06, 2024 3:06 pm

Re: Map Chart Export

Thank You very much team

Return to “Highcharts Maps”