Hi
I’m having trouble creating a printer friendly version of my page containing several igdatacharts.
When i use the chrome dev tools to emulate print style the charts scale correctly when i resize the window, but when i actually press ctrl+p the charts does not scale to fit the print page althoug all other elements does so. If i resize the window before i press ctrl+p the scaling of the charts is kept the same on the print preview. Why isn’t the charts updated?
Is there a way to force the charts to resize or have a fixed size for printing?
Hello David,
Thank you for posting in our forums!
I followed the steps you suggested, I have created a sample with 3 igDataChart and when I press ctrl+p the chart does fit in the print page , I do not need to adjust its window .
Can you please try to get the same behavior with the attached sample? For clear understanding of the issue do provide me the image of chart which doesn’t fit in the print page before and after adjust the window.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if I can provide any further assistance.
In the demo you use 900px as the width, so it will always be 900px. If you set the width to 100% it will scale when you resize the window, but not in print preview. The result (see pictures) is that the first chart which has a width-property of 100% will not fit on the print-page.
$("#chart").igDataChart({
width: "100%",
height: "400px"
………..
I can control the width of the chart in css by creating a wrapper element that is sized by a print media query:
<div id="chartWrapper">
<div id="chart"></div><br/><div><h1>2nd chart</h></div>
#chartWrapper{
width:100%;
}
@media print{
width:900px;
Under dev tools in chrome i can emulate css media print. The chart gets a width of 900px as it should, but this does not happen when i actually try to print.
I modify the sample, made the width of 100% and not using any wrapper class in the sample, still when I run the sample, I am not able to reproduce the same behavior.
The steps I have taken to reproduce the behavior is:
1)Run the sample (provided previously) in Chrome bowser
2)resize the window took the print review.
3)Reaped the step 2 multiple time
Every time I am getting the same print preview how the chart is rendered in the resized window.
I would like to know which chrome version you are using?
What do you mean by it does not scale properly do you mean it extends beyond the page when printing or do you mean it will not fill up the page when printing?
Can you please label each say which picture is the behavior you expects and which picture is you are getting when you presses ctrl+p ?
Provide the necessary information to assist you further.