Hello,
I have a reactive application with a line chart that looks like this:
But when I want to print this page, the graph gets cut in half :
Is there any css that can help prevent this issue on printing? Thank you!
Hi!
It seams that the page is wider than the paper.
Try use
@media print
to redefine the width of the chart
Regards
Graça
Hi Low Nico,
you can use CSS to prevent the graph from getting cut in half when printing in OutSystems. One way to achieve this is by using the @media print rule and adjusting the size and layout of the graph specifically for printing.
@media print {
/* Adjust the size of the graph container */
.graph-container {
width: 100%;
height: auto;
}
/* Adjust the size of the graph itself */
.graph-container .chart {
Hope this would help you !!
Thanks
Reemali.
Thank you so much for your help! I tried using the css you suggested but the graph is still getting cut off. Any reason why? Thank you!
Hi,
you can try using the overflow property to enable scrolling within the container. This way, the graph won't be cut off, and users can scroll within the container to view the entire chart. For example:
overflow: auto;
Or You can try adjusting the page margins using CSS's @page rule to provide more space for the graph.
@page {
margin: 1cm; /* Adjust the margin values as needed */
Note:after all these is also not working then test in different browsers ,Different browsers may have different default print settings and behaviors.
Thanks.
Are you using the class ".graph-container " in the container that contains the chart?
if so, perhaps force a width to the container, 400px for example .
width: 400px;
Thanks for all the suggestions, but none of it worked unfortunately. I tried using the graph-container class on another container containing a table and it worked fine. It is just not working for the graph
You can try the "!important" in the CSS
width: 400px !important ;
This is not a nice thing to do but sometimes ... we have to.
I have already included the !important line. But it did not work.
something is forcing the chart to have that width.
Use the same CSS on the normal screen and inspect it maybe you understand where the larger width is forced