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

Step area with invertical vertical x-axis

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?


5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team 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. 



MS Mohsen Saad replied to Dharanidharan Dharmasivam 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


DD Dharanidharan Dharmasivam Syncfusion Team 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. 




DK Dennis Kroger January 11, 2018 02:05 PM UTC

No, I was able to work around it.


DD Dharanidharan Dharmasivam Syncfusion Team January 12, 2018 10:38 AM UTC

Hi Mohsen, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Dharani. 



Loader.
Live Chat Icon For mobile
Up arrow icon