$(function(){
$("#chart").dxChart({
palette: "violet",
dataSource: dataSource,
commonSeriesSettings: {
type: "rangeArea",
argumentField: "date"
},
series: {
rangeValue1Field: "val2010",
rangeValue2Field: "val2011",
name: "2010 - 2011"
},
title: "Annual Inflation Rate in 2010 and 2011",
argumentAxis:{
valueMarginsEnabled: false,
label: {
format: "month"
}
},
valueAxis: {
visualRange:{
startValue: 0.5,
endValue: 4
},
tickInterval: 0.5,
valueMarginsEnabled: false,
label: {
format: {
type: "fixedPoint",
precision: 2
},
customizeText: function(){
return this.valueText + " %";
}
}
},
"export": {
enabled: true
},
legend: {
visible:false
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.6/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="chart"></div>
</div>
</body>
</html>
#chart {
height: 440px;
}
var dataSource = [{
date: new Date(2010, 0, 1),
val2010: 1.63,
val2011: 2.63
}, {
date: new Date(2010, 1, 1),
val2010: 2.11,
val2011: 2.14
}, {
date: new Date(2010, 2, 1),
val2010: 2.68,
val2011: 2.31
}, {
date: new Date(2010, 3, 1),
val2010: 3.16,
val2011: 2.24
}, {
date: new Date(2010, 4, 1),
val2010: 3.57,
val2011: 2.02
}, {
date: new Date(2010, 5, 1),
val2010: 3.56,
val2011: 1.05
}, {
date: new Date(2010, 6, 1),
val2010: 3.63,
val2011: 1.24
}, {
date: new Date(2010, 7, 1),
val2010: 3.77,
val2011: 1.15
}, {
date: new Date(2010, 8, 1),
val2010: 3.87,
val2011: 1.14
}, {
date: new Date(2010, 9, 1),
val2010: 3.53,
val2011: 1.17
}, {
date: new Date(2010, 10, 1),
val2010: 3.39,
val2011: 1.14
}, {
date: new Date(2010, 11, 1),
val2010: 2.96,
val2011: 1.50
}];