StripLineRecurrence.cshtml

@using Syncfusion.EJ2;
@section ControlsSection{
<div>
    <div class="col-md-8 control-section">
        <div>

@Html.EJS().Chart("container").Series(series =>
{
    series.Name("All sources").XName("xValue").YName("yValue").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
    .DataSource(ViewBag.dataSource1).Width(2).Add();
    series.Name("Autos && Light Trucks").XName("xValue").YName("yValue").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column)
    .DataSource(ViewBag.dataSource2).Width(2).Add();
}).PrimaryXAxis(px => px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).Interval(5).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
.StripLines(sl=> { sl.StartFromAxis(true).Size(5).SizeType(Syncfusion.EJ2.Charts.SizeType.Years).IsRepeat(true).RepeatEvery(10).Visible(true).Color("rgba(167,169,171, 0.1)").Add(); })
.MajorGridLines(mg=>mg.Width(0))
    ).PrimaryYAxis(py => py.Minimum(0).Maximum(18000).Interval(2000).MajorGridLines(mg => mg.Color("rgba(167,169,171, 0.3)"))
    .MajorTickLines(mt => mt.Width(0)).LabelStyle(ls => ls.Color("transparent"))
    .StripLines(sl=> { sl.StartFromAxis(true).Size(2000).IsRepeat(true).RepeatEvery(4000).Visible(true).Color("rgba(167,169,171, 0.1)").Add();
    })
    .LineStyle(ls=>ls.Width(0))
    ).LegendSettings(lg => lg.Visible(false)).Tooltip(tt => tt.Format(" Year: ${point.x}<br> Tons Per Day: ${point.y}").Enable(true)
    ).Title("World Pollution Report").Load("load").Render()
 
        </div>
    </div>
    <div class="col-md-4 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <tbody>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            X Axis:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div>
                            <input type="checkbox" id="xIndex" checked>
                        </div>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Y Axis:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div>
                            <input type="checkbox" id="yIndex" checked>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

   @*custom code start*@
<style>
    #control-container {
        padding: 0px !important;
    }
</style>
   @*custom code end*@
    <script>
       @*custom code start*@
        var load = function (args) {
            var selectedTheme = themeName ? themeName : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');
        };
        @*custom code end*@
        document.getElementById('xIndex').onchange = function () {
            var chart = document.getElementById('container').ej2_instances[0];
            var xelement = (document.getElementById('xIndex'));
            chart.primaryXAxis.stripLines[0].visible = xelement.checked;
            chart.refresh();
        };
        document.getElementById('yIndex').onchange = function () {
            var chart = document.getElementById('container').ej2_instances[0];
            var yelement = (document.getElementById('yIndex'));
            chart.primaryYAxis.stripLines[0].visible = yelement.checked;
            chart.refresh();
        };
    </script>
}
   @*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the Strip Line Recurrence in ASP.NET MVC Chart control. Explore here for more details."/>
                }
   @*custom code end*@
@section ActionDescription{
    <p>
        This sample visualizes the Olympic medal count in Rio with default column series in the chart.
        Data points values are showed by using data label.
</p>
}
@section Description{
    <p>
        In this example, you can see how to render and configure the recurrence stripline in chart. Striplines are used to annotate the highlighted region with some notes. You
        can use
        <code>border</code>,
        <code>fill</code>
</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>
<br>
<p style="font-weight: 500">Injecting Module</p>
<p>
    Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
    <code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
</p>
<p>
    More information on the column series can be found in this
    <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
</p>
}
@section Title{
                    <title>ASP.NET MVC Chart Strip Line Recurrence Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Strip Line Recurrence in ASP.NET MVC Chart Control</h1>
                }