How to change ApexCharts label size, font and position in the pie chart

February 1, 2023

I’m using ApexCharts.js to add pie chart component on my page.
And I need to change the label size, font and position to bottom.

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
  <div id="pieChart"></div>
  <script>
    var options = {
      series: [10, 20, 30, 50],
      chart: {
        height: 480,
        type: 'pie',
      },
      labels: ["series_1", "series_2", "series_3", "series_4"],
      colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
      responsive: [{
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
          legend: {
            position: 'bottom'
          }
        }
      }]
    };
    var chart = new ApexCharts(document.querySelector("#pieChart"), options);
    chart.render();
  </script>
</body>

Finally, I want my chart to look like this

Do you have any idea how to modify the code so to get the same result as it is on the picture?

>Solution :

I added your labels to the bottom.
You can edit the spacing by modifying:

itemMargin: {
  horizontal: 5,
  vertical: 0
},

Docs can be found here: https://apexcharts.com/docs/options/legend/

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
  <div id="pieChart"></div>
  <script>
    var options = {
      series: [10, 20, 30, 50],
      chart: {
        height: 480,
        type: 'pie',
      },
      labels: ["series_1", "series_2", "series_3", "series_4"],
      colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
      legend: {
        show: true,
        showForSingleSeries: false,
        showForNullSeries: true,
        showForZeroSeries: true,
        position: 'bottom',
        horizontalAlign: 'center', 
        fontSize: '18px',
        fontFamily: 'Helvetica, Arial',
        fontWeight: 400,
        itemMargin: {
            horizontal: 15,
            vertical: 0
        },
      },
      responsive: [{
        breakpoint: 480,
        options: {
          chart: {
            width: 200
          },
        }
      }]
    };
    var chart = new ApexCharts(document.querySelector("#pieChart"), options);
    chart.render();
  </script>
</body>