1

I'm using Google Charts API 1.1 but i simply can't make grouped stacks. I've used the "targetAxisIndex" separating them into two axis and it kinda works but if i don't set max value for each yAxis they are scaled differently and it's useless once both of the grouped stacks actually refers to the same thing.

I'd like to know i can make something similar to this: http://www.highcharts.com/demo/column-stacked-and-grouped

Rony Vieira
  • 13
  • 1
  • 4

1 Answers1

3

If you use:

 var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
  };

That should force them to scale the same, and keep the same axis on both sides but hide the rightmost.

enter image description here

Where

var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 70, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 70, 578],
    ['2004', 397, 536, 313, 298]
]);

...

var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));

JSFiddle

Charles Clayton
  • 17,005
  • 11
  • 87
  • 120
  • 1
    This is actually what i'm doing. But doing it, means i have two vAxis when i have only one. If i add a third axis for example, it will also add another scale on the left like this: http://jsfiddle.net/6undwvxu and so on... What i'd like to know if it's possible create groups instead of creating new axis. – Rony Vieira Dec 03 '15 at 17:30
  • Interesting problem. I don't think it's possible to create additional groups like you want. I would just hide them using `vAxes.[index].textStyle.color` I updated my answer and your jsfiddle here for you to see: http://jsfiddle.net/crclayton/6undwvxu/4/ – Charles Clayton Dec 03 '15 at 17:44
  • Great workaround! I didn't think about changing styles... :) Thank you! – Rony Vieira Dec 03 '15 at 19:07
  • You're welcome! I've never encountered that problem of more than two axes showing up, so it was worth looking into. If you would like to accept my answer that'd be awesome! – Charles Clayton Dec 03 '15 at 19:10
  • @crclayton I am doing something similar - what would need to be done in order to make this scale horizontally (and have horizontal bars)? – Mkalafut Oct 17 '16 at 13:05
  • I want to add annotations in each bar of the stack. What can be the possible solution ? – krishna_tandon Jul 26 '20 at 20:33