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.
<ejs-chart id="container" title="Sales History of Product X" load="load">
<e-chart-primaryxaxis valueType="DateTime" zoomFactor="0.3"></e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Profit ($)"></e-chart-primaryyaxis>
<e-chart-zoomsettings enableMouseWheelZooming="true" enableScrollbar="true" enablePinchZooming="true" enableSelectionZooming="true" mode="X"></e-chart-zoomsettings>
<e-series-collection>
<e-series name="Product X" xName="xValue" yName="yValue"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line" dataSource=" ViewBag.dataSource"
size="bubbleSize"></e-series>
</e-series-collection>
</ejs-chart>
<script>
function load(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;
}