Hi Ray,
Thanks for your reply on Saturday. I tried this solution and while it fixed
my immediate ask, I found it created a few new problems. My apologies for
not making more clear what I'm looking for.
The main issue now is that the three data series are now displayed on
different y-axes. It adds a number of extra y-axis ticks and has the effect
of making the smallest column (a combined total of roughly 140k) the
tallest of the three. What I'm looking for ultimately is the three series
plotted against a single Y axis with one shared set of ticks, preferably at
100k intervals.
Thanks!
On Saturday, June 8, 2019 at 10:33:56 AM UTC-5, Ray Thomas wrote:
>
> It's odd behavior to show the y-axis like that but one way around it is to
> set the font size to 0 for those axis. Another method I've seen used is to
> set the font color to match the background, but I think setting the font
> size to 0 is the better of the two.
>
> 2: {
> textStyle: { fontSize: 0}
> },
> 3: {
> textStyle: { fontSize: 0}
> }
> }
>
> and here's the full code I used while testing this:
>
> <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([
> ['Month', 'NTC Health', 'NTC Pharmacy', 'UHC Health', 'UHC
> Pharmacy', 'WHP Health', 'WHP Pharmacy'],
> ['July 2018', 165733, 175169, 113492, 122547, 82610, 60578],
> ['2015', 1170, 460, 250, 2000, 0, 0],
> ['2016', 660, 1120, 300, 10, 0, 0],
> ['2017', 1030, 540, 350, 15, 0, 0]
> ]);
>
> var options = {
> chart: {
> title: 'Total Claims Paid',
> subtitle: 'By Health Plan',
> },
> height: 400,
> colors: ['#A1C73A', '#002060', '#E77924'],
> bars: 'vertical',
> isStacked: true,
> series: {
> 0: {
> targetAxisIndex: 1
> },
> 1: {
> targetAxisIndex: 1
> },
> 2: {
> targetAxisIndex: 2
> },
> 3: {
> targetAxisIndex: 2
> },
> 4: {
> targetAxisIndex: 3
> },
> 5: {
> targetAxisIndex: 3
> }
> },
> vAxes: {
> 1: {
> format: 'decimal',
> viewWindow: {
> min: 0,
> max: 450000
> }
> },
> 2: {
> textStyle: { fontSize: 0}
> },
> 3: {
> textStyle: { fontSize: 0}
> }
> }
> };
>
> 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/4af5f217-4511-45ce-84f4-39b0982c3a06%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
