# Highcharts Zoomable Time Series Chart

In the previous chapters, we learned how to setup highcharts library and how to create a chart with required configurations using highcharts library in our webpage. Now, we will learn how to create a time series chart with zoomable effects using highcharts library with examples.

## Highcharts Time Series Chart Example

Following is the example of creating a time series chart with zoomable effect by setting the required time series properties using highcharts library.

<html>

<head>

<title>Highcharts Time Series, Zoomable Chart</title>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

<script src="https://code.highcharts.com/modules/export-data.js"></script>

<script type="text/javascript">

\$(function() {

\$.getJSON(

'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',

function(data) {

Highcharts.chart('container', {

chart: {

zoomType: 'x'

},

title: {

text: 'USD to EUR exchange rate over time'

},

subtitle: {

text: document.ontouchstart === undefined ?

'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'

},

xAxis: {

type: 'datetime'

},

yAxis: {

title: {

text: 'Exchange rate'

}

},

legend: {

enabled: false

},

plotOptions: {

area: {

fillColor: {

linearGradient: {

x1: 0,

y1: 0,

x2: 0,

y2: 1

},

stops: [

[0, Highcharts.getOptions().colors[0]],

[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]

]

},

marker: {

radius: 2

},

lineWidth: 1,

states: {

hover: {

lineWidth: 1

}

},

threshold: null

}

},

series: [{

type: 'area',

name: 'USD to EUR',

data: data

}]

});

}

);

});

</script>

</head>

<body>

<div id="container" style="width: 100%; height: 400px;"> </div>

</body>

</html>

If you observe the above example, we added time-series properties to create a zoomable chart using highcharts library with required properties.

When we execute the above highcharts example, we will get the result like as shown below.

This is how we can create a time series chart with zoomable effect using highcharts library with required time-series properties.