Change chart size for google charts at print time with @media print

Question

Change chart size for google charts at print time with @media print

Navigation

#1 by (0 votes)

0

I placed a chart with Google Charts on my page and to print it I want to reduce its size as a matter of print layout. The div that receives the graph 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 it here:

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

I have already tried to change to size in percentage and also did not solve. At the time of printing the size of the chart is always the same. Could someone give me a light?

css google-charts

asked by anonymous 19.04.2017 / 16:44

1 answer

What is wrong with requesting this script? Alert or Popup javascript after form validation in SharePoint 2013

score 0 · Accepted Answer

This also happened to me.

I was able to resolve it as follows.

      <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;

}