How can I stop my dashboard chart from overwriting my info panel in leaflet?

I have a leaflet map of water system boundaries where I'm coding an info panel to display information specific to that system when the user hovers over the system. I'd also like the info panel to show a couple of charts I coded using apex charts. Originally I had the charts in a dashboard but the map looks cleaner if I house it all in an info panel. However, my dashboard chart overwrites the other data in the info panel. I can see the info panel appear and then within a second the chart is the only thing in the info panel. Can I create different panels in the info panel so the chart will live happily on its own?

function createInfoPanel(){

    info_panel.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info',); // create a div with a class "info"
        this.update();
        return this._div;
    };

    // method that we will use to update the control based on feature properties passed
    info_panel.update = function (properties) {
        // if feature is highlighted
        if(properties){
            this._div.innerHTML = `<b>${properties['name']}</b>
                                    <br>Governance Type: ${properties['GovernanceType']}
                                    <br>Next Election Year: ${properties['UpcomingElectionYear']}
                                    <br>How is Leadership Chosen?: ${properties['Mechansim']}
                                    <br>Average Water Bill: $${properties['WaterBill']}
                                    <br>Bill Compared to County Average: ${properties['POA']}
                                    `
                                    ;
        }
        // if feature is not highlighted
        else
        {
            this._div.innerHTML = 'Hover over a Water System';
        }
    };

    info_panel.addTo(map);
}

// Function that defines what will happen on user interactions with each feature
function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

// on mouse over, highlight the feature
function highlightFeature(e) {
    var layer = e.target;

    // style to use on mouse over
    layer.setStyle({
        weight: 2,
        color: '#666',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
    createDashboard(layer.feature.properties);
    info_panel.update(layer.feature.properties);
   
}

// on mouse out, reset the style, otherwise, it will remain highlighted
function resetHighlight(e) {
    geojson_layer.resetStyle(e.target);
    info_panel.update() // resets infopanel
}

// on mouse click on a feature, zoom in to it
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

// Creating dashboard
function createDashboard(properties){

    // clear dashboard
    $('.dashboard').empty();

    console.log(properties)

    // chart title
    let title = 'Racial Demographics ' + properties['name'];
    // data values
    let data = [
            properties['Hispanic_Pop'],
            properties['White_Pop'],
            properties['Black_Pop'],
            properties['AIAN_Pop'],
            properties['Asian_Pop'],
            properties['NHOPI_Pop'],
            properties['OtherRace_Pop'],
            properties['TwoMore_Pop'],
    ]
    
    
    // data fields
    let fields = [
        'Hispanic Population',
        'White Population',
        'Black Population',
        'American Indian and Alaskan Native Population ',
        'Asian Population',
        'Native Hawaiian and other Pacific Islander Population',
        'Other Race Population',
        'Two or more Race Population',
    ]

    var options2 = {
        chart: {
            type: 'pie',
            height: 300,
            width: '100%',  
            animations: {
                enabled: false,
            }
        },
        title: {
            text: 'Water System Demographics ' + properties['name'],
        },
        series: data,
        labels: fields,
        legend: {
            position: 'right',
            offsetY: 0,
            height: 230,
          }
    };

    var chart = new ApexCharts(document.querySelector('.info'), options2)
    chart.render()
  
}