How to fix overlapping Google Chart legend

Question

This has been something I\'ve been working on for hours now and I can\'t seem to find a solution that works. I have a page (ASP.NET Core) that has bootstrap tabs on it. Each t

Answer 1

as you've gathered,
the problem is a result of drawing the chart while the tab is hidden

need to wait until the tab is shown before drawing for the first time

as such, only draw the first chart using the callback...

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

once the callback fires, you don't have to call it again,
you can draw as many charts as needed afterwards

then wait for the tabs to be clicked before drawing the next chart...

here, a switch statement is used on the href attribute,
to determine which tab was clicked,
then draw its chart...

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    switch ($(e.target).attr('href')) {
      case '#home':
        drawMonthChart();
        break;

      case '#menu1':
        drawMonthAndQuarterChart();
        break;

      case '#menu2':
        drawLeaseAdminChart();
        break;

      case '#menu3':
        drawFourthChart();
        break;
    }
});