1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Problem with chart after the Upgrade from version 16.2.0.50 to 16.3.0.21

Problem with chart after the Upgrade from version 16.2.0.50 to 16.3.0.21

Hi,
I upgraded from version 16.2.0.50 to 16.3.0.21 version but I get errors related to the settings of the properties 
MajorGridLines, MajorTickLines, MinorTickLines and LineStyle properties of the chart:
This is my code:

@Html.EJS().Chart("containerdue").Locale("en").ChartArea(area => area.Border(ViewBag.ChartBorder)).Width("100%").TooltipRender("tooltip").UseGroupingSeparator(true).Series(series =>
            {
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(1).XName("Time").YName("Value").Name("Asset").Add();
            }).PrimaryXAxis(px =>                              px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            ).PrimaryYAxis(py =>                              py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle)
            ).Tooltip(tt => tt.Enable(true).Header(ViewBag.Asset)).Load("chartLoad").Loaded("charLoaded").Render()

thanks for your help.
Barbara Inzitari

7 Replies
DD Dharanidharan Dharmasivam Syncfusion Team September 26, 2018 07:00 AM UTC

Hi Inzitari, 
 
Greetings from Syncfusion. 
 
We have validated the reported error with attached code snippet. We would like to let you know that from v16.3.0.21, we have changed the type of MajorGridLines, MajorTickLines, MinorGridLines and LineStyle. Now these properties can be initialized through lambda expression as depicted below. We have already mentioned these breaking changes in our release notes. 
 
Code snippet:   
 
    @Html.EJS().Chart("container").PrimaryXAxis(px =>  
         px.MajorGridLines(mg => mg.Width(0.5).Color("#80acf2")) 
        .MajorTickLines(mat => mat.Width(2).Color("grey")) 
        .MinorTickLines(mit => mit.Width(1).Color("grey")) 
        .LineStyle(ls => ls.Width(3).Color("red")) 
    ).PrimaryYAxis(py => py  
        .MajorGridLines(mg => mg.Width(0.5).Color("#80acf2")) 
        .MajorTickLines(mt => mt.Width(2).Color("grey")) 
        .MinorTickLines(mtl => mtl.Width(1).Color("grey")) 
        .LineStyle(ls => ls.Width(3).Color("red")) 
 
        //Other chart configurations 
 
   .Render() 
 
Screenshot: 
 
 
 
Sample for reference can be find below. 
 
 
Regards, 
Dharani 
 


NI nimue September 26, 2018 09:05 AM UTC

Hi Dharani,
Thanks as usual for your support.
I had read in the release notes the changes that were made in the new version, but on the demos on line I could not see any change in the code, where I can find demos related to the latest version released?
I ask you one last thing if I can
I realized that with the transition to the new version some icons are no longer loaded; 
Did they change them too? can I have a link to access to understand which icons can I use?
Thank you so much
Barbara Inzitari

DD Dharanidharan Dharmasivam Syncfusion Team September 26, 2018 12:06 PM UTC

Hi Inzitari, 
 
We have ensured the online samples and the codes were not shown properly. This has been fixed and will be refreshed online soon, also we will update you once this has been refreshed. Meanwhile you can find our documentation in which we have updated with the modified codes (used lambda expressions). 
 
And regarding the query icons were not loaded, Kindly, provide us more information on this query, that is using which component the icons were not loaded (for example toolbar component in which we have icons and are properly loading at our end) or share some screenshots for the issue. These information will be much helpful in providing you the solution sooner. 
 
Thanks, 
Dharani. 


NI nimue September 27, 2018 08:49 AM UTC

Hi Dharani,
Thanks for the reply.

The icons are in a tab, of all three hours only the last one is loaded (.e-data-grid)
This is the code:

<div class="e-sample-resize-container">
    @Html.EJS().Tab("ej2Tab").Items(new List<Syncfusion.EJ2.Navigations.TabTabItem> {
        new Syncfusion.EJ2.Navigations.TabTabItem {Header = new Syncfusion.EJ2.Navigations.TabHeader {Text = "Line Chart", IconCss = "e-chart-line" },Content="#charline" },
        new Syncfusion.EJ2.Navigations.TabTabItem {Header = new Syncfusion.EJ2.Navigations.TabHeader {Text = "Candle Chart", IconCss = "e-chart-candle" },Content="#charcandle" },
        new Syncfusion.EJ2.Navigations.TabTabItem {Header = new Syncfusion.EJ2.Navigations.TabHeader {Text = "Historical Data", IconCss = "e-data-grid" },Content="#historicalData" }
    }).Created("tabCreated").Width("100%").Render()
</div>



.e-icons.e-tab-icon {
        position: relative;
        top: 1px;
    }

    .e-chart-line:before {
        content:'\e722';
    }

    .e-chart-candle:before{
        content: '\e86a';
    }

    .e-data-grid:before {
        content: '\e7b5';
    }
I enclose a screenshot and the html file from where I get the icons, that I had been sent time ago from the support, maybe something changed and the icons I had chosen do not exist anymore.
Barbara Inzitari

Attachment: MyCode_7b820c22.zip

DD Dharanidharan Dharmasivam Syncfusion Team September 28, 2018 09:47 AM UTC

Hi Inzitari, 
 
Thanks for the provided information. Kindly find the response for your queries below. 
 
Query #1: Chart Component 
Response: Now you can find the code snippet with the online samples for changes in chart component with lambda expression. 
 
 
Query #2: Tab Component 
Response:  We would like to let you know that to reduce the size of our Icon file, we have removed the unused icons from our icon list, which are not used by our components. But we can provide you those old icons in a separate CSS file. We have hosted our unused icons style in the below CDN link and you can directly use it in your application.   
  
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/custom-icons.css" rel="stylesheet" />   
 
Also, we request you to add the e-custom-icons class in the HTML element with the corresponding content style by using below code snippet.   
 
<span class="e-custom-icons search"></span>   
<style>   
  .search::before {   
    content: '\e806'   
  }   
</style>   
   
 
For your convenience, we have created a simple application in the stackblitz and the same can be referred by the below link,   
 
You can also refer the below link to know the unused icons removed from our icon library.   
 
Thanks, 
Dharani. 


NI nimue September 28, 2018 03:56 PM UTC

Hi Dharani,
Thank you very much for your support, for the links to the demo of the new version, to the icons, and for the examples you sent me. Now the icons are back !!!
Good weekend.
Babara Inzitari

SK Sanjith Kesavan Syncfusion Team October 1, 2018 12:35 PM UTC

Hi Inzitari  , 

Thanks for your update. Please let us know if you have any other queries. 

Thanks, 
Sanjith. 


Loader.
Up arrow icon