PDF Chart has vertical and horizontal scrollbars

[mmcclaskey (Matt)]

We have a dashboard with 4 visualizations (2 bar charts, one table, and one timelion chart). The timelion chart appears with horizontal and vertical scrollbars in a PDF report, for no apparent reason (meaning the chart would be fully visible if not for the scroll bars covering the dates in the bottom of the chart). Here is the timelion expression. This is a pretty much fresh out of the box configuration (as little configuration or customization as possible).

es('session.status:successful').label('Successful'),es('session.status:unsuccessful').label('Unsuccessful'),es('session.status:timeout').label('Timeout')

Also, is there any way to customize the reports (title page, headers, footers)? Thank you.

[lukas (Lukas Olson)]

Can you tell me which version of Kibana/X-Pack you're currently using?

[mmcclaskey (Matt)]

Latest versions, downloaded yesterday. 5.1.1

[mmcclaskey (Matt)]

I was able to fix the issue by adding the following to plugins/x-pack/plugins/reporting/server/assets/reporting-overrides.css

div .timelion-vis {
overflow: hidden;
}

After fixing it I saw another issue. Timelion charts are chopped off at the top. I tried changing the boundingBoxes top from 70 to 60 in get_screenshot.js, however, that effected the other charts. Instead I used another css override to bring the legend down more in the chart. The chart is still chopped off, however, with the legend pulled down you don't notice.

visualize > div > div > div > div > div.chart-canvas > div.legend > table {
top:30px !important;
}

Finally, for those who stumble on to this looking for a way to customize the report. pdf.js is where the template is defined. I was able to completely customize the header and footer, see the following site for the correct format to use.

bpampuch/pdfmake

[mmcclaskey (Matt)]

My mistake, the version we had this issue on was 5.0.0. We do not see this issue on version 5.1.1. I can see there were some obvious changes related to this in the reporting-overrides.css and get_screenshot.js.

Thank you