cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

highcharts-export-server renders two series side-by-side.

Hi, I have been pulling my hair out over this for a couple of days now. I have a chart that has the same config in the browser and for the export server. But when I export the chart to png it renders the two series side by side. However in the browser they are, as expected, one over the other.

Also, on this chart only when I use html to render the legend, I still get a highcharts rendered box next to my html for the first (blue) series. And in all charts, when exported via the server, the html will not render the background color of the div. This can be seen in the images below.

Browser:
Browser.png
Browser.png (17.09 KiB) Viewed 1732 times
Export server:
ExportServer.png
ExportServer.png (12.32 KiB) Viewed 1732 times
Export module:
Is there anything that stands out as to why this will not overlap the two series??

Code: Select all

const exporter = require('highcharts-export-server/lib/index.js');
module.exports = (callback, elrDataJSON, dRatioDataJSON, width, height) =>
{
	debugger;
	elrDataJSON = elrDataJSON || '[]';
	dRatioDataJSON = dRatioDataJSON || '[]';
	var elrData = JSON.parse(elrDataJSON);
	var dRatioData = JSON.parse(dRatioDataJSON);
	elrData = elrData || [];
	dRatioData = dRatioData || [];
	var max = Math.max.apply(Math, elrData.map((o) => o.y));

	var exportSettings = {
		type: 'png',
		options: {
			credits: {
				enabled: false
			},
			chart: {
				zoomType: "x",
				type: 'column',
				width: width || 780,
				height: height || 250,
				spacingLeft: 5,
				spacingTop: 10,
				spacingBottom: 5,
				spacingRight: 10,
				borderWidth: 1,
				borderColor: '#00000020'
			},
			title: {
				text: 'Expected Loss Rate with D-Ratio',
				style: {
					fontSize: "12px",
					fontFamily: "Arial Narrow, Tahoma",
					fontWeight: "bold",
					color: "#41403E"
				}
			},
			xAxis: {
				type: 'category',
				labels: {
					style: {
						fontSize: '6pt',
						color: "#0000CC"
					},
					staggerLines: 2,
					//rotation: -45,
					step: 1
				},
				tickInterval: 1,
				showLastLabel: true
			},
			yAxis: {
				max: max + 2,
				tickInterval: (max + 2) / 8,
				title: { text: null },
				labels: {
					format: "{value:.2f}",
					style: {
						fontSize: "6pt",
						fontFamily: "Arial Narrow, Tahoma",
						color: "#0000CC"
					}
				}
			},
			legend: {
				enabled: true,
				useHTML: true,
				symbolHeight: 0,
				symbolWidth: 0,
				symbolRadius: 0,
				padding: 4,
				labelFormatter: function ()
				{
					return '<div><div style="display: inline-block; width: 8px; height: 8px; background-color: ' + this.color + '"></div> & nbsp; ' + this.name + '</div > ';
				}
			},
			plotOptions: {
				column: {
					pointWidth: 12,
					dataLabels: {
						color: "#41403E"
					}
				},
				series: {
					borderWidth: 0,
					dataLabels: {
						verticalAlign: "bottom",
						align: "center",
						padding: 8,
						allowOverlap: true,
						style: {
							fontSize: "6pt",
							fontFamily: "Arial Narrow, Tahoma",
							fontWeight: "normal",
							//color: "#0000CC",
							textOutline: "none"
						},
						enabled: true,
					}
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
				pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
			},
			series: [
				{
					type: "column",
					name: "ELR",
					//marker: { enabled: false },
					colorByPoint: false,
					zIndex: 1,
					data: elrData
				},
				{
					type: "line",
					name: "D-Ratio",
					color: "#336699",
					marker: { enabled: false },
					colorByPoint: false,
					zIndex: 2,
					data: dRatioData
				}
			]
		}
	};

	exporter.initPool();
	exporter.export(exportSettings, function (err, res)
	{
		callback(null, res.data);
		exporter.killPool();
		process.exit(1);
	});
};

User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: highcharts-export-server renders two series side-by-side.

Hi,

Thank you for reporting the problem.

Exporting should have allowHTML set tu true. For the below demo it is set in chart options in exporting.allowHTML:true and for exportSettings object that you are using it should be added as a top-level property as seen in a code snippet in this comment:
https://github.com/highcharts/node-expo ... -687097900

JSFiddle demo to test with exporting module: https://jsfiddle.net/BlackLabel/msdr1ohx/15/

The series might not overlap in case there is something wrong with the series data format - could you edit the above demo to add an exemplary data sample to try to recreate the problem with exporting via the exporting module?

Best regards,
Kacper Madej
Highcharts Developer
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

Okay Kacper, you nailed it. It was my data. I am including an "x" property in my data objects -- which is a hold over from using highcharts-regression.js to show a polynomial trend line on a different chart. That chart wouldn't show the trend line without the "x" property if the data object only had a category "name" property.

In that case I was simply setting "x" to a sequential counter. But in this case I forgot to reset the counter between building the two series data. So the "x" of the second series started off where the first left off. I only made this mistake on the server side, not on the browser:

Code: Select all

			var index = 0;
			var mappedElrs = crs.Select(cr =>
			{
				return new { name = cr.EffectiveYear.ToString(), x = index++, y = cr.Elr, color = cr.EffectiveYear < 1995 ? "#ECC518" : "#ca7c02" };
			}).ToArray();

			//*******
			//was not originally resetting "index" here:
			index = 0;
			//*******
			
			var mappedDRatios = crs.Select(cr =>
			{
				return new { name = cr.EffectiveYear.ToString(), x = index++, y = cr.DRatio, color = cr.EffectiveYear < 1995 ? "#08541c" : "#336699" };
			}).ToArray();
I'm good to go!!
Thanks for prompting me to look at the data. I've been so rushed to get this already overdue project done, that I got sloppy. :-(
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

Well, I spoke too soon. I added the exporting settings, but I am still not getting html rendered legends. Or, at least, the small box which is a div with background color set is not rendering. And in both the browser and export server highcharts is still rendering a larger box next to my first legend entry in the elr/dratio chart:

Browser:
Browser2.png
Browser2.png (40.58 KiB) Viewed 1711 times
Export Server:
Server2.png
Server2.png (118.48 KiB) Viewed 1711 times
Any suggestion there? The main reason I'm using html is that the line width of the light blue "Trend" series in the first chart is set to "66". So highcharts was also rendering the legend indicator as 66 high. And highcharts was rendering a line or box or circle in the legend based on the series type. But my boss wants the indicator to be consistent. A small rectangular box is all we need. I'll experiment with the html. My guess is that adding an &nbsp; within the colored div will help on the server export. But why is highcharts rendering a box next to the first (ELR) series in the second chart?

This is what the options looks like now:

Code: Select all

	var exportSettings = {
		allowCodeExecution: true,
		resources: "{ \"files\": " + hrp + " }",
		type: 'png',
		options: {
			credits: {
				enabled: false
			},
			exporting: {
				allowHTML: true
			},
			chart: {
			// ****************
			// the rest is the same as before
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

Okay, after looking at the HC docs, it looks like exporting is a child of chart. So I moved the exporting setting to chart. And I also tried adding allowHTML to the top level as was done in your linked post above. But neither make any difference.
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: highcharts-export-server renders two series side-by-side.

"exporting" is a top-level options group. The same level, so a sibling, as "chart".
https://api.highcharts.com/highcharts/exporting
https://api.highcharts.com/highcharts/chart

> why is highcharts rendering a box next to the first (ELR) series in the second chart?

Column series type has a different legend symbol rendering function than a line type series.
However, this looks like a bug - reported here: https://github.com/highcharts/highcharts/issues/16516

The last demo that I have shared here, with the workaround for the bug, exports correctly through the exporting menu (top-right hamburger icon with drop-down options) - https://jsfiddle.net/BlackLabel/msdr1ohx/16/

Could you recreate the problem in a JSFiddle when the custom legend symbols that you have added are not being exported?
Kacper Madej
Highcharts Developer
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

@KacperMadej, I tried the useHtml property in both the top-level as a sibling to "chart" and within the chart object settings as well. Neither had an effect on the box. And in fact it seems to be finding that setting correctly since it is rendering the text.

I have not tried the export menu from the client side. I'm only exporting to PNG using the NPM highchart-export-server package. This has to be something to do with the phantom.js rendering.

Can you tell me if there is a setting that will enable consistent legend symbols? I would rather do that then try to fix the html rendering in highchart-export-server.
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

THIS: symbolHeight: 0.001,
Works to get rid of the extra box on the ELR chart.
I've tied applying -webkit-print-color-adjust: exact; to the div to get it to render the background color. But that had no effect.
I'm lost at this point.
cosmokenney
Posts: 9
Joined: Wed Oct 13, 2021 3:58 pm

Re: highcharts-export-server renders two series side-by-side.

I've tried squareSymbol: true in the legend settings, and it seems like it is ignored:

Code: Select all

			legend: {
				enabled: true,
				squareSymbol: true,
				symbolHeight: 8,//0.001,
				symbolWidth: 8,//0,
				symbolRadius: 0,
				padding: 4
			},
This still tries to match the symbol to the series type:
ExportServer-squareSymbol.png
ExportServer-squareSymbol.png (28.87 KiB) Viewed 1653 times
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: highcharts-export-server renders two series side-by-side.

You could try with overriding legend symbol drawing method to make all render like the column type series as that one is ok.
https://jsfiddle.net/BlackLabel/msdr1ohx/18/

The trend series is probably rendered like that in the legend due to the plotLine width, but the above demo extra code in chart.events.load function should resolve that as well.

In the above demo, I kept your HTML rectangles for reference, but it should be safe to remove them.
Kacper Madej
Highcharts Developer
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: highcharts-export-server renders two series side-by-side.

You are welcome.

Please let us know if you have any further questions.

Best regards,
Kacper Madej
Highcharts Developer

Return to “Highcharts Usage”