Sorry, the 'percent' and 'relative' stacking option is not supported by the material 'Bar' chart. If you can use the google.visualization.BarChart or ColumnChart, it should work. You might want to use the 'theme': 'material' option to get the material colors and fonts.
On Wed, Mar 13, 2019 at 12:16 PM Heywood Buzzfuddle <[email protected]> wrote: > I want to make a percent stacked bar chart. > > isStacked: true, > > will stack the bars for sure but > > isStacked: 'percent', > > does nothing. > > The vAxis and legend options appear to do nothing as well. > > Am I mixing material and classic? Am I doing something wrong? Is this a > known bug? > > <html> >> >> <head> >> >> <script type="text/javascript" src=" >>> https://www.gstatic.com/charts/loader.js";></script> >> >> <script type="text/javascript"> >> >> google.charts.load('current', {'packages':['bar']}); >> >> google.charts.setOnLoadCallback(drawChart); >> >> >>> function drawChart() { >> >> var data = google.visualization.arrayToDataTable([ >> >> ['Year', 'Paid', 'Suspended', 'Offered'], >> >> ['2009', 1030, 540, 1350], >> >> ['2010', 1000, 400, 200], >> >> ['2011', 1170, 460, 250], >> >> ['2012', 660, 1120, 300], >> >> ['2013', 1030, 540, 1350], >> >> ['2014', 1000, 400, 200], >> >> ['2015', 1170, 460, 250], >> >> ['2016', 660, 1120, 300], >> >> ['2017', 1030, 540, 1350], >> >> ['2018', 1000, 400, 200], >> >> ]); >> >> >>> var options = { >> >> isStacked: true, >> >> // height: 300, >> >> title: 'Awards Offered, Suspended, and Paid', >> >> subtitle: 'FY2009 - FY2018', >> >> legend: {position: 'bottom', maxLines: 3}, >> >> bar: { groupWidth: "61.8%" }, >> >> colors:['green'], >> >> vAxis: { >> >> format: 'decimal', >> >> minValue: 0, >> >> ticks: [0, .3, .6, .9, 1] >> >> } >> >> }; >> >> var chart = new >>> google.charts.Bar(document.getElementById('columnchart_material')); >> >> >>> chart.draw(data, google.charts.Bar.convertOptions(options)); >> >> } >> >> </script> >> >> </head> >> >> <body> >> >> <div id="columnchart_material" style="width: 800px; height: >>> 500px;"></div> >> >> </body> >> >> </html> >> >> > > > -- > 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/6811a668-3040-4f34-bdec-649ca92f795b%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/6811a668-3040-4f34-bdec-649ca92f795b%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> Cambridge 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 [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/CAOtcSJNBfnshKpJCwWjH3qXBy1LdxZPypYF6BP51t08nWcct8A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
