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. Image for the cookie policy date

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

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

25 Replies

SM Srihari Muthukaruppan Syncfusion Team 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 



JC Jishnu Chandran 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;
}


SM Srihari Muthukaruppan Syncfusion Team 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 



SM Srihari Muthukaruppan Syncfusion Team 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 
 



JC Jishnu Chandran 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.


SM Srihari Muthukaruppan Syncfusion Team 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  



JC Jishnu Chandran replied to Srihari Muthukaruppan 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


SM Srihari Muthukaruppan Syncfusion Team 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 



JC Jishnu Chandran replied to Srihari Muthukaruppan 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


SM Srihari Muthukaruppan Syncfusion Team 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  



SM Srihari Muthukaruppan Syncfusion Team 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 



JC Jishnu Chandran replied to Srihari Muthukaruppan 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



SM Srihari Muthukaruppan Syncfusion Team 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 



WT Wanpaya t. 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





SM Srihari Muthukaruppan Syncfusion Team 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   



SM Srihari Muthukaruppan Syncfusion Team 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 



JC Jishnu Chandran March 4, 2020 04:11 AM UTC

Hi Team,

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



Thanks


SM Srihari Muthukaruppan Syncfusion Team 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 



JC Jishnu Chandran replied to Jishnu Chandran December 11, 2020 05:15 PM UTC

Hi Team,

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



Thanks

Hi,

We have upgraded the syncfusion version to 18.3.0.53. Also we have tried adding the below highlighted code as suggested in the previous thread. But still few of the bar chart % label is missing as shown in the screenshot. Please check and revert.


@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() 

Regards,
Jishnu


SM Srihari Muthukaruppan Syncfusion Team December 14, 2020 02:32 PM UTC

Hi Jishnu,  
  
We have analyzed your query. From that, we suspect the reported scenario might occur due to cache problem. Hence we suggest you to delete the bin and obj folders in the sample and run the sample. We have also tried to reproduce the reported scenario in the mentioned version (18.3.53). 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).Tooltip(tooltip =>{ tooltip.Position(Syncfusion.EJ2.Charts.TooltipPosition.Auto).Enable(true).Format("${point.tooltip}");}).Add();  
}).Render()  
  
// add your additional code here  
  
Screenshot:  
DataLabel: 
  
Tooltip:  
 
  
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 the device configuration and browser configuration used for testing.
  • Share the details if you have done any other customization in your sample.
Let us know if you have any concerns.  
  
Regards,  
Srihari 


JC Jishnu Chandran replied to Srihari Muthukaruppan January 6, 2021 04:08 PM UTC

Hi Jishnu,  
  
We have analyzed your query. From that, we suspect the reported scenario might occur due to cache problem. Hence we suggest you to delete the bin and obj folders in the sample and run the sample. We have also tried to reproduce the reported scenario in the mentioned version (18.3.53). 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).Tooltip(tooltip =>{ tooltip.Position(Syncfusion.EJ2.Charts.TooltipPosition.Auto).Enable(true).Format("${point.tooltip}");}).Add();  
}).Render()  
  
// add your additional code here  
  
Screenshot:  
DataLabel: 
  
Tooltip:  
 
  
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 the device configuration and browser configuration used for testing.
  • Share the details if you have done any other customization in your sample.
Let us know if you have any concerns.  
  
Regards,  
Srihari 

Hi,

We could reproduce the issue in the sample which you have provided. On checking the sample solution you have provided we found in the layout that the ejs version is taking from a url like https://cdn.syncfusion.com/ej2/17.4.53/dist/ej2.min.js. We have changed the version to 18.3.53 and used the url like https://cdn.syncfusion.com/ej2/18.3.53/dist/ej2.min.js. Then we could reproduce the issue. We haven't changed anything other than that. I am testing this in Chrome(Version 79.0.3945.130) browser mobile mode. 

The thing is that the ejs version 17.4.53 works in our project too and every label gets rendered properly. But we need this working in latest version too. So from version 18 and above its not working. Please see the attached screenshots. Please try the 18.3.53 version in your sample solution and revert.

Attachment: LabelIssue_e8a3cef5.zip


SM Srihari Muthukaruppan Syncfusion Team January 7, 2021 08:50 AM UTC

Hi Jishnu, 
 
We have analysed your query. We are able to reproduce the reported scenario.  We have already considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link.    
       
       
This fix will be available in our volume 4 sp1 release which is scheduled to be rolled out by the mid of January 2021. We appreciate your patience until then.    
     
Regards,    
Srihari 



JC Jishnu Chandran January 14, 2021 03:04 PM UTC

Hi,

Is there any update on the bug fix release?

Regards,
Jishnu


SM Srihari Muthukaruppan Syncfusion Team January 15, 2021 05:07 AM UTC

Hi Jishnu, 

Sorry for the inconvenience. 

We have analyzed your query. From that, we would like to let you know that our volume 4 sp1 release has been postponed to the end of January. We will update the status once our release is rolled out. We appreciate your patience until then. 

Regards, 
Srihari M 



SM Srihari Muthukaruppan Syncfusion Team January 29, 2021 06:51 PM UTC

Hi Jishnu, 
  
We are glad to announce that our Essential Studio 2020 Volume 4 service pack release v18.4.0.39 is rolled out and is available for download under the following link. And the fix for the reported scenario has been included in this release. Please find the sample, code snippet and screenshot for your reference. 
  
 
 
Code Snippet: 
@Html.EJS().Chart("containerHoldings").Width("100%").Height("110px").Series( 
series => { series.TooltipMappingName("ToolTip").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).XName("x").YName("y") 
 .Marker(mr => mr.DataLabel(dl => dl.LabelIntersectAction("None").Name("text").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)); 
}).ChartArea(area => area.Border(br => br.Color("transparent"))).Render() 
// add your additional code here 
 
Screenshot: 
 
 
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, 
Srihari M 


Loader.
Live Chat Icon For mobile
Up arrow icon