Customizing Tooltips

[Chris]

I am trying to customize the tooltips in a bar chart following the documentation -> https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

I add an extra columns for the Custom Tooltips:

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

            data.addColumn('string', 'Country');

            data.addColumn('number', 'Migrants entering a country');

            data.addColumn('number', 'Migrants leaving a country');

            data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}})

and set the options here 

var optionsCount = {

              title: 'Net Migrants rate',

              subtitle: 'Migrant(s) per 1,000 population',

              tooltip: {isHtml: true},

              bars :'horizontal',

              width: 880,

              height : 400,

              

              hAxis: {

                viewWindow:{

                     min: -30, max: 30  ,

                  },

              },

              

              isStacked:"true",

              bar: {groupWidth: "90%"},

              domainAxis: {

                  textStyle: {

                      fontSize: 12

                  }

              },

              // legend: { position: "none" },

              ticks: [0, 10, 20, 30, 40] 

            };

but the label for 'Qatar' is not working. Here is the complete code -> http://plnkr.co/edit/8lU9fjRHLQjP5xI2PCBf?p=preview

[Sergey Grabkovsky]

Hi Chris,

Our Material charts are new, and in beta, and so they currently don't support a lot of the features that you might be used to, custom tooltips being one of those features (other features include the style role, chart area positioning, annotations, and custom ticks; though this is by no means a complete list). Your best bet would be to use a Classic chart (i.e. google.visualization.BarChart). If you set the option, theme: 'material', you can get a classic chart with Material styling.

--
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/860a0cf7-a381-4dee-8b8d-73818bb3dc9d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chris]

Thank you, it worked with your solution.... but the code is creating a huge amount of space upon the chart ->  http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview Why?

[Sergey Grabkovsky]

I'm not sure what you mean, Chris, that chart looks properly rendered to me. Exactly which space do you consider extra?

--
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/98844936-4ac2-4312-be70-4c9329a54f83%40googlegroups.com.

[Chris]

Sorry, copied the wrong Plucker. This is what I meant -> http://plnkr.co/edit/HrgnF2QTCbQzTWeKtu5A?p=preview

Here https://groups.google.com/forum/#!topic/google-visualization-api/mB_-ey_0268 they suggested to use the

chartArea: {}

option. It works but at the same time it it becomes too clingy and the subtitles doesn't exist anymore. 

Is there a way to obtain a Title + Subtitle and get some spacing in between?

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

Oh! I think I understand. You're talking about the whitespace at the top and the bottom of the chart. The CoreCharts use a different layout philosophy than the Material charts. The Material charts will compute the layout outside in, whereas the CoreCharts will compute the position of the chart area and lay out everything else around that (inside out). You can configure this using the chartArea.top and chartArea.height options, or if you switch to version 43 (which currently can only be loaded as a frozen version) you can use chartArea.top and chartArea.bottom.

As for the subtitle, Classic charts (CoreCharts) don't have the ability to show a subtitle. This is a new feature that we introduced with our Material charts. I'm afraid you'll have to consider the tradeoffs of which features you need.

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/98844936-4ac2-4312-be70-4c9329a54f83%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

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/ffea120a-b28e-4d7a-a76d-a00b9a351805%40googlegroups.com.