apexcharts legend with values

Question

I have created a apexcharts. now i want to show all series data in legend like this i want like this

my code -

new ApexCharts(document.querySelector("#noOfPoc"), {
    series: [32, 2, 1, 1],
    chart: {
      height: 350,
      type: 'donut',
      toolbar: {
        show: true
      }
    },
    labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
    dataLabels: {
        formatter: function (val, opts) {
          return opts.w.config.series[opts.seriesIndex]
        },
    },
  }).render();

  new ApexCharts(document.querySelector("#noOfPoc"), {
    series: [pocCompleted, pocWip, pocOnHold, pocDrop],
    chart: {
      height: 350,
      type: 'donut',
      toolbar: {
        show: true
      }
    },
    labels: ['Completed', 'WIP', 'Drop', 'On Hold'],
    dataLabels: {
        formatter: function (val, opts) {
          return opts.w.config.series[opts.seriesIndex]
        },
    },
    legend: {
      position: 'left',
      offsetY: 80
    }
  }).render();

Answer 1

You can customize the legend label by providing the function which formats the legend label to the legend.formatter.

You can consider declaring the customLegendFormatter function to standardize the legend item output to all charts.

let customLegendFormatter = (seriesName, opts) => {
  return `
        <div class="legend-item-label">${seriesName}</div>
        <div class="legend-item-value">${opts.w.globals.series[opts.seriesIndex]}</div>
    `;
};

Provide the customLegendFormatter to legend.formatter.

new ApexCharts(document.querySelector('#noOfPoc'), {
  ...,
  legend: {
    formatter: customLegendFormatter,
  },
}).render();

Customize the styling for the label and value as below:

.legend-item-label {
  display: inline-block;
  min-width: 75px;
}

.legend-item-value {
  display: inline-block;
  min-width: 25px;
  text-align: right;
}

Demo @ StackBlitz