Hi, im trying to export the gantt to pdf.
a. im working eith reactjs
b. i trying to export with the gantt react component
c. i successful import all
the problem is that i have class display flex so my component has horizontal scroll bar (like the gantt) but when im exporting i get display block element(one on top of each other)
This is how my gantt display on the web
And this is how i get the file
This is the code i use (i put it inside ine of your snippet)
var header =‘.calenderContainer{display:flex;text-align:center;background-color:white;padding-bottom:2vh;color:#a6a6a6;font-weight:500;padding-top:1vh;width:100%;overflow-x:auto;white-space:nowrap;font-family:Arial,Helvetica,sans-serif}.mainContainer{margin-top:.1%}.legendContainer{position:absolute;z-index:999999;border-top:.1px solid #a6a6a6;background:white;transform:translateZ(0);-webkit-transform:translateZ(0)}.legendItem{color:black;border:.1px solid #a6a6a6;border-top:none}.legendHeader{height:34px;text-align:center;padding-top:1vh;padding-right:20px;width:280px}.valueBackground{color:#000;border:2px solid #a6a6a6;border-radius:50%;height:100%;width:50%;font-size:.7vw;font-weight:600;margin:auto;margin-top:1px;padding-top:9px}.legendDescription{height:34px;border-top:none;border-right:none;font-weight:500;padding-top:2%;padding-left:1%;font-size:13px}.monthContainer{display:flex}.yearHeader{border:.1px solid #a6a6a6;font-size:12px;height:17px;padding-top:.25vh;border-bottom:none;border-left:none}.ItemRow{border:solid .2px #a6a6a6;text-align:center;height:34px;font-size:12px;border-left:none}.monthValue{padding:1px;border:solid .2px #a6a6a6;border-left:none;text-align:center;font-size:.8vw;height:35px}.monthNumber{height:16px;border-bottom:none}’;
function export_data(){
gantt.config.smart_scales = false;
gantt.render();
gantt.exportToPNG({
footer:“”+header+“”+‘
Critical Path KPI
2013
2014
2015
2016
2017
2018
2019
2020
raw:true,
});
}
gantt.init("gantt_here");
gantt.parse(<data>);
Thank you for all the help!