Pivot Table - Pie Chart Issues

[Jose]

Hello,

I need help in resolving some (hopefully simple) issues I am facing while working with a pivot table and it's charts.

Here is a stackblitz sample of my code: https://stackblitz.com/edit/angular-reuse-content-h7zxsa?file=app.component.ts

The issues I face are mainly on the pie chart. Here is the list:

1. How can I provide the value (Y axis) on the legend? The legend only shows X axis data. On the accumulation chart, the legend shows both x and y, by default.
2. How can I make the pie chart take the Grand Total - Weighting % data? It always takes Portfolio 1 Weighting % data, even if I provide a columnHeader value.
3. Why is the dataLabel text invisible if a template is defined? If I provide a template for the dataLabel, sometimes the dataLabel displayed outside of the pie chart is invisible (color the same as background). This does not happen if I don't define a dataLabel template.
4. Is it possible to use market value data for bar and column charts, but use weighting % for pie chart?

Please help. Thank you.

Jose

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jose,

Please find the response below:

Query	Comments
How can I provide the value (Y axis) on the legend? The legend only shows X axis data. On the accumulation chart, the legend shows both x and y, by default.	By default, only the x axis displayed alone in the legend of the Accumulation chart and chart.   Please refer the below documentation for more details: Document: Pie & Doughnut in Angular Accumulation Chart component - Syncfusion
How can I make the pie chart take the Grand Total - Weighting % data? It always takes Portfolio 1 Weighting % data, even if I provide a columnHeader value.	By default, pivot chart will never display the grand totals in their chart series eventhough you provide it in columnHeader. This is the default behaviour of our pivot chart.
Why is the dataLabel text invisible if a template is defined? If I provide a template for the dataLabel, sometimes the dataLabel displayed outside of the pie chart is invisible (color the same as background). This does not happen if I don't define a dataLabel template.	You can apply the styles to the data label in the template property itself. Please refer the below code example.   Code Example: this.chartSettings = {       chartSeries: {         dataLabel: {           template:             '<div style="color: Black"><b>${point.x} (${(point.y * 100).toFixed(2)}%)</b></div>',         },       },     } as ChartSettings;   You can also overcome this by setting the background color using fill property in dataLabel option. Please refer the below code example.   Code Example: this.chartSettings = {       chartSeries: {         dataLabel: {           fill: 'Red',           template:             '<div style="color: white"><b>${point.x} (${(point.y * 100).toFixed(2)}%)</b></div>',         },       },     } as ChartSettings;   Please refer the below documentation for more details: Document: https://ej2.syncfusion.com/documentation/api/accumulation-chart/accumulationDataLabelSettingsModel/
Is it possible to use market value data for bar and column charts, but use weighting % for pie chart?	Using grouping bar and field list UI, you can dynamically switch the value fields based on your needs.   Meanwhile, we have modified your sample for your reference. Sample: https://stackblitz.com/edit/angular-reuse-content-ff5nej?file=app.component.html   Please refer the below documentation for more details about field list and grouping bar:  Document: Pivot Chart in Angular Pivot Table component - Syncfusion

Please let us know if any concern occurs.

Regards,

Angelin Faith Sheeba.

[Jose]

Hi Angelin,

Thank you for the information.

You are right about the legend only showing x-axis value.

I decided to add a different pivot view for the pie chart with a different data source settings; I made the portfolio name a row header instead of a column header.

For dataLabel issue, I just forced the chart background to be always white, dataLabel color to be always black and position Outside. I wish there was a better solution though.

Thank you for suggesting the grouping bar. I am not using it on this task, but will keep that option in mind.

I have a few more issues with the pie chart.

