Step area with invertical vertical x-axis

[Dennis Kroger]

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]

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]

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]

Hi Mohsen, 

Thanks for the update. 

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

Thanks, 

Dharani. 

[Dennis Kroger]

No, I was able to work around it.

[Dharanidharan Dharmasivam]

Hi Mohsen, 

Thanks for the update. 

Kindly revert us, if you need any further assistance. 

Thanks, 

Dharani.