UI Issues with Chart

[Rob ONeill]

Hi,

We have some issues with the syncfusion chart. I have attached some images in a zip file that will show the following issues.

1. When the chart is rendered sometimes it is blurred

2. When the chart legend is using rows and columns some of the legend items overlap

3. When the chart legend is using rows and columns sometimes the legend items can extend outside of the legend border

4. X Axis labels (datetimes) not evenly distributed, no space between labels.

5. Chart legend width when set to 100% doesn't always take up the whole width when using columns and rows.

As well as these UI issues the following would be nice to have as features

1. Axis title padding

2. Legend column widths

Cheers ... Rob.

Attachment: SyncfusionChart_a69e03e6.zip

[Deepaa Pragaasam]

Hi Rob,
Thanks for contacting Syncfusion support.

We have analyised your query. We can’t able to reproduce this issue on our end, It would be better if the version of the Essentail studio you are using being updated.

Please Let me know, if you have any queries.

Regards,
Deepaa

[Deepaa Pragaasam]

Hi Rob,
Thanks for contacting Syncfusion Support.
We have analyised the queries and not able to reproduce the issues at our end
Query 1: When the chart is rendered sometimes it is blurred
We have generated multiple charts with random datas. Chart is displayed as the below screenshot

Please refer the Index.cshtml in the attached sample for code
Query 2: When the chart legend is using rows and columns some of the legend items overlap
We have generated the chart containing multiple legend with column count 3, Row count 3.There is no overlap of the legend items displayed.
Please find the below screenshot

Please refer the Contact.cshtml page of the sample for the attached for code reference
Query 3:  Chart legend width when set to 100% doesn't always take up the whole width when using columns and rows.
We have set the Legend width to 100% and it has occupied the space of the div

Please refer the Contact.cshtml page in the sample
Query 4:  When the chart legend is using rows and columns sometimes the legend items can extend outside of the legend border
We have created the sample with legend and border width as 1.The legend text doesnot collide with the border
Screenshot:
 
Please refer the About.cshtml page of sample for the coding

Query 5: X Axis labels (datetimes) not evenly distributed, no space between labels.
We have analyised the screenshot  and found that as the axis labels are not overlapping  , the label intersect action ”hide” doesn’t occur .The reason behind this is , the Font size varies from browser to browser the following scenario has occurred.
Please refer the below link for details regarding the font variation across various browsers
https://www.smashingmagazine.com/2012/04/a-closer-look-at-font-rendering/.
If you feel any inconvenience caused by the behavior in Internet explorer, we can change the font size of the axis labels is increased the sample works fine across all browsers.
Sample screenshot:

Please refer the Index.cshtml for the code reference
I have attached the sample for your reference

https://www.syncfusion.com/downloads/support/forum/120672/ze/WebApplication1186705915

If you still face any concern, kindly revert back us by modifying the attached sample along with replication procedure.

It would also be nice if the version of Essential studio you are using being specified in the update.
Feature request:

1.       Axis title Padding:

By default we can move the axis title to far, near or center positions.

 Sample Link:

https://mvc.syncfusion.com/demos/web/chart/subtitle

 Help Document:

https://help.syncfusion.com/aspnetmvc/chart/axis#axis-title
We need to provide support for the padding property in axis titles. We have analyzed this. Currently there is no support to add padding to axis titles. So we have already logged a feature request for this “Support to add padding to axis titles”. A support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

 2. Legend Column Width:
We are in process of providing the legend with maximum width property. Once this feature is implemented the legend column width support also would be provided. . So we have already logged a feature request for this “Support for legend trim”. A support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
Please let us know if you have any concern.

Thanks,
Deepaa.

[Robert David]

Hi, I am also experiencing similar issues, We have found out that the inclusion of a less than or greater than tag in the legend name will cause them to overlap.

http://jsplayground.syncfusion.com/o232n3g4

[Deepaa Pragaasam]

Hi Robert,
We are able to reproduce the issue and have logged a defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
Please let us know if you have any concerns
Regards,
Deepaa.