To make the scrollbar visible in initial rendering of chart
17 Feb 20226 minutes 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.
@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>
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;
}