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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Step area with invertical vertical x-axis

Thread ID:

Created:

Updated:

Platform:

Replies:

127848 Dec 13,2016 02:11 PM UTC Jan 12,2018 10:38 AM UTC ASP.NET MVC 5
loading
Tags: Chart
Dennis Kroger
Asked On December 13, 2016 02:11 PM UTC

I am facing an issue with the step area function where I want to use a vertical chart with inverted x-axis. If I do not invert the x-axis everything looks fine:

@{
    ViewBag.Title = "Chart";
    ViewData["ProductName"] = "Chart";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<svg width="400" height="110">
    <pattern id="pattern"
             x="0" y="0" width="24" height="24"
             patternUnits="userSpaceOnUse">
        <rect fill="rgba(159, 188, 191, 0.4)" x="0" width="12" height="12" y="0" />
        <rect fill="rgba(159, 188, 191, 0.4)" x="12" width="12" height="12" y="12" />
    </pattern>
 
    <pattern id="anhydrite"
             x="0" y="0" width="34" height="30"
             patternUnits="userSpaceOnUse">
        <image xlink:rel='nofollow' href="~/Images/anhydrite.gif" x="0" y="0" width="34" height="30"></image>
    </pattern>
 
    <pattern id="chert"
             x="0" y="0" width="28" height="28"
             patternUnits="userSpaceOnUse">
        <image xlink:rel='nofollow' href="~/Images/chert2.png" x="0" y="0" width="28" height="32"></image>
    </pattern>
</svg>
 
 
<div>
   @(Html.EJ().Chart("container")
        
        .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Year")).IsInversed(false))
        .PrimaryYAxis(pr => pr.Title(tl => tl.Text("Production(billion kWh)")).LabelFormat("{value}B")
        .RangePadding(ChartRangePadding.Normal))
        .CommonSeriesOptions(cr => cr.Type(SeriesType.StepArea).EnableAnimation(true)
        )
        .Series(sr =>
            {
                sr.Points(pt =>
                    {
                        pt.X("2000").Y(416).Add();
                        pt.X("2001").Y(490).Add();
                        pt.X("2002").Y(470).Add();
                        pt.X("2003").Y(500).Add();
                        pt.X("2004").Y(449).Add();
                        pt.X("2005").Y(470).Add();
                        pt.X("2006").Y(437).Add();
                        pt.X("2007").Y(458).Add();
                        pt.X("2008").Y(500).Add();
                        pt.X("2009").Y(473).Add();
                        pt.X("2010").Y(520).Add();
                        pt.X("2011").Y(509).Add();
                    }).Name("USA").IsTransposed(true).Opacity(1).Fill("#445566").Add();
                sr.Points(pt =>
                    {
                        pt.X("2000").Y(216).Add();
                        pt.X("2001").Y(290).Add();
                        pt.X("2002").Y(270).Add();
                        pt.X("2003").Y(300).Add();
                        pt.X("2004").Y(249).Add();
                        pt.X("2005").Y(270).Add();
                        pt.X("2006").Y(237).Add();
                        pt.X("2007").Y(258).Add();
                        pt.X("2008").Y(300).Add();
                        pt.X("2009").Y(273).Add();
                        pt.X("2010").Y(320).Add();
                        pt.X("2011").Y(309).Add();
                    }).Name("Brazil").IsTransposed(true).Opacity(1).Fill("#69D2E7").Add();
                
            })
        .IsResponsive(true)
        .Loaded("chartLoaded")
        .Title(title => title.Text("Electricity- Production"))
        .Size(sz => sz.Height("600"))
        .Legend(lg => { lg.Visible(true)})
)
</div>
<script>
    function chartLoaded(sender) {
        $("#" + this.svgObject.id + "_Series0")[0].setAttribute("fill""url(#anhydrite)");
        $("#" + this.svgObject.id + "_Series1")[0].setAttribute("fill""url(#chert)");
    }
   
</script>

However, if I invert the x-axis I get this:
Statement modified: 
.PrimaryXAxis(pr => pr.Title(tl => tl.Text("Year")).IsInversed(true))

Is there anything I can do to fix this or do you have any suggestions for other ways to do this?


Dharanidharan Dharmasivam [Syncfusion]
Replied On December 14, 2016 01:24 PM UTC

Hi Dennis, 

Thanks for using Syncfusion product. 

We have analyzed your query. We can able to reproduce the reported issue and so logged issue report for your scenario. For better follow up, we have created branch incident (#169187). Kindly follow up with incident(#169187) for more information on the reported issue. 
 
Kindly revert us, if you have concern on this. 

Thanks, 
Dharani. 


Mohsen Saad
Replied On January 10, 2018 06:59 PM UTC

Hi Dennis, 

Thanks for using Syncfusion product. 

We have analyzed your query. We can able to reproduce the reported issue and so logged issue report for your scenario. For better follow up, we have created branch incident (#169187). Kindly follow up with incident(#169187) for more information on the reported issue. 
 
Kindly revert us, if you have concern on this. 

Thanks, 
Dharani. 


valid message

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 11, 2018 09:04 AM UTC

Hi Mohsen, 

Thanks for the update. 

Regarding the issue stated below, we would like to know, do you need further assistance on this. 

Dharani. 



Dennis Kroger
Replied On January 11, 2018 02:05 PM UTC

No, I was able to work around it.

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 12, 2018 10:38 AM UTC

Hi Mohsen, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Dharani. 



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.

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

;