How can I display the column name in the legend in the Pivot Chart?

[Michael Evans]

Hi,

I'm trying to add some requested functionality to show the name of the field for column in the pivot chart control. The X-axis shows the name of the "Row" field and the Y-axis shows the name/aggregation of the "Value" field, but the "Column" does not appear (except in the tooltip when you hover over a series). The legend below the graph shows the values of the column field, but not the field that they are for. I found I could set a title for the legend by setting a value for the grid's chartSettings.legendSettings.title property, but this is a hard-coded string and since our users can use the pivot field list to change which fields appear on each axis, I'm looking for a way to automatically show the field name near the legend.

Example:

Field list control (SITE is the column name, TESTNAME is the row and CONVENTIONALRESULT (average) is the value axis):

Chart:

In the example, you can see the different values for SITE in the legend as a series of colored icons with labels containing the value of the SITE field.

But there is nothing on the graph to indicate that it is the SITE field.

The field for the row is shown on the X axis and the field for the value is shown on the Y axis.

Please let me know if there is a way to include this information in the legend.

[Mouli Eswararao]

  

Hi Michael,  

Thanks for contacting Syncfusion support. 

 

We have prepared a sample where the legend title can be updated dynamically based on report changes. Please find the sample in the below link. 

Sample Link: https://stackblitz.com/edit/angular-p3nyj2-wndkx9?file=app.component.ts


We hope this resolves your issue. If you still have any further queries please contact us we are happy to assist you. 

Regards,
Mouli 

[Michael Evans]

Thank you for the example, that worked to show the column on the legend.

I am now running into another unrelated problem. I noticed that when I would set the fields for the grid, then change to chart mode using the toolbar, it worked fine. However, if I was still in chart mode and I made any change to the chart such that it had to refresh, the chart would get stuck in a loop where the height was increasing slowly over time. I eventually tracked this down to the fact that we are setting the height of the control to 100%, and was able to reproduce it in your example simply by changing the height to 100% instead of the fixed 450px you had:

https://stackblitz.com/edit/angular-infinitely-growing-chart?file=main.ts

In the above example it immediately starts growing in height from the moment the page is loaded.

In general we want our grid to take up 100% of the component it is in and not have a fixed height, whether it is in grid mode or chart mode. Setting height to 100% works great in grid mode, but causes this issue in chart mode.

Thanks,

Michael

[Saranya Sivan]

Hi Micahel, 

  

We considered “Issue in pivot chart(toolbar) when height as percentage” as a bug and logged a defect report in our data base. And it will be available in weekly patch release which is estimated to be rolled in the 20th April, 2021. 

  

You can track the task in the following link. 

  

https://www.syncfusion.com/feedback/24132 

  

We appreciate your patience until then. 

  

Regards, 

Saranya Sivan. 

 

[Saranya Sivan]

Hi Michael,  

  

Due to complexity the reported issue couldn’t be fixed in the weekly patch release. But it will be included in 2021 Volume 1 SP1 release which is estimated to be rolled in the mid of May, 2021.  

  

We appreciate your patience until then.  

  

Regards, 

Saranya Sivan.  

 

[Saranya Sivan]

Hi Michael,  

  

We are glad to announce that our Essential Studio 2021 Volume 1 Service pack v19.1.0.63 is rolled out where the reported issue has been fixed. It is available for download under the following link. 

  

https://www.syncfusion.com/forums/165437/essential-studio-2021-volume-1-service-pack-release-v19-1-0-63-is-available-for-download 

  

Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 

  

Sample Link: https://stackblitz.com/edit/angular-infinitely-growing-chart-zah4ve?file=app.component.ts 

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Regards, 

Saranya.