Search code examples
javascriptjqueryapexcharts

ApexCharts - How do I move the data label on pie chart?

I am trying to move my data labels inward so that they are easier to read. If there is a way to dynamically center them in the slice, that would be ideal.

enter image description here

I've read the docs and tried modifying the X & Y.. i've tried -50 to 50 and nothing seems to be impacting the position of these labels. Am I missing something?

var PTDLastMonthOptions = {
    series: [35, 65],
    chart: {
        width: 300,
        type: 'pie',
    },
    legend: {
        position: 'bottom'
    },
    dataLabels: {
        enabled: true,
        offsetX: 50,
        offsetY: 50
    },
    colors: ['#00e396', '#ff4560'],
    labels: ['PAID', 'UNPAID']
};

var PTDLastMonthChart = new ApexCharts(document.querySelector("#ptdLastMonthChart"), PTDLastMonthOptions);
PTDLastMonthChart.render();

#Edit 1 - Adding codepen:

https://codepen.io/flashsplat/pen/NWzowbx

#Edit 2 - I am convinced this is a bug and have reported it as such:

https://github.com/apexcharts/apexcharts.js/issues/3537

Thanks!

Solution

  • Change offset in plotOptions not dataLabels https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset

    plotOptions: {
  pie: {
    dataLabels: {
      offset: -10,
    }, 
  }
}