Stacked and grouped column google charts

I have a set of

var data = new google.visualization.arrayToDataTable([
    ['Month', 'Rate', 'Interest', 'Principle', 'Balance','New Balance'],
    ['Jan', 321, 600, 816, 319, 890],
    ['Feb', 163, 231, 539, 594, 678],
   ]);

I want to Stack and Group the above data 2 at a time (Rate,Interest), (Principle, Balance) and last one New Balance as a separate Bar. How can this be achieved in Google charts.

I am new to this whole thing..any help appreciated here is some on info to get grouping data into 2 bars how can this be improved to fit my requirement.

How to make a grouped bar stack with Google charts?

Solution 1:

using the option isStacked, if set to true, stacks the elements for all series at each domain value.

this means the values for all columns for each row will be displayed in one stack

as such, to create separate stacks, the data will need to be separated into rows

something like the following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Month\nCategory', 'Bottom', 'Top'],
    ['Rate / Interest', 321, 600],
    ['Principle / Balance\nJan', 816, 319],
    ['New Balance', 890, null],
    ['Rate / Interest', 163, 231],
    ['Principle / Balance\nFeb', 539, 594],
    ['nNew Balance', 678, null],
  ]);

  var options = {
    height: 400,
    isStacked: true,
    legend: 'none',
    width: 800
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>