Area Chart in EJ2 JavaScript control
28 Sep 202314 minutes to read
Area
To render a area series, use series type
as Area
and inject AreaSeries
module using Chart.Inject(AreaSeries)
method.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
name: 'Product A',border: { width: 2 },
// Series type as area series
type: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea
, and inject the MultiColoredAreaSeries
module using Chart.Inject(MultiColoredAreaSeries)
method. The required segments
of the series can be customized using the value
, color
, and dashArray
.
var chart = new ej.charts.Chart({
series:[{
dataSource: [{ x: 2005, y: 28 }, { x: 2006, y: 25}, { x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32}, { x: 2010, y: 35 }, { x: 2011, y: 25 }],
xName: 'x', yName: 'y',
type: 'MultiColoredArea',
segmentAxis: 'X',
segments: [{
value: 2007,
color: 'blue'
}, {
value: 2009,
color: 'lightgreen'
}, {
color: 'orange'
}],
}],
}, '#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="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Series customization
The following properties can be used to customize the area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
//stroke-width for chart series
width: 3,
// dashArray for chart series
dashArray: '5,5',
name: 'Product A',
// Series type as area series
type: 'Area',
border:{width:2, color:'Red'},
}],
title: 'Average Sales Comparison'
}, '#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="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Area border
The following properties can be used to customize the area
series.
- fill – Specifies the color of the area series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes of series.
var chartData = [
{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 },
{ x: 1960, y: 3.4 }, { x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
title: 'Year',
minimum: 1900, maximum: 2000, interval: 10,
edgeLabelPlacement: 'Shift'
},
primaryYAxis: {
minimum: 2, maximum: 5, interval: 0.5,
title: 'Sales Amount in Millions'
},
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
opacity: 0.5, fill:'#69D2E7',
name: 'Product A',border: { width: 2 },
// Series type as area series
type: 'Area'
}],
title: 'Average Sales Comparison'
}, '#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="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>