如何更改 dataLabels 的字體大小？

Question

我在文檔中沒有看到任何提及如何調整 dataLabels 的fontSize 。

dataLabels 沒有提及字體大小：

    dataLabels: {
        offset: 0,
        minAngleToShowLabel: 10
    },

這是不可能的？

new Vue({
    el: "#app",
  data() {
    return {
        series: [4, 7, 3, 45, 32, 53],
        options: {  
                expandOnClick: true,

                dataLabels: {
                    minAngleToShowLabel: 50,
                    // offsetY: 1200,
                    style: { fontSize: '18px' } // this do not work!
                },  

                chart: {
                    width: 480,
                    type: 'pie',
                    
                },
                legend: {
                    // offsetX: 510,
                    fontSize: '16px',
                    height: 500,
                    width: 400,
                    horizontalAlign: 'right', 
                },
                title: {
                    text: 'Some name',
                    style: {
                            fontSize: '20px',
                    },      
                },              
                labels: ["aa", "bb", "cc", "dd", "ee", "ff"],
                responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                    width: 480
                    },
                    legend: {
                        position: 'right',
                        offsetY: 40,
                        fontSize: '16px',
                        
                    },
                            
                }
                }]

            },
    }
  },
  methods: {

  },
  components: {
    VueApexCharts
  }
})

https://jsfiddle.net/ayx8ez9k/

Answer 1

您可以在此頁面上找到一個很好的選項摘要： https://apexcharts.com/docs/options/datalabels/

style: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial, sans-serif',
      fontWeight: 'bold',
      colors: undefined
  },

Answer 2

您可以簡單地在 CSS class 中提供樣式。

  .apexcharts-pie-label{
    font-size:25px;
    }