Dual Axis Stacked Column Chart

Question

I'm trying to create a dual axis stacked column Chart using Google's Classic Charts. just like the Google's Material charts.

but there seems in classic one, the new stacks gets render over the previous one. check the code below: Switch in between classic and material, you will find the difference. Why classic? As it support tooltip modification unlike Material Chart.

Is it possible to have all stacks adjacent to the previous stack in classic chart?

google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {

  var button = document.getElementById('change-chart');
  var chartDiv = document.getElementById('chart_div');

  var data = google.visualization.arrayToDataTable([
    ['Galaxy', 'Distance', 'Brightness', 'Contrast', {
      type: 'string',
      role: 'tooltip',
      'p': {
        'html': true
      }
    }],
    ['Canis Major Dwarf', 8000, 23.3, 2.8, 'Irregular galaxy'],
    ['Sagittarius Dwarf', 24000, 3.5, 6.6, '5,000 ly'],
    ['Ursa Major II Dwarf', 30000, 14.3, 10.67, 'Half-light radius'],
    ['Lg. Magellanic Cloud', 50000, 0.9, 3.6, null],
    ['Bootes I', 60000, 13.1, 10.23, null]
  ]);

  var materialOptions = {
    width: 900,
    isStacked: true,
    chart: {
      title: 'Nearby galaxies',
      subtitle: 'distance on the left, brightness on the right'
    },
    series: {
      0: {
        axis: 'distance'
      }, // Bind series 0 to an axis named 'distance'.
      1: {
        axis: 'brightness'
      }, // Bind series 1 to an axis named 'brightness'.
      2: {
        axis: 'brightness'
      } // Bind series 1 to an axis named 'brightness'.
    },
    axes: {
      y: {
        distance: {
          label: 'parsecs'
        }, // Left y-axis.
        brightness: {
          side: 'right',
          label: 'apparent magnitude'
        } // Right y-axis.
      }
    }
  };

  var classicOptions = {
    width: 900,
    isStacked: true,
    series: {
      0: {
        targetAxisIndex: 0
      },
      1: {
        targetAxisIndex: 1
      },
      2: {
        targetAxisIndex: 1
      }
    },
    title: 'Nearby galaxies - distance on the left, brightness on the right',
    vAxes: {
      // Adds titles to each axis.
      0: {
        title: 'parsecs'
      },
      1: {
        title: 'apparent magnitude'
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Bar(chartDiv);
    materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }

  function drawClassicChart() {
    var classicChart = new google.visualization.ColumnChart(chartDiv);
    classicChart.draw(data, classicOptions);
    button.innerText = 'Change to Material';
    button.onclick = drawMaterialChart;
  }

  drawMaterialChart();
};

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="change-chart">Change to Classic</button>
  <br><br>
  <div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>

</html>

check [this answer](https://stackoverflow.com/a/62290913/5090771)... — WhiteHat, Oct 19 '21 at 12:27
@WhiteHat, This seems great but I have to create this for multiple y axis, almost 16, may looks very clumsy after having the graphs generated. — Rahul Raj, Oct 21 '21 at 04:55

Dual Axis Stacked Column Chart

0 Answers0