Search results

To make the scrollbar visible in initial rendering of chart

22 Jul 2021 / 1 minute to read

By setting zoomFactor in primaryXAxis and isZoomed value as true in load event and enableScrollbar value as true in zoomSettings, you can make the scrollbar visible in initial rendering of chart.

razor
initial-scroll.cs
Copied to clipboard
@Html.EJS().Chart("container").Series(series =>
                               {
                                   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue")
                                   .Marker(mr => mr.Visible(true).Width(10).Height(10)).YName("yValue")
                                   .DataSource(ViewBag.dataSource).Name("Germany").Add();
                               }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
                               .IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years)
                               .EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y").ZoomFactor(0.3)
                             ).PrimaryYAxis(py => py.LabelFormat("{value}%")
                             .RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)
                             .Interval(20).Minimum(0).Maximum(100)
                             ).Title("Inflation - Consumer Price").Load("load").ZoomSettings(zm=>zm.EnableMouseWheelZooming(true).EnablePinchZooming(true).EnableSelectionZooming(true).EnableDeferredZooming(true).EnableScrollbar(true)).Render()
<script>
    var load = function (args) {
        args.chart.zoomModule.isZoomed = true;
    }
</script>
Copied to clipboard
public IActionResult Index()
        {
           List<LineChartData> chartData = new List<LineChartData>
            {
                new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
                new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
                new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
                new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
                new LineChartData { xValue = new DateTime(2009, 01, 01), yValue = 54, yValue1 = 66 },
                new LineChartData { xValue = new DateTime(2010, 01, 01), yValue = 57, yValue1 = 78 },
                new LineChartData { xValue = new DateTime(2011, 01, 01), yValue = 70, yValue1 = 84 },
                new LineChartData { xValue = new DateTime(2012, 01, 01), yValue = 78, yValue1 = 84 },
                new LineChartData { xValue = new DateTime(2013, 01, 01), yValue = 60, yValue1 = 84 },
                new LineChartData { xValue = new DateTime(2014, 01, 01), yValue = 78, yValue1 = 84 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }

        public class LineChartData
        {
            public DateTime xValue;
            public double yValue;
            public double yValue1;
        }