<div id="chartie-container" style="display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;">
    <div style="text-align: center;">
        <div id="chart1"></div>
        <div style="font-size: 18px; color: #857a59; font-family: 'Assistant', sans-serif; font-weight: bold">Accessing Charitable Food</div>
    </div>
    <div style="text-align: center;">
        <div id="chart2"></div>
        <div style="font-size: 18px; color: #857a59; font-family: 'Assistant', sans-serif; font-weight: bold">Not Accessing Charitable Food</div>
    </div>
</div>

<script>
    let chart1, chart2;

    chart1 = Highcharts.chart('chart1', {
        chart: {
            type: 'pie',
            height: 500,
            backgroundColor: null,
            events: {
                load: function() {
                    chart2 = Highcharts.charts.find(c => c !== chart1); // Find the second chart
                }
            }
        },
        title: {
            text: '',
        },
        tooltip: {
            enabled: false // Disable tooltip
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    distance: -50, // Adjust for better centering
                    formatter: function() {
                        return '<div class="pie2-text">' +
                               Math.round(this.percentage) +
                               '%<span style="font-size: 14px">' +
                               this.point.name +
                               '</span></div>';
                    },
                    style: {
                        fontSize: '30px',
                        color: '#FFFFFF',
                        textOutline: 'none',
                        fontWeight: 'normal',
                    },
                    useHTML: true,
                    verticalAlign: 'middle',
                    align: 'center'
                },
                point: {
                    events: {
                        mouseOver: function() {
                            const otherChart = this.series.chart === chart1 ? chart2 : chart1;
                            resetAllHighlights(chart1);
                            resetAllHighlights(otherChart);
                            highlightMatching(this.name, chart1);
                            highlightMatching(this.name, otherChart);
                            setOpacityForNonMatching(this.name, chart1);
                            setOpacityForNonMatching(this.name, otherChart);
                        },
                        mouseOut: function() {
                            resetAllHighlights(chart1);
                            resetAllHighlights(chart2);
                            resetOpacity(chart1);
                            resetOpacity(chart2);
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Accessing Charitable Food',
            data: [
                { name: 'White', y: 9, color: '#FBAE50' },
                { name: 'Black', y: 48, color: '#894000' },
                { name: 'Hispanic', y: 29, color: '#DC7A00' },
                { name: 'Other', y: 13, color: '#985500' }
            ],
            center: ['50%', '50%'],
            size: '60%'
        }],
responsive: {
            rules: [{
                condition: {
                    maxWidth: 600
                },
                chartOptions: {
                    series: [{
                        center: ['50%', '50%'],
                        size: '100%'
                    }]
                }
            }]
        }
    });

    chart2 = Highcharts.chart('chart2', {
        chart: {
            type: 'pie',
            height: 500,
            backgroundColor: null
        },
        title: {
            text: '',
        },
        tooltip: {
            enabled: false // Disable tooltip
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    distance: -50, // Adjust for better centering
                    formatter: function() {
                        return '<div class="pie2-text">' +
                               Math.round(this.percentage) +
                               '%<span style="font-size: 14px">' +
                               this.point.name +
                               '</span></div>';
                    },
                    style: {
                        fontSize: '30px',
                        color: '#FFFFFF',
                        textOutline: 'none',
                        fontWeight: 'normal',
                    },
                    useHTML: true,
                    verticalAlign: 'middle',
                    align: 'center'
                },
                point: {
                    events: {
                        mouseOver: function() {
                            const otherChart = this.series.chart === chart1 ? chart2 : chart1;
                            resetAllHighlights(chart1);
                            resetAllHighlights(otherChart);
                            highlightMatching(this.name, chart1);
                            highlightMatching(this.name, otherChart);
                            setOpacityForNonMatching(this.name, chart1);
                            setOpacityForNonMatching(this.name, otherChart);
                        },
                        mouseOut: function() {
                            resetAllHighlights(chart1);
                            resetAllHighlights(chart2);
                            resetOpacity(chart1);
                            resetOpacity(chart2);
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Not Accessing Charitable Food',
            data: [
                { name: 'White', y: 26, color: '#FBAE50' },
                { name: 'Black', y: 37, color: '#894000' },
                { name: 'Hispanic', y: 20, color: '#DC7A00' },
                { name: 'Other', y: 17, color: '#985500' }
            ],
            center: ['50%', '50%'],
            size: '60%'
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 600
                },
                chartOptions: {
                    series: [{
                        center: ['50%', '50%'],
                        size: '100%'
                    }]
                }
            }]
        }
    });

    // Highlight functions here
    function highlightMatching(name, chart) {
        if (!chart) return; // Check if the chart is defined
        chart.series.forEach(series => {
            series.data.forEach(point => {
                if (point.name === name) {
                    point.setState('hover');
                }
            });
        });
    }

    function resetAllHighlights(chart) {
        if (!chart) return; // Check if the chart is defined
        chart.series.forEach(series => {
            series.data.forEach(point => point.setState(''));
        });
    }

    function setOpacityForNonMatching(name, chart) {
        if (!chart) return; // Check if the chart is defined
        chart.series.forEach(series => {
            series.data.forEach(point => {
                if (point.name !== name) {
                    // Store the original color if not already stored
                    if (!point.originalColor) {
                        point.originalColor = point.color;
                    }
                    point.update({ color: Highcharts.color(point.originalColor).setOpacity(0.4).get() });
                }
            });
        });
    }

    function resetOpacity(chart) {
        if (!chart) return; // Check if the chart is defined
        chart.series.forEach(series => {
            series.data.forEach(point => {
                if (point.originalColor) {
                    point.update({ color: point.originalColor });
                }
            });
        });
    }
</script>

<style>
@media (min-width: 1024px) {
    #chartie-container > div {
        width: 50%;
    }
}
@media (max-width: 1023px) {
    #chartie-container > div {
        width: 100%;
    }
}
    #chart1, #chart2 {
        min-height: 400px; /* Ensure both charts have a minimum height */
    }
</style>