Gantt chart PDF export cuts for wider charts

Gantt
#1

I have a gantt chart that is 25 months long. When I export to PDF, the last 6 months are always cut off. We purchased the PDF export module and we use the latest version of that. I have raw: true and gantt library version 6.0.7.

Please help.

#2

Hello @jayanpari,
It is a known bug, and we have it in our tracker. The dev team will fix it in the future, but I cannot give you an ETA.
There is a limit for the file size in the online export service.
We didn’t set a hard limit to the exported sizes, but it seems that Gantt cannot export large projects that have more than 100000px width (1423 days on the daily scale). For PNG maximal sizes are: 32768 x 2043

You can export only part of the Gantt chart, then it will be exported correctly, to do it you can:

  1. Export the data by date range, like in the following demo:
    http://snippet.dhtmlx.com/d8a184015
  2. Export the specific tasks from the chart, like in the following demo:
    http://snippet.dhtmlx.com/384e26494

Note, then both methods have some specific behavior, for example, if a task has a parent, that parent should be displayed, or the task won’t be visible.

API Data to export:
https://docs.dhtmlx.com/gantt/desktop__export.html#datatoexport

1 Like
#3

Thanks for the quick response.

Although I have 25 months, each time period is a month and not day ( gantt.config.duration_unit = “month”).

The issue happens when I export roadmap with just 6 time units too - example - 6months-pdf-issue.pdf (17.6 KB)

Any idea why it doesn’t work for this case?

start and end dates doesn’t work if raw is set to true. We need raw to be true because of the additional formatting.

Thank you,
Jayan Pari

#4

Hi @jayanpari,
Thank you for the clarification and the pdf file with reproduced issue.
It’s a known issue, which occurs when the layout config has “rows inside columns” structure, so Gantt exports the data vertically. In that case, you need to specify the timeline column width to see it fully in the exported file:

...
        { resizer: true, width: 1 },
        {
		width: 10000,
          rows: [
            { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
            { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' }
          ]
        },
...

Here is a demo:
http://snippet.dhtmlx.com/569e2ef0f

The better way to fix this issue is to change the layout config structure to “columns inside rows”, like in this fragment:

gantt.config.layout = {
  css: "gantt_container",
  rows: [
    {
      cols:
      [
       {
      	width: 200,
        rows:[
          { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
		  { view: "scrollbar", id: "gridScroll", group: "horizontal" }	          
        ]
       },
        { resizer: true, width: 1 },
        { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
        { view: "scrollbar", id: "scrollVer" }
       ]
    },
    { view: "scrollbar", id: "scrollHor", group: "horizontal" }
  ]
};

Here is a demo:
http://snippet.dhtmlx.com/2f10109c9

Also, if you want to use your app with the current layout config, you can define two gantt.config.layout, one for export and one for app. After that, you will be able to toggle between them while export, so your export function would look like this fragment:

function export_data(){
  gantt.config.layout = exportLayout;

  gantt.init("gantt_here");
  gantt.exportToPDF({
    raw:true
  }); 

  gantt.config.layout = usualLayout;
  gantt.init("gantt_here");
}

Here is a demo:
http://snippet.dhtmlx.com/69f032eb6

I suppose it should solve the issue, but if you still will have this export issue, could you please reproduce it in one of the snippets above, click the share button and send me the link?

btw, I see in your pdf, that it exported on two pages, it looks like an issue that we have fixed a few months ago. I sent you a link to the archive with the latest version of the export module in the teamwork.