Odd space forming on top of Classic column Chart

24 views

Skip to first unread message

Chris

unread,

Oct 25, 2015, 6:31:48 AM10/25/15

to Google Visualization API

I am creating a column chart with Google Charts API -> http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

but for some reason an odd space is forming on top of the page.

This started happening after I changed the Material Chart library :

google.load("visualization", "1.1", {packages:["bar"]});
    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));


    var data = new google.visualization.DataTable();

and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):

   google.load('visualization', '1', {packages: ['corechart', 'bar']});
    var chart = new google.visualization.BarChart(document.getElementById('columnchart_material'));


    var data = google.visualization.arrayToDataTable([]);

This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview

What's wrong?

Daniel LaLiberte

unread,

Oct 25, 2015, 9:02:10 PM10/25/15

to Google Visualization API

The layout of the material charts is different from that of the classic charts. For the classic charts, the chart area and area above the chart are determined proportionally to the total height. But you can override the default by specifying a chartArea.top option. e.g.

chartArea: { top: 20 }

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4947fca2-35ba-41b2-8686-3cd201eb137f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Chris

unread,

Oct 26, 2015, 10:32:07 AM10/26/15

to Google Visualization API

Thanks...

this is what happens though --> http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

Is there a way to keep the subtitle (With the classic chart it disappears) and at the same time keep some spacing between it and the chart?

On Monday, October 26, 2015 at 2:02:10 AM UTC+1, Daniel LaLiberte wrote:

The layout of the material charts is different from that of the classic charts. For the classic charts, the chart area and area above the chart are determined proportionally to the total height. But you can override the default by specifying a chartArea.top option. e.g.

chartArea: { top: 20 }

On Sun, Oct 25, 2015 at 6:31 AM, Chris <kain...@gmail.com> wrote:

I am creating a column chart with Google Charts API -> http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

but for some reason an odd space is forming on top of the page.

This started happening after I changed the Material Chart library :

google.load("visualization", "1.1", {packages:["bar"]}); var chart = new google.charts.Bar(document.getElementById('columnchart_material')); var data = new google.visualization.DataTable();

and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):

google.load('visualization', '1', {packages: ['corechart', 'bar']}); var chart = new google.visualization.BarChart(document.getElementById('columnchart_material')); var data = google.visualization.arrayToDataTable([]);

This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview

What's wrong?

--
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 google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4947fca2-35ba-41b2-8686-3cd201eb137f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

Daniel LaLiberte

unread,

Oct 26, 2015, 11:13:52 AM10/26/15

to Google Visualization API

The class charts don't support the subtitle option, so that's why it doesn't show up.

On Mon, Oct 26, 2015 at 10:32 AM, Chris <kain...@gmail.com> wrote:

Thanks...
this is what happens though --> http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

Is there a way to keep the subtitle (With the classic chart it disappears) and at the same time keep some spacing between it and the chart?

On Monday, October 26, 2015 at 2:02:10 AM UTC+1, Daniel LaLiberte wrote:

The layout of the material charts is different from that of the classic charts. For the classic charts, the chart area and area above the chart are determined proportionally to the total height. But you can override the default by specifying a chartArea.top option. e.g.

chartArea: { top: 20 }

On Sun, Oct 25, 2015 at 6:31 AM, Chris <kain...@gmail.com> wrote:

I am creating a column chart with Google Charts API -> http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview

but for some reason an odd space is forming on top of the page.

This started happening after I changed the Material Chart library :

google.load("visualization", "1.1", {packages:["bar"]}); var chart = new google.charts.Bar(document.getElementById('columnchart_material')); var data = new google.visualization.DataTable();

and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):

google.load('visualization', '1', {packages: ['corechart', 'bar']}); var chart = new google.visualization.BarChart(document.getElementById('columnchart_material')); var data = google.visualization.arrayToDataTable([]);

This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview

What's wrong?

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4947fca2-35ba-41b2-8686-3cd201eb137f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
Daniel LaLiberte - 978-394-1058
dlali...@Google.com 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--

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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b3802358-7f33-4798-93ca-77c9e6f470de%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Reply all

Reply to author

Forward

0 new messages