How to print all the tasks in AnyGantt - gantt-chart

Question

I am printing the AnyGantt chart using the print API, but all I can print is the part I am viewing, kind of a snapshot of the current screen.
Is there an option to somehow print all the items present in the gantt (at least vertically, something like scrolling down the chart and capturing all the items, event if they are not visible at the moment) in the visible time range?
Thank you.

Answer 1

This can be implemented with a few code tricks. The idea is to expand the chart's div container to show all existing rows in gantt chart, then print it, and finally collapse the container's div back. Unfortunately, there's no other solution for this now. The snippet below may not work in stackoverflow playground. I will leave a link to the same sample in AnyChart Playground which provides printing features.
anychart.onDocumentReady(function () {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.js
anychart.data.loadJsonFile('https://cdn.anychart.com/samples/gantt-charts/activity-oriented-chart/data.json', function (data) {
var stage = anychart.graphics.create("container");
// create data tree
var treeData = anychart.data.tree(data, 'as-table');
// create project gantt chart
var chart = anychart.ganttProject();
// set data for the chart
chart.data(treeData);
// set start splitter position settings
chart.splitterPosition(370);
// get chart data grid link to set column settings
var dataGrid = chart.dataGrid();
// set first column settings
dataGrid.column(0)
.title('#')
.width(30)
.labels({hAlign: 'center'});
// set second column settings
dataGrid.column(1)
.labels()
.hAlign('left')
.width(180);
// set third column settings
dataGrid.column(2)
.title('Start Time')
.width(70)
.labels()
.hAlign('right')
.format(function () {
var date = new Date(this.actualStart);
var month = date.getUTCMonth() + 1;
var strMonth = (month > 9) ? month : '0' + month;
var utcDate = date.getUTCDate();
var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
});
// set fourth column settings
dataGrid.column(3)
.title('End Time')
.width(80)
.labels()
.hAlign('right')
.format(function () {
var date = new Date(this.actualEnd);
var month = date.getUTCMonth() + 1;
var strMonth = (month > 9) ? month : '0' + month;
var utcDate = date.getUTCDate();
var strDate = (utcDate > 9) ? utcDate : '0' + utcDate;
return date.getUTCFullYear() + '.' + strMonth + '.' + strDate;
});
// calculate height
var traverser = treeData.getTraverser();
var itemSum = 0;
var rowHeight = chart.defaultRowHeight();
while (traverser.advance()){
if (traverser.get('rowHeight')) {
itemSum += traverser.get('rowHeight');
} else {
itemSum += rowHeight;
}
if (chart.rowStroke().thickness != null) {
itemSum += chart.rowStroke().thickness;
} else {
itemSum += 1;
}
}
itemSum += chart.headerHeight();
//customize printing
var menu = chart.contextMenu();
menu.itemsFormatter(function(items) {
items['print-chart'].action = function() {
document.getElementById('container').style.height = String(itemSum) + 'px';
setTimeout(function() {
chart.print();
setTimeout(function() {
document.getElementById('container').style.height = '100%';
},5000);
},1000);
}
return items;
});
chart.container(stage).draw();
chart.zoomTo(951350400000, 954201600000);
});
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
<div id="container"></div>

Answer 2

We are glad to notify that we have created a JS module for printing large Gantt charts. You can get the link to the module and sample of using it in the comment below.
This module exports enableLargeGanttPrint({Object: chart}) function, which gets the chart instance and implements printing functionality. To print the chart executes right mouse click on the chart and choose 'print' option. This will call standard browser print for prepared Gantt chart.