InversedAxis.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
   <div class="control-section">
        <div id="container" align="center">
            <ejs-chart id="lineContainer" title="Exchange Rate(INR per USD)" pointRender="labelRender" load="load">
                <e-chart-tooltipsettings enable="true">
                </e-chart-tooltipsettings>
                <e-chart-primaryxaxis valueType="Category"
                                      opposedPosition=true
                                      isInversed=true>
                    <e-majorgridlines width="0"></e-majorgridlines>
                </e-chart-primaryxaxis>
                <e-chart-primaryyaxis edgeLabelPlacement="Shift" ,
                                      labelIntersectAction="Rotate45"
                                      isInversed=true >
                    <e-majorgridlines width="0"></e-majorgridlines>
                    <e-majorticklines width="0"></e-majorticklines>
                    <e-linestyle width="0"></e-linestyle>
                    <e-labelstyle color="transparent"></e-labelstyle>
                </e-chart-primaryyaxis>
                <e-chart-chartarea>
                    <e-chartarea-border width="0"></e-chartarea-border>
                </e-chart-chartarea>
                <e-chart-legendsettings visible="false">
                </e-chart-legendsettings>
                <e-series-collection>
                    <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                        <e-series-marker>
                            <e-series-datalabel visible="true" position="Top">
                                <e-font color="#ffffff" fontWeight="600"></e-font>
                            </e-series-datalabel>
                        </e-series-marker>
                    </e-series>
                </e-series-collection>
            </ejs-chart>
        </div>
    </div>
    <script src="~/scripts/chart/financial-data.js"></script>
    <script>
    @*custom code start*@
        function load(args) {
            var indexedTheme = location.hash.split('/')[1];
            indexedTheme = indexedTheme ? indexedTheme : 'Material';
            args.chart.theme = (indexedTheme.charAt(0).toUpperCase() + indexedTheme.slice(1).replace(/dark/i, "Dark").replace(/light/i, "Light"));
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
        }
    @*custom code end*@
        function labelRender(args) {
            var selectedTheme = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
            if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
                args.fill = window.fabricColors[args.point.index % 10];
            } else if (selectedTheme === 'material') {
                args.fill = window.materialColors[args.point.index % 10];
            } else if (selectedTheme === 'highcontrast') {
                args.fill = window.highContrastColors[args.point.index % 10];
            } else {
                args.fill = window.bootstrapColors[args.point.index % 10];
            }

        }
    </script>

}
@*custom code start*@
@section Meta{
    <meta name="description" content="This demo for Essential JS2 Chart control shows how to invert the axis in charts." />
}
@*custom code end*@
@section ActionDescription{

    <div id="action-description">
        <p>
            This sample illustrates inversed axis in chart to plot exchange rate over a period.
        </p>
    </div>
}
@section Description {
    <div id="description">
        <p>
            In this example, you can see how to inverse an axis in chart. Here both the X and Y axis are inversed using <code>isInversed</code> property.
        </p>
        <p> DataLabel are used to represent individual data and its value.</p>
        <p>
            Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
        </p>
        <p>
            More information on inversed axis can be found in this
            <a target="_blank" href="http://ej2.syncfusion.com/react/documentation/chart/api-axis.html#isInversed">documentation section</a>.
        </p>
    </div>

}