Function updateChart

script.js:1031–1114

()

}

function updateChart() {
    const canvas = $('dnsChart');
    const ctx = canvas.getContext('2d');
    const isDark = document.documentElement.classList.contains('dark');

    const validData = chartData.filter(d => d.avg !== null).sort((a, b) => a.avg - b.avg);
    if (validData.length === 0) return;

    // Dynamic height
    const height = Math.max(300, Math.min(800, validData.length * 32 + 80));
    canvas.parentElement.style.height = `${height}px`;

    chartSection.classList.remove('hidden');

    if (dnsChart) dnsChart.destroy();

    const minVal = Math.min(...validData.map(d => d.avg));
    const scaleMin = Math.max(0, minVal * 0.7);

    const textColor = isDark ? '#94a3b8' : '#64748b';
    const gridColor = isDark ? 'rgba(148,163,184,0.08)' : 'rgba(100,116,139,0.1)';

    dnsChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: validData.map(d => {
                const flag = countryFlag(d.countryCode);
                return flag ? `${flag} ${d.name}` : d.name;
            }),
            datasets: [{
                label: 'Avg Response Time (ms)',
                data: validData.map(d => d.avg),
                backgroundColor: validData.map(d => getBarColor(d.avg, validData)),
                borderColor: validData.map(d => getBarColor(d.avg, validData, true)),
                borderWidth: 1,
                borderRadius: 3
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            interaction: { intersect: false, mode: 'y' },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: isDark ? '#1e293b' : '#fff',
                    titleColor: isDark ? '#e2e8f0' : '#1e293b',
                    bodyColor: isDark ? '#94a3b8' : '#64748b',
                    borderColor: isDark ? '#334155' : '#e2e8f0',
                    borderWidth: 1,
                    padding: 10,
                    cornerRadius: 6,
                    callbacks: {
                        label: function (context) {
                            const s = validData[context.dataIndex];
                            return [
                                `Avg: ${s.avg.toFixed(2)} ms`,