1. Is there a way for it to be left aligned? I want the chart to be on the left side and the legend on the right side. The chart is taking so much space and there's too much white space on the left side, while the legend is cramped on the right.
2. Not pie chart specific, but something about the drillThrough functionality of the pivot table. When I drill through, is there a way for me to specify the order of the columns on the grid before the popup is displayed?
3. Another drillThrough question, can I remove the labels on top of the grid? ​I don't want to see the Row and Column labels on top of the grid. I couldn't find a way to remove them.

Your help is always appreciated.

Thank you.

Regards,

Jose

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jose,

Please find the response below:

Query	Comments
Is there a way for it to be left aligned? I want the chart to be on the left side and the legend on the right side. The chart is taking so much space and there's too much white space on the left side, while the legend is cramped on the right.	Using pieCenter property in ChartSettings , you can align the pie chart. Please refer the below code example: Code Example: this.chartSettings = {       pieCenter: { x: '20%', y: '45%' }, } as ChartSettings;
Not pie chart specific, but something about the drillThrough functionality of the pivot table. When I drill through, is there a way for me to specify the order of the columns on the grid before the popup is displayed?	You can swap the order of fields in by using beginDrillThrough event. Please see the code example below:   Code Example: // Swap the fields by rearranging the columns as like as below.   beginDrillThrough(args): void {     let array = args.gridObj.columns;     let element = array[3];     array[3] = array[1];     array[1] = element;   }   Please check the following document for more information about “beginDrillThrough” event. Document: Drill Through in Angular Pivot Table component - Syncfusion
Another drillThrough question, can I remove the labels on top of the grid? ​I don't want to see the Row and Column labels on top of the grid. I couldn't find a way to remove them.	Please refer the below code to remove the row and column labels in drill Through dialog. Code Example: .e-drillthrough-body-header-container {   display: none; }

Meanwhile, we have modified your sample for your reference.

Sample: https://stackblitz.com/edit/angular-reuse-content-npxrdv?file=app.component.ts

Regards,

Angelin Faith Sheeba.

[Jose]

Hi Angelin,

Sorry for the late reply, I have been away for a few days.

Thank you for the information. That helped me a lot.

I have a few more questions regarding pivot view chart and drill through grid.

1. In accumulation chart, I can easily set the explode index. How can this be done in the pivot view pie chart with all it's expand and collapse functionality? I need to explode the index of the maximum value.
2. I noticed the format of the value in the drill through grid follows what is set on the data source settings. What I want to do is have the chart show the PercentageOfGrandTotal value in P2 format, while the grid shows the value in C2 format. Is this possible?
3. I noticed the drill through data does not respect the row grouping. If I drill through Domestic Shares​ asset type, it shows all asset types on the drill through grid. Is this intended?

Below is the stackblitz sample prepared for the above questions: 

https://stackblitz.com/edit/angular-reuse-content-q7oty4?file=app.component.ts

Regards,

Jose

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jose,

Please find the response below:

Query	Comments
In accumulation chart, I can easily set the explode index. How can this be done in the pivot view pie chart with all it's expand and collapse functionality? I need to explode the index of the maximum value.	Kindly perform left click on the chart series to show the expand/collapse context menu. So that you can perform drill operations there.
I noticed the format of the value in the drill through grid follows what is set on the data source settings. What I want to do is have the chart show the PercentageOfGrandTotal value in P2 format, while the grid shows the value in C2 format. Is this possible?	Using aggregateCellInfo, you can format the cell values. Please refer the below document to know more about aggregatecellInfo event.   Document: https://ej2.syncfusion.com/angular/documentation/pivotview/aggregation/#aggregatecellinfo
I noticed the drill through data does not respect the row grouping. If I drill through Domestic Shares​ asset type, it shows all asset types on the drill through grid. Is this intended?	In drillThrough dialog, the raw data of the selected summarized cell of the pivot table will be displayed alone. Please refer the below document to know more about drillThrough.   Document: https://ej2.syncfusion.com/angular/documentation/pivotview/drill-through/

If the above solution didn’t meet your requirement please give us the detailed query. So that it helps us to give the correct solution for that.

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.