字体大小不会改变 Chart.js 版本 3.2.1

Question

Trying to change the font size of a bar chart in chart.js version 3.2.1. The following does not work and so far the option I've found online pertain to different versions. How do you change the font size for the following bar chart. Thank you.

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    ticks: {
                        callback: function(val, index) {
                            // Hide the label of every 2nd dataset
                            return index % 2 === 0 ? this.getLabelForValue(val) : '';
                        },
                        color: 'red',
                        fontSize: 70,                    }
                }
            }
        }
    });
    </script>

Answer 1

try this

options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                },
                x: {
                    ticks: {
                        callback: function(val, index) {
                            // Hide the label of every 2nd dataset
                            return index % 2 === 0 ? this.getLabelForValue(val) : '';
                        },
                        color: 'red',
                        font:{
                              size:20
                            }                   
                  }
                }
            }
        }

if u want to change default font size use Chart.defaults.font.size option

https://www.chartjs.org/docs/latest/api/interfaces/fontspec.html