We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bar chart data label missing for some data while in mobile view(iPhone 5/SE) and tooltip getting cropped for bar chart series

Thread ID:

Created:

Updated:

Platform:

Replies:

149030 Nov 12,2019 12:00 PM UTC Mar 5,2020 02:09 PM UTC ASP.NET MVC - EJ 2 18
loading
Tags: Chart
Jishnu Chandran
Asked On November 12, 2019 12:00 PM UTC

Hi,

We are facing two issues in one of the bar chart. Please find below the issues:

1. In mobile view in Google Chrome the label for few of the series of the bar chart is missing. We have tried custom template for the data label and it was not working. Also we tried the solution in the following link: https://www.syncfusion.com/forums/141664/datalabel-in-bar-graph-not-shown-all-value. That too is not working. Please find the screenshot for the issue.



2. Also the tooltip for few bar chart series data is getting cropped while hovering. This is a general issue and it applies to both mobile view as well as normal view. Please find the screenshot below for this issue also. 

Mobile View:


Normal View:




Thanks,
Jishnu

Srihari Muthukaruppan [Syncfusion]
Replied On November 13, 2019 04:20 PM UTC

Hi Jishnu, 
  
Please find the chart related query response. 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Query #1: In mobile view in Google Chrome the label for few of the series of the bar chart is missing? 
  
We have analyzed your query. From that, we would like to let you know that the datalabel is working fine in chart. Unfortunately we are unable to reproduce the issue. We have also attached the sample used by testing. 
  
Code Snippet: 
@Html.EJS().Chart("container").Series( 
            series => { 
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Imports").XName("x").YName("y") 
                .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Outer))) 
                .DataSource(ViewBag.dataSource).Add(); 
            }).PrimaryXAxis( 
            px => { 
                px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0)). 
                Title("Food"); 
            }).PrimaryYAxis( 
            py => { 
                py. 
                LabelFormat("{value}%").MajorGridLines(mg=>mg.Width(1)).Interval(3).Minimum(-3).Maximum(2); 
            }).Tooltip( 
            tooltip => { 
                tooltip.Enable(true).Header(""); 
            }).ChartArea(area => area.Border(br=>br.Color("transparent"))).Title("UK Trade in Food Groups - 2015").TooltipRender("tooltipRender").Render() 
  
  
Screenshot: 
 
  
If this solution doesn’t meet the requirement, kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner. 
  
Query #2: the tooltip for few bar chart series data is getting cropped while hovering? 
  
We have analyzed your query. We were able to reproduce the issue and we confirm this as a bug and logged a defect report .You can keep track of the bug from the feedback portal below.  
  
  
The fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on November 19th , 2019.  
  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


Jishnu Chandran
Replied On November 19, 2019 12:15 PM UTC

Hi,

Query #1: In mobile view in Google Chrome the label for few of the series of the bar chart is missing? 

For the above issue in bar chart data label, we have found that the issue is while shrinking the chart to mobile view (responsive mode). Please find the sample code which contains cshtml,css and cs files which we have issue and please try it in your sample application so that the issue can be reproduced. The below css have aspect ratio setting changes which allows the chart to render in a better way in responsive devices but has issue in data label.

.cshtml

<div class="ChartWrapper">
                            @Html.EJS().Chart("containerHoldings").Width("100%").Height("100%").Series(
                     series =>
                     {
                         series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y").TooltipMappingName("ToolTip")
                         .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Outer)))
                         .DataSource(ViewBag.dataSource).PointColorMapping("color").Add();
                     }).PrimaryXAxis(
                     px =>
                     {
                         px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg => mg.Width(1)).EnableTrim(true).MaximumLabelWidth(50);
                     }).PrimaryYAxis(
                     py =>
                     {
                         py.
                         LabelFormat("{value}").Visible(true).
                         EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorGridLines(mg => mg.Width(1));
                     }).Tooltip(
                     tooltip =>
                     {
                         tooltip.Enable(true);
                     }).ChartArea(area => area.Border(br => br.Color("transparent"))).Render()
</div>

.cs

