Change chart size of google Harts at print time with @media print

Question

I put a chart mounted with Google Charts on my page and to print it I want to reduce its size, for a matter of printing layout. The div that receives the chart is:

<div id="GraficoNotas" style="width: 900px; height: 400px;">

I created a css for printing to reduce the size of this div, but this css is not working. Follow him here:

@media print {
body {
margin-left:0px;
}
#GraficoNotas {
width:450px;
height:200px;
}
}

I’ve tried changing it to size in percentage and it didn’t work either. At the time of printing the chart size is always the same. Someone could give me a light?

Answer 1

This also happened to me.

I managed to solve it this way.

      <div id="AreaGraf">

             <div class="Gra">
                <div id="GraficoPizza"></div>
            </div>
            </div>
 #AreaGraf{

border-bottom-right-radius: 3px;

border-bottom-left-radius: 3px; 

padding: 10px; 

display: table; 

border-collapse: separate;

width:100%

}

.Graf{

float: left;

 min-height: 1px; 

}

#GraficoPizza{

max-width: 40%;

height: auto; 

display: table; 

border-collapse: separate;

}