X-axis and other elements not shown in PhantomJS PNG screenshots

Elastic Stack Kibana
1

When I'm taking a PNG screenshot with PhantomJS (2.1.1) of a Kibana (5.5.0) dashboard (using MacOS or Ubuntu) it fails to display the graphs correctly. It looks like a CSS issue but I'm not sure where it comes from. The Dashboard looks fine in Safari (also WebKit based). The graphs in the image look OK, but the x-axis looks somehow clipped. No legend is displayed, looks cut off.

jsscreen99
jsscreen99.png1920×1680 113 KB

Has anyone seen a similar behavior?

The (simplified) phantomJS script:
page.viewportSize = { width: 1920, height: 1080 };
page.open(url, function() {
#wait some time#
page.render('screen.png');
phantom.exit();
}

I can see the exact same behavior with all other capture tools I know (CutyCapt, wkhtmltopdf, other PhantomJs versions like 1.8.2, 1.9.2)

2

Hello, there are a few know compatibility issues with PhantomJS that we are trying to solve as it's used in the Reporting plugin for Kibana, but it's not officially supported, Maybe some of the other users that have encountered this errors have fixed it and they can help you with that.

3

Yeah, phantomjs doesn't have proper flexbox support so it fails to render the visualization layout correctly. This is one of the reasons we take screenshots of each visualization individually in x-pack reporting. You would probably have better luck with Headless Chrome if it truely needs to be headless. Alternatively there is always standard browser automation software like Selenium.

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.