By setting zoomFactor in primaryXAxis and isZoomed value as true in
load event and enableScrollbar value as true inzoomSettings, you can make the scrollbar visible in initial rendering of chart.
import { Chart, LineSeries, DateTime, Legend, Tooltip, ILoadedEventArgs, ChartTheme, Zoom, ScrollBar } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Zoom, ScrollBar);
let chart: Chart = new Chart({
primaryXAxis: {
zoomFactor: 0.3,
valueType: 'DateTime',
labelFormat: 'y',
intervalType: 'Years',
edgeLabelPlacement:'Shift'
},
primaryYAxis:
{
labelFormat: '{value}%',
rangePadding: 'None',
minimum: 0,
maximum: 100,
interval: 20,
},
series: [
{
type: 'Line',
dataSource: [
{ x: new Date(2005, 0, 1), y: 21 },
{ x: new Date(2006, 0, 1), y: 24 },
{ x: new Date(2007, 0, 1), y: 36 },
{ x: new Date(2008, 0, 1), y: 38 },
{ x: new Date(2009, 0, 1), y: 54 },
{ x: new Date(2010, 0, 1), y: 21 },
{ x: new Date(2011, 0, 1), y: 24 },
{ x: new Date(2012, 0, 1), y: 36 },
{ x: new Date(2013, 0, 1), y: 38 },
{ x: new Date(2014, 0, 1), y: 54 },
{ x: new Date(2015, 0, 1), y: 21 },
{ x: new Date(2016, 0, 1), y: 24 },
{ x: new Date(2017, 0, 1), y: 36 },
{ x: new Date(2018, 0, 1), y: 38 },
],
xName: 'x', width: 2, marker: {
visible: true,
width: 10,
height: 10
},
yName: 'y', name: 'Germany',
}
],
zoomSettings:
{
enableMouseWheelZooming: true,
enablePinchZooming: true,
enableSelectionZooming: true,
mode: 'X',
enableScrollbar: true,
},
title: 'Inflation - Consumer Price',
tooltip: {
enable: true
},
load: (args: ILoadedEventArgs) => {
args.chart.zoomModule.isZoomed = true;
}
});
chart.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">
<div id='container'>
<div id='element' style="width:350px; height:350px;float:left">
</div>
<label id="lbl"></label>
</div>
</div>
<div class="col-sm-4" style="width:200px; height:350px;float: right">
<div id='Grid'>
</div>
</div>
</div>
</div>
</body>
</html>