Search code examples
apexcharts

How to display dataLabels for small pie slice?


I want display value of small slices of pie. I read the docs, but do not see any related to how to display data labels for small slices.

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

                dataLabels: {
                    minAngleToShowLabel: 50,
                    // offsetY: 1200,
                    style: { fontSize: '14px' }
                },  

                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/

enter image description here


Solution

  • To show labels of pie chart regardless they can fit or not, you can do this

    options = {
      plotOptions: {
        pie: {
          dataLabels: {
            minAngleToShowLabel: 0
          }
        }
      }
    }