Repeated Y-Axis Labels on Stacked Material Chart

65 views
Skip to first unread message

Drew Preston

unread,
Jun 7, 2019, 2:50:07 PM6/7/19
to Google Visualization API
Hi all, 

I'm new to Google Charts and was wondering if anyone had any advice for this issue. See my JSFiddle below: 


I started with a code template from the gallery and began modifying it for my purposes. You'll notice the labels for the y-axis are repeated 3 times. Is there a way to eliminate two of them so that it's only labeled once? 

Ray Thomas

unread,
Jun 8, 2019, 11:33:56 AM6/8/19
to Google Visualization API
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>

Drew Preston

unread,
Jun 10, 2019, 10:10:57 AM6/10/19
to Google Visualization API
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! 

Ray Thomas

unread,
Jun 10, 2019, 11:52:22 AM6/10/19
to Google Visualization API
Hi Drew,

I did wonder about that when I saw the graph but I can't recall seeing an example of showing such disparate values properly on the same chart.

If it is not possible, there are two methods that may work. Some charts allow use of the "explorer" option. This allows users to zoom in on a particular area of the chart. This is from https://stackoverflow.com/questions/20764157/zoom-google-line-chart and two fiddles - https://jsfiddle.net/4w626v2s/2/ and http://jsfiddle.net/duJA8/ - neither are particularly intuitive but they do work.

Something else I thought of was to create a new dataview of the data you've already got but not displaying the very large values. That view of the data can then be shown in a tooltip - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#placing-charts-in-tooltips

I'm no expert of the API, I don't even understand some of the questions people ask about it, but I've found you sometimes have to work with what they can do rather than what you wish they did.

Drew Preston

unread,
Jun 10, 2019, 3:03:44 PM6/10/19
to Google Visualization API
Thanks, Ray. I think you're right- I may have to rethink this inside what Charts is capable of. Thanks for your advice! 

Drew Preston

unread,
Jun 10, 2019, 5:31:06 PM6/10/19
to Google Visualization API
Wanted to leave a note on this thread of how I resolved this issue.  

I took Ray's advice of changing the axis label text size to zero for groups 2 and 3 but made sure to leave the view window the same for all three groups. Here's a snippet of the code: 

 vAxes: {
            1: {
              viewWindow: {
                min: 0,
                max: 450000
              }
            },
            2: {
            viewWindow: {
                min: 0,
                max: 450000},
                textStyle: { fontSize: 0}
            },  
            3: {
              viewWindow: {
                min: 0,
                max: 450000},
              textStyle: { fontSize: 0}
            }
          },
Reply all
Reply to author
Forward
0 new messages