Tips for showing both label and value on a pie slice in Apex charts

Question

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the attached image. Unfortunately, I have not been able to find a solution for this yet. Any guidance or direction would be greatly appreciated. Thank you.

screenshot [1]: https://i.stack.imgur.com/vMcHk.png

import { ChartComponent, ApexLegend, ApexDataLabels, ApexFill, ApexPlotOptions, ApexNonAxisChartSeries, ApexResponsive, ApexChart } from 'ng-apexcharts';

export interface ChartOptions {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  responsive: ApexResponsive[];
  labels: any[];
  legend: ApexLegend;
  dataLabels: ApexDataLabels;
  fill: ApexFill;
  plotOptions: ApexPlotOptions;
}

export class PieChartComponent implements OnInit {
  @ViewChild('chart') chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {}

  ngOnInit(): void {
    this.chartOptions = {
      series: [70.48, 29.52],
      chart: {
        width: 380,
        type: 'pie',
        toolbar: {
          tools: {
            download: false,
          },
        },
      },
      legend: {
        show: false,
      },
      labels: ['DII', 'FII'],
      fill: {
        colors: ['#ffe163', '#694fb6'],
      },
      plotOptions: {
        pie: {
          startAngle: 110,
        },
      },
      dataLabels: {
        style: {
          fontSize: '14',
          fontWeight: '600',
          colors: ['#000000', '#ffffff'],
        },
      },
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 400,
            },
            legend: {
              position: 'bottom',
            },
          },
        },
      ],
    };
  }
}

<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [labels]="chartOptions.labels"
    [responsive]="chartOptions.responsive"
    [legend]="chartOptions.legend"
    [dataLabels]="chartOptions.dataLabels"
    [fill]="chartOptions.fill"
    [plotOptions]="chartOptions.plotOptions"
  ></apx-chart>

javascript jquery css angular apexcharts

Answer 1

Answer №1

If you want to customize pie chart slice labels and values as seen in the attached screenshot, follow these instructions:

To achieve this, utilize the dataLabels option for customizing the label.

Include the following two options in your chart settings and apply them to the

<apex-chart></apex-chart>

component in your HTML file:

dataLabels: {
        enabled: true,
        formatter: function (val, opt) {
          // return [] used to change the line for the labels
          // each index element will get rendered to a new line
          /* Also casted to know (unknown) first and then to (string) as library is currently 
             accepting return type as string only. so it's a small manipulation 
             until library does not accept array. */
          switch (opt.seriesIndex) { // seriesIndex gives the position of slice
            case 0:
              return [ 'Housing', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 1:
              return [ 'Credit', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 2:
              return [ 'Transportation', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 3:
              return [ 'Living', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 4:
              return [ 'Miscellaneous', '$000.00 | ' + val as string + '%' ] as unknown as string;
            default:
              return val as string;
          }
        },
        style: {
          fontSize: "13",
          colors: ['#404040'],
          fontWeight: '100',
          fontFamily: 'Arial'
        },
},
plotOptions: {
        pie: {
          dataLabels: {
            offset: 20, // Moving the label position on slice
          }
        }
}

Implementing the above options will display the labels similar to those shown in the image below

https://i.stack.imgur.com/zvdJF.png

This guidance should be beneficial to you or others! Thank you.

Keep enjoying coding :-)

Answer 2

If you want to customize pie chart slice labels and values as seen in the attached screenshot, follow these instructions:

To achieve this, utilize the dataLabels option for customizing the label.

Include the following two options in your chart settings and apply them to the

<apex-chart></apex-chart>

component in your HTML file:

dataLabels: {
        enabled: true,
        formatter: function (val, opt) {
          // return [] used to change the line for the labels
          // each index element will get rendered to a new line
          /* Also casted to know (unknown) first and then to (string) as library is currently 
             accepting return type as string only. so it's a small manipulation 
             until library does not accept array. */
          switch (opt.seriesIndex) { // seriesIndex gives the position of slice
            case 0:
              return [ 'Housing', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 1:
              return [ 'Credit', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 2:
              return [ 'Transportation', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 3:
              return [ 'Living', '$000.00 | ' + val as string + '%' ] as unknown as string;
            case 4:
              return [ 'Miscellaneous', '$000.00 | ' + val as string + '%' ] as unknown as string;
            default:
              return val as string;
          }
        },
        style: {
          fontSize: "13",
          colors: ['#404040'],
          fontWeight: '100',
          fontFamily: 'Arial'
        },
},
plotOptions: {
        pie: {
          dataLabels: {
            offset: 20, // Moving the label position on slice
          }
        }
}

Implementing the above options will display the labels similar to those shown in the image below

https://i.stack.imgur.com/zvdJF.png

This guidance should be beneficial to you or others! Thank you.

Keep enjoying coding :-)

Tips for showing both label and value on a pie slice in Apex charts

Answer №1

Similar questions

History.pushState is not a function that I utilize in my work

trigger a border hover effect on an HTML element

Issue with ApexCharts Donut Chart legend labels not matching the specified data labels (stuck as 'series-1', etc.)

The labels assigned to buttons will direct users to unique links specifically designated for that button

Adjust the font size in CSS based on a specified range of values

The success notification transforms into a cancellation alert once the file has been successfully uploaded

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

Express Angular Node Template Render throwing an error: module 'html' not found

Is it possible to include a callback function as a property in an object in React?

Experience the feeling of releasing momentum by click and dragging the scroll

The attempt to connect with react-native-fetch-blob has not been successful

What is the best way to place two span elements beside each other?

What is the best way to trigger a snackbar notification when two passwords do not match?

A guide to implementing lazy loading using BXSlider

Dynamic TextField sizing

After running assets:install and assetic:dump, Font Awesome fonts are no longer functioning properly

The file upload issue with FormData append in CodeIgniter is causing errors

The problem arises when the body/html element is narrower than the browser window

"Troubleshooting the issue of null values in ASP.NET Core Razor Pages when using Ajax POST

Issues with expanding all nodes in the Angular Treeview function by Nick Perkins in London are causing difficulties