public class Data
        {
            public string x;
            public double y;
            public string fill;
            public string text;
            public string ToolTip;
        }

        public ActionResult EditGridTest()
        {
            List<Data> chartData = new List<Data>
            {
           new Data{ x= "sample 1", y= .05,   fill= "#498fff", text= "sample data Label 1",ToolTip="sample data Label 1" },
           new Data{ x= "sample 2 ", y= -3.5, fill= "#ffa060", text= "sample 2",ToolTip="sample 2" },
           new Data{ x= "sample 3", y= 7,   fill= "#ff68b6", text= "sample data Label 3",ToolTip="sample data Label 3" },
           new Data{ x= "sample 4", y= -13.5,fill= "#81e2a1", text= "sample data Label 4",ToolTip="sample data Label 4" },
           new Data{ x= "sample 5", y= 7,   fill= "#ff68b6", text= "sample data Label 3",ToolTip="sample data Label 3" },
           new Data{ x= "sample 6", y= -13.5,fill= "#81e2a1", text= "sample data Label 4",ToolTip="sample data Label 4" },
           new Data{ x= "sample 7", y= 7,   fill= "#ff68b6", text= "sample data Label 3",ToolTip="sample data Label 3" },
           new Data{ x= "sample 8", y= -13.5,fill= "#81e2a1", text= "sample data Label 4",ToolTip="sample data Label 4" }
            };
            ViewBag.dataSource = chartData;

            return View();

        }

.css

.ChartWrapper {
position: relative;
}

.ChartWrapper::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 56.25%;
}

.ChartWrapper::after { /* to clear float */
content: "";
display: table;
clear: both;
}

/* chart aspect ratios */
.ChartWrapper chart:first-child,
.ChartWrapper accumulation-chart:first-child {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}

.ChartWrapper svg,
.ChartTwoSideWrapper svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Srihari Muthukaruppan [Syncfusion]
Replied On November 19, 2019 02:30 PM UTC

Hi Jishnu, 

We are analyzing your query and we will update the status within one business day(November 20, 2019). We appreciate your patience until then. 

Regards, 
Srihari M 


Srihari Muthukaruppan [Syncfusion]
Replied On November 21, 2019 07:31 AM UTC

Hi Jishnu, 
  
Please find the chart related query response. 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Query #1: In mobile view in Google Chrome the label for few of the series of the bar chart is missing? 
 
We have analyzed your query. From that, we would like to let you know that by default when the data labels is intersected with each other it gets hidden. Hence while resizing the chart when data label overlaps with another data label it gets hidden. If still this not your exact requirement. Kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner. 
 
Query #2: the tooltip for few bar chart series data is getting cropped while hovering? 
  
Sorry for the inconvenience. Due to some technical difficulties in implementation, we are unable to include this fix in this patch release. So we will consider this issue in our main release. Until then we suggest you to use the below workaround solution to achieve your requirement. In that we have modified the text of tooltip using break to achieve your requirement.  Please find below code snippet.  
  
Code Snippet: 
            List<Data> chartData = new List<Data> 
            { 
           new Data{ x= "sample 1", y= .05, ToolTip = "sample<br>data<br>Label1"}, 
           new Data{ x= "sample 2 ", y= -3.5, text= "sample<br>2"}, 
           new Data{ x= "sample 3", y= 7, text= "sample<br>data<br>Label3" }, 
           new Data{ x= "sample 4", y= -13.5, text= "sample<br>data<br>Label4" }, 
           new Data{ x= "sample 5", y= 7, text= "sample<br>data<br>Label3"}, 
           new Data{ x= "sample 6", y= -13.5, text= "sample<br>data<br>Label4" }, 
           new Data{ x= "sample 7", y= 7, text= "sample<br>data<br>Label3" }, 
           new Data{ x= "sample 8", y= -13.5, text= "sample<br>data<br>Label4"} 
            }; 
            ViewBag.dataSource = chartData; 
            return View(); 
  
Screenshot: 
 
  
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 
 


Jishnu Chandran
Replied On November 26, 2019 03:01 PM UTC

Hi,

Query #1: In mobile view in Google Chrome the label for few of the series of the bar chart is missing? 

Regarding the data label gets hidden issue we actually require the label to be visible always at different sizes of the chart. Please do help in getting a solution for showing this label even if the label text are overlapped also.

Srihari Muthukaruppan [Syncfusion]
Replied On November 28, 2019 03:44 AM UTC

Hi Jishnu, 
 
