<div class="container my-5">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="chart1-tab" data-bs-toggle="tab" data-bs-target="#chart1-tab-pane" type="button" role="tab" aria-controls="chart1-tab-pane" aria-selected="true">Bar Chart 1</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="chart2-tab" data-bs-toggle="tab" data-bs-target="#chart2-tab-pane" type="button" role="tab" aria-controls="chart2-tab-pane" aria-selected="false">Bar Chart 2</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="chart3-tab" data-bs-toggle="tab" data-bs-target="#chart3-tab-pane" type="button" role="tab" aria-controls="chart3-tab-pane" aria-selected="false">Bar Chart 3</button>
    </li>
  </ul>
  <div class="tab-content mt-5" id="myTabContent">
    <div class="tab-pane fade show active" id="chart1-tab-pane" role="tabpanel" aria-labelledby="chart1-tab" tabindex="0"> <canvas id="myChart1"></canvas>
    </div>
    <div class="tab-pane fade" id="chart2-tab-pane" role="tabpanel" aria-labelledby="chart2-tab" tabindex="0"> <canvas id="myChart2"></canvas></div>
    <div class="tab-pane fade" id="chart3-tab-pane" role="tabpanel" aria-labelledby="chart3-tab" tabindex="0"> <canvas id="myChart3"></canvas></div>
  </div>
</div>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");

body {
  font-family: "Poppins", sans-serif;
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 14px;
  color: white;
  background: rgba(0, 0, 0, 0.9);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
const charts = [
  {
    bars: {
      bar1: ["25", "76", "64", "33", "85", "46", "25"],
      bar2: ["32", "68", "77", "29", "88", "65", "60"]
    },
    labels: [
      "Label 1",
      "Label 2",
      "Label 3",
      "Label 4",
      "Label 5",
      "Label 6",
      "Label 7"
    ],
    legends: { legend1: "Male", legend2: "Female" },
    title: "Gender Comparison Graph"
  },
  {
    bars: {
      bar1: ["64", "52", "74", "33", "90", "69", "98", "27"],
      bar2: ["56", "58", "77", "48", "85", "78", "60", "34"]
    },
    labels: [
      "Label 1",
      "Label 2",
      "Label 3",
      "Label 4",
      "Label 5",
      "Label 6",
      "Label 7",
      "Label 8"
    ],
    legends: { legend1: "Male", legend2: "Female" },
    title: "Gender Comparison Graph"
  },
  {
    bars: {
      bar1: ["45", "62", "14", "23", "55", "67", "98", "17", "22"],
      bar2: ["48", "40", "35", "75", "85", "89", "90", "45", "64"]
    },
    labels: [
      "Label 1",
      "Label 2",
      "Label 3",
      "Label 4",
      "Label 5",
      "Label 6",
      "Label 7",
      "Label 8",
      "Label 9"
    ],
    legends: { legend1: "Male", legend2: "Female" },
    title: "Gender Comparison Graph"
  }
];
//console.log(Chart.defaults);
Chart.defaults.font.family = "Poppins, sans-serif";
Chart.defaults.color = "#073b4c";

initializeSingleChart(0);

tabEls.forEach(function (tabEl) {
  tabEl.addEventListener("shown.bs.tab", function (event) {
    const index = Array.from(tabEls).indexOf(event.target);
    initializeSingleChart(index);
  });
});

function initializeSingleChart(index) {
  const chart = charts[index];
  const chartEl = `myChart${++index}`;
  const chartInstance = Chart.getChart(chartEl);
  
  if (chartInstance !== undefined) {
    chartInstance.destroy();
  }

  const data = {
    labels: chart.labels,
    datasets: [
      {
        label: chart.legends.legend1,
        data: chart.bars.bar1,
        backgroundColor: "#dc3545"
      },
      {
        label: chart.legends.legend2,
        data: chart.bars.bar2,
        backgroundColor: "#198754"
      }
    ]
  };

  const config = {
    type: "bar",
    data,
    options: {
      plugins: {
        title: {
          display: true,
          text: chart.title,
          position: "top",
          font: {
            size: 25
          },
          padding: {
            top: 15,
            bottom: 15
          }
        },
        legend: {
          position: "bottom",
          labels: {
            padding: 30,
            font: {
              size: 14
            }
          }
        },
        tooltip: {
          enabled: false
        }
      },
      scales: {
        y: {
          ticks: {
            crossAlign: "left",
            callback: function (val) {
              return `${val}%`;
            }
          }
        }
      }
    }
  };

  const ctx = document.getElementById(chartEl).getContext("2d");
  new Chart(ctx, config);
}