JSFiddle - React, Tailwind, and code Playground

by kikkoma

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="800" height="800"></canvas>

JavaScript

const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                    '宜蘭縣', '基隆市', '臺北市', '新北市', '桃園市', '新竹市', '新竹縣', '苗栗縣', '臺中市', '彰化縣', 
                    '南投縣', '雲林縣', '嘉義縣', '嘉義市', '臺南市', '高雄市', '屏東縣', '臺東縣', '花蓮縣', '連江縣', 
                    '澎湖縣', '金門縣'
                ],
                datasets: [{
                    label: '發布統計',
                    data: [
                        294, 133, 129, 316, 234, 135, 217, 297, 529, 268, 
                        542, 468, 474, 137, 569, 747, 497, 251, 306, 100, 
                        132, 101
                    ],
                    backgroundColor: '#FFAC1D',
                    borderColor: '#999999',
                    borderWidth: 1
                }]
            },
            options: {
            		indexAxis: 'y',
                scales: {
                    y: {
                        ticks: {
                            autoSkip: false, // 確保所有標籤都顯示
                            maxRotation: 0,
                            minRotation: 0
                        }
                    },
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });