Pivot Accumulation Chart (Pie) get smaller as the legend items increase

11 Replies
2 Participants
Marked answer

Created by
AK Anand Kulkarni

Platform
Blazor

Platform
Blazor

Control
Pivot Table

Created On
Jul 13, 2023 11:17 AM UTC

Last Activity On
Aug 3, 2023 12:54 PM UTC

Want to subscribe?
SIGN IN

Hi,

I've implemented a Pie chart using Pivot accumulation charts in the following way:

<PivotChartSettings Title="@GetChartTitle()"

Palettes=@_colours>

</PivotChartDataLabel>

</PivotChartLegendSettings>

</PivotChartEmptyPointSettings>

</PivotChartSeries>

</PivotChartAreaSettings>

</PivotChartCommonFont>

<PivotChartZoomSettings EnableDeferredZooming=false EnableMouseWheelZooming=false

EnableSelectionZooming=true EnablePinchZooming=true></PivotChartZoomSettings>

</PivotChartSettings>

The size decreases as I drill into it and the legend items increase.

Is it possible to not show paging and have them listed instead?

Also notice that 'Legend Shape' is not being applied!

Please note that the chart does not take full height even after mentioning 100 % in the height

Thanks and Regards,

Anand Kulkarni

11 Replies 1 reply marked as answer

RG Rajeshkannah G Syncfusion Team July 14, 2023 04:20 PM UTC

Hi Anand,

Please find the response below

Response	Comments
Please note that the chart does not take full height even after mentioning 100 % in the height	We would like to inform you that the Pivot chart uses the chart component, which always displays the chart area along with the legends by default. As a result, when the height is set to " 100% ", the entire Pivot Chart, including legends, is displayed inside the provided height. This is the actual behavior of the Pivot Chart.
The size decreases as I drill into it and the legend items increase	When you set the legend position to Top and drill the member item, the number of legend items increases in relation to the points displayed in the chart. As a result, as we stated above, the Pie Chart will minimize its size to fit within the given height, along with its legend items. This is the actual behavior of the Pivot chart. Initial Render After Drill
Is it possible to not show paging and have all legends listed instead?	When the legend items in the pivot chart exceed the legend bounds, paging for legends is enabled by default. And there is currently no option to disable the paging option in the Pivot Chart.
Also notice that 'Legend Shape' is not being applied	We have checked the given sample and found that the Legend Shape is set to “Circle” which is applied properly to the legends. Also, because the InnerRadius property is set to the pie chart, the legend shape will reflect the inner radius as well as shown below.

Meanwhile we have prepared a sample for your reference.

Please let us know if you have any concerns.

Regards,

Rajeshkannah G

Attachment: Pivot_Table_ad43db00.zip

AK Anand Kulkarni July 19, 2023 09:32 AM UTC

Hi Rajeshkannah,

If you add a div with height 100% and then the pivot chart inside it, can it please shift down when the legend items increase?

If I add a PivotPieChartCenter tag and then give it a Y value, it hides the pie chart, shouldn't it go down as the height is set to 100%? why is it not visible?

Please replace the chart.razor html with this:

</PivotViewColumns>

</PivotViewRows>

</PivotViewValues>

</PivotViewFormatSettings>

</PivotViewDataSourceSettings>

</PivotChartDataLabel>

</PivotChartLegendSettings>

</PivotChartEmptyPointSettings>

</PivotChartSeries>

</PivotChartAreaSettings>

</PivotChartCommonFont>

<PivotChartZoomSettings EnableDeferredZooming=false EnableMouseWheelZooming=false

EnableSelectionZooming=true EnablePinchZooming=true></PivotChartZoomSettings>

</PivotChartSettings>

</SfPivotView>

</div>

Thanks and Regards,

Anand Kulkarni

AK Anand Kulkarni July 19, 2023 09:37 AM UTC

Hi Rajeshkannah,

Also please try the following in chart Legend:

</PivotChartLegendSettings>

Add a width and height.

I have added a height so that the pie chart retains it shape even after increased number of legend items.

After adding the width and height, the alignment does not work.

Thanks and Regards,

Anand Kulkarni

RG Rajeshkannah G Syncfusion Team July 21, 2023 03:21 AM UTC

Hi Anand,

Please find the response below.

Query	Comments
If I add a PivotPieChartCenter tag and then give it a Y value, it hides the pie chart, shouldn't it go down as the height is set to 100%? why is it not visible?	We would like to inform you that the pivot chart is always rendered within its container element. As a result, the PivotPieCenter option allows us to only display the chart at the desired position within the chart's container element. For example, if the "Y" property in the PivotPieCenter tag is set to "100%", the center of the pie chart will be drawn where the height "100%" meets within the chart's container element. As a result, as shown in the screenshot below, the bottom portion of the pie chart is hidden. This is the Pie chart's actual behavior.
If you add a div with height 100% and then the pivot chart inside it, can the chart please shift down when the legend items increase?	By default, the pivot chart will be drawn based on the height specified during initial rendering, and the height will not be updated further when legend items increase. However, you can display the pie chart series statically by using the "Radius" property. When the Radius property is set to static (for example: “200px”), the pie chart will remain the same size as in the initial rendering even after the legend items are increased. Please note that, while using static radius, it may cause an overlap with legends to display both pie chart and its legend items within the chart's container element when more legend items occur. Furthermore, currently, we don’t have Radius support in the Pivot Chart; however, it will be available by Volume 2 SP release which is scheduled to be rolled out by end of July,2023. You can track the status using the below feedback link. Feedback : https://www.syncfusion.com/feedback/44532/to-provide-radius-support-for-pie-chart-series-in-pivot-chart Output screenshot
After adding the width and height, the legend alignment does not work.	Sorry for the inconvenience. We could reproduce the issue and we are currently validating this issue with our internal team. We will update you further details by today.

Please let us know if you have any concerns.

Regards,

Rajeshkannah G

AK Anand Kulkarni July 21, 2023 08:21 AM UTC

Hi Rajeshkannah,

The point I'm trying to make is that even after adding a parent div with 100% height, the pie chart container does not take 100% height. This does not happen with pivot bar, line, column charts, they take the height of the parent div. Only with the pie chart, it's height never goes to 100% even after a parent div with a 100% height.

The radius will not resolve the issue I'm reporting. It's the pie chart container height that's not being set.

Please let me know if you want me to elaborate on it.

Thanks,

Anand Kulkarni

RG Rajeshkannah G Syncfusion Team July 24, 2023 01:12 PM UTC

Hi Anand,

Query

Comments

After adding the width and height, the alignment does not work.

We have considered your reported issue as a bug and have logged a defect report for it. This fix will be available in our patch release , which is scheduled to be rolled out on August 1^st , 2023. We appreciate your patience until then. You can keep track of the bug using the feedback link below.

Feedback Link: Alignment of the AccumulationChart legend does not work properly when the width of the legend is set in Blazor | Feedback Portal (syncfusion.com)

The point I'm trying to make is that even after adding a parent div with 100% height, the pie chart container does not take 100% height. It's height never goes to 100% even after a parent div with a 100% height.

Thanks for the patience. We have considered the reported issue as a bug “Pivot Chart does not display properly when its height is set to 100%” and the fix for the issue will be available in our August 1st patch release , which is scheduled to be rolled out on August 1^st , 2023. We appreciate your patience until then. You can keep track of the bug using the feedback link below.

Feedback Link: https://www.syncfusion.com/feedback/45553/pivot-chart-does-not-display-properly-when-its-height-is-set-to-100

However, until then, you can use the CSS below to set the height of the Pivot chart to 100% as a workaround solution. Please look at the code example below.

Code Example

<style>

.e-pivot-view-port {

height: inherit;

}

.e-pivot-chart-view.e-component-visible{

height: inherit;

}

</style>

Output screenshot:

Meanwhile we have prepared a sample for your reference. Please find it in the attachments.

Please let us know if you have any concerns.

With regards,

Rajeshkannah G

Attachment: PivotBlazorApp_175e2831.zip

AK Anand Kulkarni July 24, 2023 02:21 PM UTC

Hi Rajeshkannah,

Thank you.

Kind Regards,

Anand Kulkarni

RG Rajeshkannah G Syncfusion Team July 25, 2023 05:21 AM UTC

Hi Anand,

Thank you. We will notify you once the release is rolled out.

Regards,

Rajeshkannah G

Marked as answer

RG Rajeshkannah G Syncfusion Team July 28, 2023 12:34 PM UTC

Hi Anand,

We are glad to announce that our Essential Studio 2023 Volume 2 Service Pack Release V22.2.5 is rolled out and the feature “To provide Radius support for pie chart series In the Pivot chart” has been included in this release. You can use “Radius” property in PivotChartSeries to customize the Radius of the Pie Chart based on your requirement. Please refer the below code example.

Code Example:

<SfPivotView TValue="PivotProductDetails" ShowFieldList="true">

<PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>

<PivotChartSettings Title="@Title" EnableSmartLabels=true>

<PivotChartSeries Type="Syncfusion.Blazor.PivotView.ChartSeriesType.Pie" Radius= "75%">

<PivotChartSettings>

<SfPivotView>

Output Screenshot

Moreover, you can set different radius for each slice in the Pie chart using “ChartSeriesCreated” event. Please refer the below code example.

Code Example :

<SfPivotView TValue="PivotProductDetails" ShowFieldList="true">

<PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>

<PivotChartSettings Title="@Title" EnableMultipleAxis="true" MultipleAxisMode="MultipleAxisMode.Single" EnableSmartLabels=true>

<PivotChartSeries Type="Syncfusion.Blazor.PivotView.ChartSeriesType.Pie" Radius= "@Radius">

</PivotChartSeries>

</PivotChartSettings>

<PivotViewEvents TValue="PivotProductDetails" ChartSeriesCreated="ChartSeriesCreated"></PivotViewEvents>

</SfPivotView>

@code {

public bool ChartEvent = true;

public string Radius = "75%";

public string Title = "Pie Chart with different Radius for each Slice" ;

public List<PivotProductDetails> data { get; set; }

protected override void OnInitialized()

{

this.data = PivotProductDetails.GetProductData().ToList();

}

public void ChartSeriesCreated(ChartSeriesCreatedEventArgs args)

{

if(ChartEvent)

{

var Data = args.Series[0].DataSource;

Data[0].Radius = "80%";

Data[1].Radius = "85%";

Data[2].Radius = "90%";

Data[3].Radius = "95%";

Data[4].Radius = "75%";

args.Series[0].Radius = "Radius";

}

Output Screenshot

Meanwhile, we have prepared a sample for your reference. Please find it in the attachments.

Please find the release notes below.

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/22.2.5?type=all#pivot-table

Please let us know if you have any concerns.

Regards,

Rajeshkannah Gopalakrishnan

Attachment: Pivot_Table_b916d359_754dfa15.zip

RG Rajeshkannah G Syncfusion Team August 3, 2023 12:37 PM UTC

Hi Anand,

Thanks for the patience. We are glad to announce that our weekly patch release V22.2.7 is rolled out and the fix for the issue “Pivot Chart does not display properly when its height is set to 100%“ is included in this release. Meanwhile we have prepared a sample for your reference. Please find it in the attachments.

Output screenshot

Please let us know if you have any queries.

Regards,

Rajeshkannah G

Attachment: Pivot_Table_eb21a206.zip

RG Rajeshkannah G Syncfusion Team August 3, 2023 12:54 PM UTC

Hi Anand,

Thanks for the patience. We have analyzed the query and we wish to inform you that the LegendPosition can be set only when the width is not set. When, width is applied, the legends are rendered of specific width based on the chart width and hence the legend position can’t be set in that case. Our standalone Pie chart also exhibits the similar behavior and we have followed the same in our pivot pie chart.

Please let us know if you have any concerns.

Regards,

Rajeshkannah Gopalakrishnan.

Need More Help?

Get personalized assistance from our support team.

Contact Support

11 Replies
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
AK Anand Kulkarni
Platform
Blazor
Control
Pivot Table
Created On
Jul 13, 2023 11:17 AM UTC
Last Activity On
Aug 3, 2023 12:54 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support