ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Export Map Chart Does Not Include All Countries or Inset

I am using HighCharts 9.3.3 to illustrate the amounts of "widgets" in certain countries. Two of those countries are "conglomerates" -- they stand for International Branch (IB) and Economic Multiform (EM) -- and do not technically exist. But they show up on the map chart as an inset (which is good). Also, the initial global map doesn't show the little countries (like Switzerland and Trinidad & Tobago), but if you zoom in you can see them.

The problem is that if I export this chart as a PNG or JPEG, two undesirable behaviors happen.

1. The inset is no longer shown
2. Not all the countries are shown

Is there a way to fix this? Is this fixed in a different version? Is there an exporting option that can take care of this? I didn't see anything in the API and I couldn't find anything about the "inset". I assume it doesn't show all the countries because some of them are tiny and would clog the readability of the map, but is there a way to "show all data" anyway?
Attachments
What it looks like on the web page
What it looks like on the web page
normal.png (68.4 KiB) Viewed 1076 times
What it looks like in an exported PNG
What it looks like in an exported PNG
Exported.png (217.46 KiB) Viewed 1076 times
jakub.s
Site Moderator
Posts: 1378
Joined: Fri Dec 16, 2022 11:45 am

Re: Export Map Chart Does Not Include All Countries or Inset

Hi,

Thanks for the question!

Could you please create a minimal reproducible example? Only then will I be able to investigate this further and offer a potential solution.

Best regards!
Jakub
Highcharts Developer
ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Re: Export Map Chart Does Not Include All Countries or Inset

I hope this is what you're looking for. This is the Javascript code that creates the map. Below that is the JSON data it's using. Note that

Code: Select all

Highcharts.mapChart('chartContainer-' + vm.reportId, response.data.chart, function (chart) {
	//on complete...
	if (treaties.length > 0) {
		var labelData = "<div id='map-treaties' class='chart-map-treaties-container'>";
		for (var i = 0; i < treaties.length; i++) {
			labelData += "<div class='chart-map-treaties-parent'>"
			labelData += "  <div class='chart-map-treaties-left' title='" + treaties[i].name + "'>" + treaties[i].code + ": </div>" + "  <div class='chart-map-treaties-right'>" + treaties[i].value + "</div>";
			labelData += "</div>";
		}
		labelData += "</div>";

		var y = 0;
		var x = 75;
		var bottomOffset = 25;

		chart.renderer.label(labelData, x, y, "rect", 0, 0, true, true, "treaties").add();
		//adjust label container from .add above
		$('div.highcharts-treaties').css({
			"top"   : '',
			"bottom": ($('#map-treaties').height() + bottomOffset) + "px",
		});
	}
});
...
setExportingOptions: function () {
	if (Highcharts.getOptions().exporting) {
		let contextButton = Highcharts.getOptions().exporting.buttons.contextButton;
		contextButton.menuItems = contextButton.menuItems.filter(item => (item === 'printChart' || item === 'downloadJPEG' || item === 'downloadPNG' || item === 'downloadSVG' || item === 'separator'));
	}
}

Code: Select all

{
    "chart": {
        "chart": {
            "backgroundColor": "#FFFFFF",
            "map": "custom/world-highres3",
            "type": "map"
        },
        "colorAxis": {
            "max": 500,
            "min": 1,
            "type": "logarithmic"
        },
        "colors": [
            "#FF9800",
            "#14E715",
            "#03A9F4",
            "#A1887F",
            "#E51C23",
            "#1DE9B6",
            "#B0120A",
            "#FFEB3B",
            "#009688",
            "#3F51B5",
            "#FF4081",
            "#9C27B0",
            "#FFB74E",
            "#00FF69",
            "#37C8FE",
            "#C8B1AC",
            "#FF374E",
            "#00FFD5",
            "#E44653",
            "#FBFD61",
            "#29C6B6",
            "#907DD4",
            "#FF1BA5",
            "#DC2DCD",
            "#FFD394",
            "#6FFFA1",
            "#8ADEFF",
            "#DDCECA",
            "#FF8D94",
            "#77FFE5",
            "#F09095",
            "#FDFE9E",
            "#88DCD2",
            "#BAAEE4",
            "#FF87C7",
            "#EB89E0"
        ],
        "credits": {
            "enabled": false
        },
        "exporting": {
            "filename": "MY FILE NAME",
            "sourceHeight": 1000,
            "sourceWidth": 1000
        },
        "legend": {
            "enabled": false
        },
        "mapNavigation": {
            "enabled": true
        },
        "plotOptions": {
            "series": {
                "allAreas": true,
                "dataLabels": {
                    "enabled": true
                },
                "joinBy": [
                    "iso-a2",
                    "code"
                ],
                "showInLegend": false
            }
        },
        "series": [
            {
                "data": [
                    {
                        "code": "TT",
                        "name": "Trinidad and Tobago",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "IL",
                        "name": "Israel",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "CH",
                        "name": "Switzerland",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "IN",
                        "name": "India",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "JP",
                        "name": "Japan",
                        "type": "C",
                        "value": 2
                    },
                    {
                        "code": "KR",
                        "name": "Republic of Korea",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "EM",
                        "name": "Economic Multiform",
                        "type": "T",
                        "value": 1
                    },
                    {
                        "code": "CN",
                        "name": "China",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "CR",
                        "name": "Costa Rica",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "BR",
                        "name": "Brazil",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "AU",
                        "name": "Australia",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "IB",
                        "name": "International Branch",
                        "type": "T",
                        "value": 1
                    },
                    {
                        "code": "GB",
                        "name": "United Kingdom",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "CA",
                        "name": "Canada",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "TR",
                        "name": "Turkey",
                        "type": "C",
                        "value": 1
                    },
                    {
                        "code": "US",
                        "name": "United States of America",
                        "type": "C",
                        "value": 2
                    }
                ],
                "name": "Country",
                "showInLegend": false
            }
        ],
        "subtitle": {
            "text": ""
        },
        "title": {
            "text": "MY TITLE"
        }
    },
    "percentageView": false,
    "reportName": "MY REPORT NAME"
}
magdalena
Site Moderator
Posts: 521
Joined: Tue Aug 24, 2021 1:32 pm

