

document.addEventListener("DOMContentLoaded", () => {

  
const xArray = window.courseNames;
const yArray = window.courseCounts;
  const data = [{
        labels: xArray,
        values: yArray,
        type: "pie",

        textinfo: "label+percent",   
        textposition: "inside",      
        insidetextorientation: "auto",

        textfont: {
            size: 14,
            color: "white"
        },

        hoverinfo: "label+percent+value",

        marker: {
            line: {
                color: "#ffffff",
                width: 2
            }
        }
    }];

  const layout = {
        title: {
            text: "CDLB COLLEGE COURSES",
            font: { size: 18 }
        },

        showlegend: true,

        legend: {
            orientation: "h",
            y: -0.2,
            x: 0.5,
            xanchor: "center"
        },

        paper_bgcolor: "rgba(0,0,0,0)",
        plot_bgcolor: "rgba(0,0,0,0)",

        height: 350,
        width: 350,

        margin: { t: 50, b: 80, l: 0, r: 0 }
    };

    Plotly.newPlot("myPlot", data, layout, {displayModeBar: false});

});