We have analyzed your query. From that, we would like to let you know that as of now we don’t have support to show the datalabel even if the label text are overlapped. We consider this scenario as improvement and we have logged a feature request on this . It can be tracked through our feedback portal below.  

 
Due to release work, this improvement will be considered after our main release. We appreciate your patience until then. 
 
Let us know if you have any concerns.  
   
Regards,  
Srihari M  


Jishnu Chandran
Replied On December 23, 2019 02:33 PM UTC

Hi Jishnu, 
 
We have analyzed your query. From that, we would like to let you know that as of now we don’t have support to show the datalabel even if the label text are overlapped. We consider this scenario as improvement and we have logged a feature request on this . It can be tracked through our feedback portal below.  

 
Due to release work, this improvement will be considered after our main release. We appreciate your patience until then. 
 
Let us know if you have any concerns.  
   
Regards,  
Srihari M  


Hi,

Any updates on the data label issue

Regards,
Jishnu

Srihari Muthukaruppan [Syncfusion]
Replied On December 24, 2019 08:13 PM UTC

Hi Jishnu,  

We are glad to let you know that we have provided support to show the datalabel even if the label text are overlapped. We have provided “overflow” property in DataLabel to control the behavior of dataLabel. We have generated a custom package and min file for your use. We have also provided the sample, code snippet and screenshot for your reference. And we will add the fix provided in custom patch in our upcoming weekly patch release which is expected to be rolled out on January 7th 2019. Please find below link,  
  


 
Code Snippet: 
    @Html.EJS().Chart("containerHoldings").Width("100%").Height("100%").Series( 
series => { series.TooltipMappingName("text").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y") 
 .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Outer))) 
 .DataSource(ViewBag.dataSource).PointColorMapping("color").Add(); 
}).PrimaryXAxis(px => { px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category) 
 .MajorGridLines(mg => mg.Width(1)).EnableTrim(true).MaximumLabelWidth(50); 
}).PrimaryYAxis(py => { py.LabelFormat("{value}").Visible(true). 
 EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorGridLines(mg => mg.Width(1)); 
}).Tooltip(tooltip =>{ tooltip.Enable(true).Format("${point.tooltip}");}).ChartArea(area => area.Border(br => br.Color("transparent"))).Load("load").Render() 
</div> 
<script> 
var load = function(args) { 
    args.chart.series[0].marker.dataLabel.overflow = 'none'; 
} 
</script>  
  
Screenshot: 
 
Kindly replace this above min file in your sample and let me know, if still you have faced any problems.  
  
Regards,  
Srihari M 


Jishnu Chandran
Replied On December 27, 2019 03:43 PM UTC

Hi Jishnu,  

We are glad to let you know that we have provided support to show the datalabel even if the label text are overlapped. We have provided “overflow” property in DataLabel to control the behavior of dataLabel. We have generated a custom package and min file for your use. We have also provided the sample, code snippet and screenshot for your reference. And we will add the fix provided in custom patch in our upcoming weekly patch release which is expected to be rolled out on January 7th 2019. Please find below link,  
  


 
Code Snippet: 
    @Html.EJS().Chart("containerHoldings").Width("100%").Height("100%").Series( 
series => { series.TooltipMappingName("text").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y") 
 .Marker(mr => mr.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Outer))) 
 .DataSource(ViewBag.dataSource).PointColorMapping("color").Add(); 
}).PrimaryXAxis(px => { px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category) 
 .MajorGridLines(mg => mg.Width(1)).EnableTrim(true).MaximumLabelWidth(50); 
}).PrimaryYAxis(py => { py.LabelFormat("{value}").Visible(true). 
 EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorGridLines(mg => mg.Width(1)); 
}).Tooltip(tooltip =>{ tooltip.Enable(true).Format("${point.tooltip}");}).ChartArea(area => area.Border(br => br.Color("transparent"))).Load("load").Render() 
</div> 
<script> 
var load = function(args) { 
    args.chart.series[0].marker.dataLabel.overflow = 'none'; 
} 
</script>  
  
Screenshot: 
 
Kindly replace this above min file in your sample and let me know, if still you have faced any problems.  
  
Regards,  
Srihari M 


Hi,

The fix you have provided is working. Thanks for that. But another issue is there which is the position of data label which causes the first data label getting overlapped with adjacent one. If you could provide a fix for this issue then the fix will be complete. Please see the attached screenshot for the issue.

