thank you for your fast answer. I modified your sample to show you exactly what the problem is that i have:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='nofollow' href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="//cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="17.1.0.38/themes/web/content/default.css" rel="stylesheet" />
<link rel='nofollow' href="17.1.0.38/themes/web/content/default-responsive.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="//cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js"></script>
<script src="17.1.0.38/scripts/web/properties.js" type="text/javascript"></script>
<style>
.e-scrollbar .e-hscroll {
border:1px solid #c8c8c8;
height:100%;
}
.e-scroller .e-hscroll .e-hup.e-button {
width:16px !important;
}
e-scrollbar .e-hscroll .e-icon {
height:15px !important;
}
</style>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="container"></div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(function ()
{
$("#container").ejChart(
{
//Initializing Primary X Axis
primaryXAxis:
{
title: {text: "Sales Across Years"},
range: {min: new Date(2000, 6, 1), max: new Date(2010, 6, 1), interval: 1},
intervalType: 'Years',
labelFormat: 'MMM-yyyy',
valueType: 'datetime'
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: {text: "Sales Amount in millions(USD)"},
labelFormat: '${value}',
range:{min: 0, max: 100}
// rangePadding: 'additional'
},
//Initializing Common Properties for all the series
commonSeriesOptions:
{
tooltip:
{
visible: true
}
},
//Initializing Series
series:
[
{
points: [{ x: new Date(2000, 06, 11), y: 10 }, { x: new Date(2002, 03, 07), y: 30 },
{ x: new Date(2004, 03, 06), y: 15 }, { x: new Date(2006, 03, 30), y: 65 },
{ x: new Date(2008, 03, 08), y: 90 }, { x: new Date(2010, 03, 08), y: 85 }],
name: 'Sales',
type: 'line',
enableAnimation : true,
marker:
{
shape: 'circle',
size:
{
height: 10, width: 10
},
visible: true
},
border:{width: 3},
tooltip :{ format: " Date : #point.x# <br/> Profit : #point.y# "}
}
],
//Initializing Zooming
zooming:
{
enable: true,
type: 'x,y',
enableMouseWheel: true,
enableScrollbar:true
},
title:{text: 'Server CPU Load'},
isResponsive: true,
size: { height: "600" },
legend: { visible: false},
chartClick : function (args){
$("#container").ejChart("instance").option({primaryYAxis: { range : { min:30 , max: 100}}});
$("#container").ejChart("redraw");
}
});
});
</script>
</body>
</html>
If you run this code and make a click in the chart, the range on the y axis is set correctly, but if you run the code again, zoom in and click in the chart, the axis range is not updated. I would need to be able to update the axis range even when i am zoomed into the chart.
