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.
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/[email protected]/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.