Hello,
I am trying to get my chart to be responsive in its size. Thank you for any
help!
I tried the following in the options:
var options = {
hAxis: {title: 'February', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0, title: '% of students'},
colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'],
lineWidth:4,
areaOpacity: 0.15,
width:'80vw',
...
is using default width and height of 400x200:
<div style="position: relative;"><div dir="ltr" style="position: relative;
width: 400px; height: 200px;">
<div aria-label="A chart." style="position: absolute; left: 0px; top: 0px;
width: 100%; height: 100%;"><svg width="400" height="200" aria-label="A
chart." style="overflow: hidden;"><defs id="defs"><clipPath
id="_ABSTRACT_RENDERER_ID_0"><rect x="67" y="38" width="267"
height="124"></rect></clipPath></defs><rect x="0" y="0" width="400"
height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect
x="345" y="38" width="44" height="29" stroke="none" stroke-width="0"
fill-opacity="0" fill="#ffffff"></rect><g><rect x="345" y="38" width="44"
height="11" stroke="none" stroke-width="0" fill-opacity="0"
fill="#ffffff"></rect><g><text text-anchor="start" x="371" y="47.35"
font-family="Arial" font-size="11" stroke="none" stroke-width="0"
fill="#222222">Attendance</text></g><rect x="345" y="43.5" width="22"
height="5.5" stroke="none" stroke-width="0" fill-opacity="0.15"
fill="#20aabc"></rect><path d="M345,43.5L367,43.5" stroke="#20aabc"
stroke-width="4" fill-opacity="1" fill="none"></path></g><g><rect x="345"
y="56" width="44" height="11" stroke="none" stroke-width="0"
fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="371"
y="65.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0"
fill="#222222">Emotion</text></g><rect x="345" y="61.5" width="22"
height="5.5" stroke="none" stroke-width="0" fill-opacity="0.15"
fill="#20bc4d"></rect><path d="M345,61.5L367,61.5" stroke="#20bc4d"
stroke-width="4" fill-opacity="1" fill="none"></path></g></g><g><rect
x="67" y="38" width="267" height="124" stroke="none" stroke-width="0"
fill-opacity="0" fill="#ffffff"></rect><g
clip-path="url(http://localhost:3001/edu/DenverPublicSchools/school/Amesse?type=elementary#_ABSTRACT_RENDERER_ID_0)"><g><rect
x="67" y="161" width="267" height="1" stroke="none" stroke-width="0"
fill="#cccccc"></rect><rect x="67" y="130" width="267" height="1"
stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="100"
width="267" height="1" stroke="none" stroke-width="0"
fill="#cccccc"></rect><rect x="67" y="69" width="267" height="1"
stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="67" y="38"
width="267" height="1" stroke="none" stroke-width="0"
fill="#cccccc"></rect></g><g><g><path
d="M67.5,161.5L67.5,161.5L67.5,63.099999999999994L134,136.9L200.5,69.25L267,100L333.5,87.7L333.5,161.5L333.5,161.5Z"
stroke="none" stroke-width="0" fill-opacity="0.15"
fill="#20aabc"></path></g><g><path
d="M67.5,161.5L67.5,161.5L67.5,56.95L134,118.45L200.5,81.55L267,81.55L333.5,100L333.5,161.5L333.5,161.5Z"
stroke="none" stroke-width="0" fill-opacity="0.15"
fill="#20bc4d"></path></g></g><g><rect x="67" y="161" width="267"
height="1" stroke="none" stroke-width="0"
fill="#333333"></rect></g><g><path
d="M67.5,63.099999999999994L134,136.9L200.5,69.25L267,100L333.5,87.7"
stroke="#20aabc" stroke-width="4" fill-opacity="1" fill="none"></path><path
d="M67.5,56.95L134,118.45L200.5,81.55L267,81.55L333.5,100" stroke="#20bc4d"
stroke-width="4" fill-opacity="1"
fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="67.5"
y="176.68333333333334" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#222222">02/1</text></g><g><text
text-anchor="middle" x="134" y="176.68333333333334" font-family="Arial"
font-size="11" stroke="none" stroke-width="0"
fill="#222222">02/8</text></g><g><text text-anchor="middle" x="200.5"
y="176.68333333333334" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#222222">02/15</text></g><g><text
text-anchor="middle" x="267" y="176.68333333333334" font-family="Arial"
font-size="11" stroke="none" stroke-width="0"
fill="#222222">02/22</text></g><g><text text-anchor="middle" x="333.5"
y="176.68333333333334" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#222222">02/28</text></g><g><text text-anchor="end"
x="56" y="165.35" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end"
x="56" y="134.6" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#444444">25</text></g><g><text text-anchor="end"
x="56" y="103.85" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#444444">50</text></g><g><text text-anchor="end"
x="56" y="73.1" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#444444">75</text></g><g><text text-anchor="end"
x="56" y="42.35" font-family="Arial" font-size="11" stroke="none"
stroke-width="0" fill="#444444">100</text></g></g></g><g><g><text
text-anchor="middle" x="200.5" y="193.01666666666668" font-family="Arial"
font-size="11" font-style="italic" stroke="none" stroke-width="0"
fill="#333333">February</text><rect x="67" y="183.66666666666669"
width="267" height="11" stroke="none" stroke-width="0" fill-opacity="0"
fill="#ffffff"></rect></g><g><text text-anchor="middle" x="31.85" y="100"
font-family="Arial" font-size="11" font-style="italic"
transform="rotate(-90 31.85 100)" stroke="none" stroke-width="0"
fill="#222222">% of students</text><path
d="M22.499999999999996,162L22.500000000000004,38L33.50000000000001,38L33.5,162Z"
stroke="none" stroke-width="0" fill-opacity="0"
fill="#ffffff"></path></g></g><g></g></svg><div aria-label="A tabular
representation of the data in the chart." style="position: absolute; left:
-10000px; top: auto; width: 1px; height: 1px; overflow:
hidden;"><table><thead><tr><th>Month</th><th>Attendance</th><th>Emotion</th></tr></thead><tbody><tr><td>02/1</td><td>80</td><td>85</td></tr><tr><td>02/8</td><td>20</td><td>35</td></tr><tr><td>02/15</td><td>75</td><td>65</td></tr><tr><td>02/22</td><td>50</td><td>65</td></tr><tr><td>02/28</td><td>60</td><td>50</td></tr></tbody></table></div></div></div><div
aria-hidden="true" style="display: none; position: absolute; top: 210px;
left: 410px; white-space: nowrap; font-family: Arial; font-size:
11px;">Emotion</div><div></div></div>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/1891d221-d726-4d37-8519-4e1d538d4f9b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
