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

**URL:** <https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237>\
**Category:** Kibana\
**Created:** [August 8, 2017, 10:00am UTC](https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237 "2017-08-08T10:00:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RG089](https://avatars.discourse-cdn.com/v4/letter/r/ed655f/32.png) [@RG089](https://discuss.elastic.co/u/RG089)\
**Post date:** [August 8, 2017, 10:00am UTC](https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237/1 "2017-08-08T10:00:20Z")

</div>

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](https://us1.discourse-cdn.com/elastic/original/3X/7/c/7cdb82d5974fa9c9c3603050e868331c0606b22e.png)  
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)

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [August 8, 2017, 1:08pm UTC](https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237/2 "2017-08-08T13:08:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [August 9, 2017, 8:33pm UTC](https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237/3 "2017-08-09T20:33:40Z")

</div>

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](https://developers.google.com/web/updates/2017/04/headless-chrome) if it truely needs to be headless. Alternatively there is always standard browser automation software like Selenium.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 6, 2017, 8:33pm UTC](https://discuss.elastic.co/t/x-axis-and-other-elements-not-shown-in-phantomjs-png-screenshots/96237/4 "2017-09-06T20:33:50Z")

</div>

Closed on September 6, 2017, 8:33pm UTC

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