JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<input class="coh-container coh-ce-cpt_how_you_ll_be_assessed_chart-a586471a" id="enablePatterns" type="checkbox">
<div id="dynamicChartsContainer">

</div>

<script src="https://app.geckoform.com/gecko-embed/form.js?uuid=21FO00ggs6zzlc001wqoqpqlgl&user_id=106" id="gecko-form-embed-script"></script>

CSS

#dynamicChartsContainer {
  justify-content: space-between;
  display:flex;

  @include below-tablet {
    flex-direction: column;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const dummyData = {
    title: 'Assessment Chart',
    charts: [
      {
        labels: ['Exams', 'Course Work', 'Practical', 'Portfolio', 'Others'],
        data: [30, 20, 25, 15, 10]
      },
      {
        labels: ['Exams', 'Course Work', 'Practical', 'Portfolio', 'Others'],
        data: [35, 25, 20, 10, 10]
      }
    ]
  };

  const chartTitle = dummyData.title;
  if (!dummyData || !dummyData.charts) {
    return;
  }

  createDynamicCharts(dummyData.charts);

  function createDynamicCharts(chartDataArray) {
    const container = document.getElementById("dynamicChartsContainer");

    // Calculate the width for each chart container based on the number of charts
    const chartWidth = 100 / chartDataArray.length;

    chartDataArray.forEach((chartData, index) => {  
      // Creating and attaching container for Chart canvas.
      const chartDiv = document.createElement("div");
      chartDiv.className = "chart-container";
      chartDiv.id = `myPieChart${index + 1}`;
      chartDiv.style.width = `${chartWidth}%`;  // Set width of each chart container
      chartDiv.style.position = "relative";  // Add position relative to parent
      container.appendChild(chartDiv);

      // Initialize the chart
      Highcharts.chart(chartDiv, {
        chart: {
          type: 'pie',
          spacingLeft: 0,
          spacingTop: 0,
          padding: 0,
          marginRight: 0
        },
        title: {
          text: `YEAR ${index + 1}`,
          align: "low",
        },
        tooltip: {
          valueSuffix: "%",
          borderColor: "#8ae",
          shape: "rect",
          backgroundColor: "rgba(255, 255, 255, 0.94)",
          followPointer: false,
          stickOnContact: true,
        },
        accessibility: {
          keyboardNavigation: {
            focusBorder: {
              style: {
                lineWidth: 3,
                color: "#aa1111",
                borderRadius:...