สถานการณ์ที่ 1: "ทุบให้จม"

สถานการณ์ที่ 2: "เชือดนิ่มๆ"

				
					<!-- Load Chart.js (ใส่ใน Head หรือ Footer ก็ได้) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Chart.js Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const tooltipTitleCallback = (tooltipItems) => {
        const item = tooltipItems[0];
        let label = item.chart.data.labels[item.dataIndex];
        if (Array.isArray(label)) return label.join(' ');
        return label;
    };

    const sharedChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: { title: tooltipTitleCallback },
                backgroundColor: '#2C3E50',
                titleColor: '#F5F5F5',
                bodyColor: '#F5F5F5',
                titleFont: { family: "'Kanit', sans-serif" },
                bodyFont: { family: "'Kanit', sans-serif" }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#e0e0e0' },
                ticks: { font: { family: "'Kanit', sans-serif" } }
            },
            x: {
                grid: { display: false },
                ticks: { font: { family: "'Kanit', sans-serif" } }
            }
        }
    };

    new Chart(document.getElementById('reboundChart'), {
        type: 'bar',
        data: {
            labels: ['< -10,000', '-10k ถึง -7k', '-7k ถึง -5k'],
            datasets: [{
                label: 'S50 เปลี่ยนแปลง (เฉลี่ย)',
                data: [142.1, 45.3, 161.1],
                backgroundColor: ['#2ECC71', '#58D68D', '#82E0AA'],
                borderColor: '#28B463',
                borderWidth: 1,
                borderRadius: 4
            }]
        },
        options: sharedChartOptions
    });

    new Chart(document.getElementById('downtrendChart'), {
        type: 'bar',
        data: {
            labels: ['-5k ถึง -3k', '-3k ถึง -1k'],
            datasets: [{
                label: 'S50 เปลี่ยนแปลง (เฉลี่ย)',
                data: [-244.6, -178.9],
                backgroundColor: ['#E74C3C', '#EC7063'],
                borderColor: '#CB4335',
                borderWidth: 1,
                borderRadius: 4
            }]
        },
        options: { ...sharedChartOptions, scales: { ...sharedChartOptions.scales, y: { ...sharedChartOptions.scales.y, beginAtZero: false } } }
    });
});
</script>