4

I have a simple bar chart with many bars. I take the highcharts result and use wkhtmltopdf to generate a PDF with A4 page size.

The problem is that the page break always chops some results like this (detail of the page break):

enter image description here

How can I avoid it without having to split the data in two or more charts (paginate the chart)?

I thought about setting something like page-break-inside: avoid; to the bar (or even to the svg's rect), but I don't know how to do this in Highcharts.

Any ideas?

Mauricio Moraes
  • 7,255
  • 5
  • 39
  • 59
  • How many pages does your bar chart span? From other questions and example I have seen people either set a height for the outer container using CSS or set the height within highcharts so it fits all in one page (which I know may not be possible if you have pages of data) – crazymatt Oct 15 '15 at 19:59
  • @crazymatt thanks for your comment. Sadly it can span to multiple pages (5-6). I tought about creating wrapping divs with fixed heights and calculate the bar height on the chart so the gaps would fall exactly on the page break. But this wuld be very difficult and my page header has a floating height... :( – Mauricio Moraes Oct 15 '15 at 20:05
  • I found this [SO question which may be helpful to your problem](http://stackoverflow.com/questions/22934969/how-does-similarweb-create-their-pdf-reports). Hope that helps. – crazymatt Oct 15 '15 at 21:49
  • @crazymatt very interesting, but they're talking about the approach I mentioned using page-break-inside, or page-break-after. I saw they don't have big charts crossing pages, so thats easier to force where to break page. – Mauricio Moraes Oct 16 '15 at 12:00
  • 2
    I think it would be the best to create multiple charts. Just assume that n-bars will fit the chart. For example 40. Now divide number of points and you have number of charts: 210 / 45 -> 6pages. Now, try to follow [this solution](http://www.highcharts.com/docs/getting-started/frequently-asked-questions#export-multiple). It may require some polishing, though. – Paweł Fus Oct 19 '15 at 16:06
  • @PawełFus, thanks for your comment. I already have this multiple-chart solution implemented in a branch. The question stands exactly for the case of solving it without pagination on the charts. – Mauricio Moraes Oct 19 '15 at 16:19
  • 1
    Ok, to answer the question: If you want to apply `page-break-inside: avoid;` for the rect, use `chart.series[0].points[X].graphic.attr({ "page-break-inside": "avoid" });` where `X` is index of the point, which rect should get applied such style. I'm not sure if this work for SVG, never tried this before, so let me know : ) – Paweł Fus Oct 19 '15 at 16:31
  • Use Rotativa as it Converts exact view to PDF. – Shashank Sood Jun 22 '16 at 12:57

0 Answers0