Ajax перезагружает содержимое на вкладке Bootstrap

Проблема, похоже, кроется в нескольких местах. Для начала мои диаграммы, которые я пытаюсь открыть на третьей вкладке, не будут отображать JavaScript, привязанный к div. Я полагаю, это связано с тем, что они неактивны в классе HTML, который затем не загружает диаграммы <div> для отображения диаграмм.
Я не уверен, как это исправить, я просмотрел события DOM и функции загрузки Ajax. Но я не уверен, что это действительно правильный ответ.

Способы, которыми я пытался это исправить, - активировать вкладку, которая работает. Но скажем, в будущем я хочу графики на всех трех вкладках, все равно загружается только активная вкладка. Кроме того, я попытался поместить JS-код графика вершинных диаграмм в свою функцию щелчка, которая также работает. Но опять же, если вы нажмете на вкладки в порядке 1 -> 2 -> 3, вы загрузите 3 диаграммы.

Все это с использованием диаграмм Apex, Bootstrap, PHP и JS.

<!-- Nav tabs -->
<ul class = "nav nav-tabs">
    <li class = "nav-item"><a class = "nav-link active" href = "#home">Home</a></li>
    <li class = "nav-item"><a class = "nav-link" href = "#menu1">Menu 1</a></li>
    <li class = "nav-item"><a class = "nav-link" href = "#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class = "tab-content">
    <div id = "home" class = "container tab-pane active"><br>
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id = "menu1" class = "container tab-pane fade"><br>
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id = "menu2" class = "container tab-pane fade"><br>
        <div class = "row">
            <div class = "col-lg-6">
                <h3>Income categories</h3>
                <div id = "chart"></div>
            </div>
            <div class = "col-lg-6">
                <h3>Expense categories</h3>
                <div id = "chart2"></div>
            </div>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</script>
</body>
</html>
<!--Loads in the bar chart for analytics-->
<script src = "https://cdn.jsdelivr.net/npm/apexcharts"></script>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/Management/scripts/incomegraph.php"); ?>

Это диаграммы Apex

var options = {
    chart: {
        height: 350,
        type: 'bar',
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: true
    },
    series: [{
        data: [
            400,
            430,
            448,
            470,
            540]
    }],
    xaxis: {
        categories: [
            'Management Income',
            'Late Fee Income',
            'Application Fee Income',
            'Convience Fees',
            'Laundry',],
    }
}
var chart = new ApexCharts(document.querySelector("#chart"),options);

chart.render();

var options = {
    chart: {
        height: 350,
        type: 'bar',
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: true
    },
    series: [{
        data: [400, 430, 448, 470, 540]
    }],
    xaxis: {
        categories: [
            'Legal fees',
            'Utilities',
            'Cleaning and Maintenance',
            'Wages and Salaries',
            'Repairs',],
    }
}
var chart = new ApexCharts(document.querySelector("#chart2"),options);

chart.render();

Единственное сообщение об ошибке, которое я получаю, выглядит следующим образом:

TypeError: Cannot read property 'forEach' of undefined
    at i.value (apexcharts:6)
    at i.value (apexcharts:6)
    at apexcharts:6
    at it (apexcharts:6)
    at new $ (apexcharts:6)
    at i.value (apexcharts:6)
    at apexcharts:6

Я просмотрел сообщение в поисках помощи, но ни у кого нет достаточного ответа Bootstrap загружает содержимое AJAX в неактивную вкладкуПерезагрузка содержимого вкладки Ajaxвсплывающее окно начальной загрузки: перезагрузить содержимое с помощью ajax