i am making a dynamic chart bar in js

Question

this is how my chart.js is looks like.... This is static chart bar And i Have to make this chat dynamic

    (function($) {
    // "use strict";
    
    var dlabChartlist = function()
   {
    
    var screenWidth = $(window).width();
    let draw = Chart.controllers.line.__super__.draw;
    var chartBar = function()
    {
        

        var options = 
        {
              series: [
                {
                    name: 'Project',
                    data: [50, 58, 70, 40, 10, 70, 20],
                    // radius: 12,  
                }, 
                // {
                //   name: 'Cycling',
                //   data: [80, 40, 55, 20, 45, 30, 80]
                // }, 
                
            ],
                chart: {
                type: 'bar',
                height: 400,
                
                toolbar: {
                    show: false,
                },
                
            },
            plotOptions: {
              bar: {
                horizontal: false,
                columnWidth: '57%',
                endingShape: "rounded",
                borderRadius: 12,
              },
              
            },
            states: {
              hover: {
                filter: 'none',
              }
            },
            colors:['#FFA26D'],
            dataLabels: {
              enabled: false,
            },
            markers: {
        shape: "circle",
        },
        
        
            legend: {
                show: false,
                fontSize: '12px',
                labels: {
                    colors: '#000000',
                    
                    },
                markers: {
                width: 18,
                height: 18,
                strokeWidth: 10,
                strokeColor: '#fff',
                fillColors: undefined,
                radius: 12, 
                }
            },
            stroke: {
              show: true,
              width: 4,
              curve: 'smooth',
              lineCap: 'round',
              colors: ['transparent']
            },
            grid: {
                borderColor: '#eee',
            },
            xaxis: {
                 position: 'bottom',
              categories: ['Project1', 'Project2', 'Project3', 'Project4', 'Project5', 'Project6', 'Project7'],
              labels: {
               style: {
                  colors: '#787878',
                  fontSize: '13px',
                  fontFamily: 'poppins',
                  fontWeight: 100,
                  cssClass: 'apexcharts-xaxis-label',
                },
              },
              crosshairs: {
              show: false,
              }
            },
            yaxis: {
                labels: {
                    offsetX:-16,
                   style: {
                      colors: '#787878',
                      fontSize: '13px',
                       fontFamily: 'poppins',
                      fontWeight: 100,
                      cssClass: 'apexcharts-xaxis-label',
                  },
              },
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'white',
                    type: "vertical",
                    shadeIntensity: 0.2,
                    gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 50],
                    colorStops: []
                }
            }, 
            tooltip: {
              y: {
                formatter: function (val) {
                    
                  return  val + " Days"
                }
              }
            },
            };

            var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
            chartBar1.render();
   }

And this is where im showing index.html where i m showing this chart

    <div class="tab-pane fade active show" id="monthly">
      <div id="chartBar" class="chartBar"></div>
    </div>  

I don't have enough knowledge about js and i want this chart bar dynamic.....

and i m using mysql

how can i convert it into dynamic chart