Re: Export Map Chart Does Not Include All Countries or Inset

Hi,

Thank you for providing the config.

I analyzed your question, and if I understand correctly, the rendered custom label is not shown on the exported image. The insets are a different concept in Maps Chart, which is why I want to clarify. The exported image seems to be scaled - have you tried decreasing it? Also, please check the result with the `exporting.allowHTML` option set to `true`.

Let me know about the results,
Best regards!
Magdalena Gut
Developer and Highcharts Support Engineer
ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Re: Export Map Chart Does Not Include All Countries or Inset

No, as aforementioned, the two issues I'm having are the following:

1. On export, the inset (the little box that shows the counts for IB and EM) is no longer shown
2. On export, not all the countries with data are shown

The exported image does seem to have a different scale than the web page image, but I haven't seen anyway to influence the scale of the exported image. No matter how much I zoom in or or out on the web page, the exported image is always the same.
ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Re: Export Map Chart Does Not Include All Countries or Inset

Adding "allowHTML" did add the inset information, but it adds it in an unpleasing way (see picture)
Attachments
Map with allowHTML as true.png
Map with allowHTML as true.png (138.59 KiB) Viewed 944 times
jakub.s
Site Moderator
Posts: 1378
Joined: Fri Dec 16, 2022 11:45 am

Re: Export Map Chart Does Not Include All Countries or Inset

Hi,

I've been trying to reproduce this issue with the snippet of code that you shared, but failed to do so. Thus, I cannot really say what's the root cause of this and how to solve this.

In order for me to be able to investigate this further, please create a minimal reproducible example. You could start from one of the demos given here: https://www.highcharts.com/demo#highcha ... mo-general

I'll be waiting for your response.

Best regards!
Jakub
Highcharts Developer
ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Re: Export Map Chart Does Not Include All Countries or Inset

Here is a pretty good approximation of what my code is doing.

https://jsfiddle.net/ericJuneau/35czvtod/91/

Note there are some discrepancies, like the "treaties" box is in the upper left instead of lower left for some reason. And the code for that information is hardcoded into the "getTreaties" method, instead of coming from the chart data.

I also seem to be unable to download a PNG image from the JSFiddle. I think this may be a symptom of the JShell.
jakub.s
Site Moderator
Posts: 1378
Joined: Fri Dec 16, 2022 11:45 am

Re: Export Map Chart Does Not Include All Countries or Inset

Hi,

Thanks for sharing.

There are a few things that I've noticed:

1. The exporting does not seem to work at all due to the use of unimported JQuery.

2. The "treaties" are not displayed properly (they're outside of the div container). If they're not displayed properly on the chart, it is not expected for them to display properly during exporting.

Overall, for most cases, exporting image should be like a screenshot of the chart with the given dimensions (exporting.width, exporting.height). If it's not exactly the same, it could be considered a bug.

In this demo, however, your custom elements are not displayed properly -- thus, we cannot really qualify it as a bug until the chart with given dimensions width x height differs from the image exported in the same dimensions (assuming that proper options are set).

Best regards!
Jakub
Highcharts Developer
ejuneau
Posts: 7
Joined: Tue Jun 11, 2024 9:18 pm
Contact: Website

Re: Export Map Chart Does Not Include All Countries or Inset

I have corrected the JSFiddle. I can now see the "treaties box" in the lower left corner as expected. And I can download a PNG image. As you can see, the PNG image does not contain the treaties box
jakub.s
Site Moderator
Posts: 1378
Joined: Fri Dec 16, 2022 11:45 am

Re: Export Map Chart Does Not Include All Countries or Inset

Hi @ejuneau,

I'm sorry, but I can't see the demo being corrected. For me, the link above still shows the treaties box inappropriately (it goes outside of the chart container) [https://jsfiddle.net/ericJuneau/35czvtod/91/].

Did you share the new link anywhere?

Best regards!
Jakub
Highcharts Developer
jakub.s
Site Moderator
Posts: 1378
Joined: Fri Dec 16, 2022 11:45 am

Re: Export Map Chart Does Not Include All Countries or Inset

Hi,

Thanks for sharing, it works as expected now.

I've modified the demo: https://jsfiddle.net/zng9d6y1/

Here's what happens:

1. Our internal exporting mechanism (the online exporting by default, but you can also try out the offline exporting) processes the SVG (creates a copy with internal methods) and sends this SVG to our Exporting Server.

2. The processing method is important and this was the root cause of the issue that you've been experiencing. You can debug the getSVGForExport method to see how it works internally.

3. The styles (your main.css) file does not get attached with the request to the Export Server. Thus, the styles that you apply there are not taken into account during exporting. In order to change that, you can apply those styles directly in the style attribute (like I did in the demo) or switch to offline exporting which acts more like a "screenshot" of the current chart. You can experiment with these options and choose the one which suits you best.

Let me know if you have any more questions about this.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Maps”