How to customize the data label content in Pivot Accumulation Charts in Angular?

3 mins read

Introduction

When working with Pivot Accumulation Charts, such as pie, doughnut, funnel, or pyramid, you may want to customize the appearance of data labels to enhance readability or provide additional information in Angular Pivot Table. By default, these accumulation charts display row headers as data labels. However, you can customize the data label content to meet your specific requirements. In this article, we will guide you through the process of customizing data label content with a code example.

Customizing data labels

To customize the data labels in accumulation charts, you need to use the template property within dataLabel. The template property allows you to define a custom HTML template for the data label. This property can include placeholders for data point values, which are then replaced with actual data when rendering the chart. This flexibility enables you to format and style the data labels to match your application’s design and requirements.

Here is a code example that demonstrates how to display values in the data labels and customize their visual style:

[app.component.html]

<ejs-pivotview #pivotview id="PivotView" [chartSettings]='chartSettings' [displayOption]='displayOption'>
</ejs-pivotview>

[app.component.ts]

import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings';
import { DisplayOption } from '@syncfusion/ej2-angular-pivotview';

public displayOption: DisplayOption;
public chartSettings: ChartSettings;

@ViewChild('pivotview')
public pivotObj: PivotView;

ngOnInit(): void {
  this.displayOption = { view: 'Chart' } as DisplayOption;
  
  this.chartSettings = {
  chartSeries: {
    type: 'Pie', // Specify the type of Accumulation chart
    dataLabel: {
      visible: true, // Make the data label visible
      position: 'Outside',  // Position the data label outside the chart
	   // Define the template for data label content
      template: '<div style="color: Red">${(point.y)}</b></div>',
    },
  },
} as ChartSettings;
}

In the above code, inside the chartSeries property, we specify the type as “Pie” to create a pie chart. Then, within the dataLabel, we set the visible property to true to make the data labels visible. We also set the position property to “Outside” to position the data labels outside the chart. Finally, we define the template property with an HTML string that represents the custom content of the data labels. In this example, the data label content is set to display the y value of the data point (i.e., point.y) and the text color is formatted to red, but you can change it to any desired value and color.

The following screenshot, which portrays the difference between before and after customizing data label,

Screenshots

Before customizing data label

After customizing data label

For a practical example of this code in action, you can refer to the following Sample in Stackblitz.

Conclusion

I hope you enjoyed learning how to customize the data label content in Pivot Accumulation.

You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)