Regards,
Jishnu

Attachment: Datalabel_OverlappingIssue_6cdb718a.zip

Srihari Muthukaruppan [Syncfusion]
Replied On December 30, 2019 12:39 PM UTC

Hi Jishnu, 
 
Sorry for the inconvenience. 
  
  
  
The fix will be available in our weekly patch release which is scheduled to be rolled out on or before January 07th, 2019.  
 
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  
   
Regards,  
Srihari M  


Srihari Muthukaruppan [Syncfusion]
Replied On January 7, 2020 02:15 PM UTC

Hi Jishnu, 
 
Thanks for being patience. 
 
We are glad to announce that our v17.4.41  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  
 
 
Support 
API 
LabelIntersectAction 
 
marker: { dataLabel: { visible: true, labelIntersectAction:'None' } } 
 
 
We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  
  
Regards,  
Srihari M 


Jishnu Chandran
Replied On January 8, 2020 09:26 AM UTC

Hi Jishnu, 
 
Thanks for being patience. 
 
We are glad to announce that our v17.4.41  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  
 
 
Support 
API 
LabelIntersectAction 
 
marker: { dataLabel: { visible: true, labelIntersectAction:'None' } } 
 
 
We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  
  
Regards,  
Srihari M 


Hi,

Thanks for the update, We are using syncfusion custom generator to download the package. So please release the above latest version to custom generator  too so that we can download from that.

Thanks,
Jishnu


Srihari Muthukaruppan [Syncfusion]
Replied On January 9, 2020 03:35 PM UTC

Hi Jishnu,  
  
Thanks for being patience. 
  
We are glad to let you know that we have fixed the reported issue in v17.4.41  patch release and refreshed the crg site. Please refer the below download link and screenshot.  
  
  
Screenshot: 
 
  
Support  
API  
LabelIntersectAction  
  
marker: { dataLabel: { visible: true, labelIntersectAction:'None' } }  
  
  
We appreciate your patience in waiting for this release. Let me know, if you need further assistance.   
  
Regards,  
Srihari M 


Wanpaya t.
Replied On January 22, 2020 11:05 AM UTC

Hi Support team,

Your chart library is awesome! I love it.

BTW, Your updated v17.4.41 is working fine but not on dataLabel that has template defined.
could you please check that flag on DataLabel.prototype.createDataLabelTemplate in data-label.js




Srihari Muthukaruppan [Syncfusion]
Replied On January 23, 2020 12:00 PM UTC

Hi Jishnu,  
  
We have analyzed your query. We were able to reproduce the issue “The LabelIntersectAction property does not work for datalabel Template”. We confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below.  
 
 
The fix will be available in our weekly patch release which is scheduled to be rolled out on or before February 5th, 2020.  
 
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal 
    
Regards,   
Srihari M   


Srihari Muthukaruppan [Syncfusion]
Replied On February 6, 2020 01:01 PM UTC

Hi Jishnu, 

Thanks for being patience. 
 
We are glad to announce that our v17.4.47  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  

We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  
  
Regards,  
Srihari M 


Jishnu Chandran
Replied On March 4, 2020 04:11 AM UTC

Hi Team,

We still have this issue with latest version 17.4.51-patch.
Please advise.



Thanks

Srihari Muthukaruppan [Syncfusion]
Replied On March 5, 2020 02:09 PM UTC

Hi Jishnu, 
 
We have analyzed your query. From that, we would like to let you know that the bar chart is working fine. We have also tried to reproduce the reported scenario in the mentioned version (17.4.51). Unfortunately we are unable to reproduce the reported scenario. We have also attached the sample used for testing. Please find the below sample and screenshot. 
 
  
Code Snippet: 
// add your additional code here 
 
@Html.EJS().Chart("containerHoldings").Width("100%").Height("100%").Series( 
series => { series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y") 
 .Marker(mr => mr.DataLabel(dl => dl.LabelIntersectAction("None").Visible(true)))) 
 .DataSource(ViewBag.dataSource).Add(); 
}).Render() 
 
// add your additional code here 
 
Screenshot: 
 
 
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner. 
  • Try to reproduce the reported scenario in the above sample
  • Please share your sample (or) code snippet with full configurations.
  • Share the details if you have done any other customization in your sample.
Let us know if you have any concerns. 
 
Regards, 
Srihari 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon