Area Charts
A Area Charts are used to represent quantitative variations.
Basic example
<div id="area_chart_1"></div>
<!-- Apex JS -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/irregular-data-series.js"></script>
<script src="dist/js/stock-prices.js"></script>
<script src="dist/js/area-chart-init.js"></script>
/*Basic Area*/
var options = {
series: [{
name: "STOCK ABC",
data: series.monthDataSeries1.prices
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
labels: series.monthDataSeries1.dates,
xaxis: {
type: 'datetime',
},
legend: {
horizontalAlign: 'left'
}
};
var chart = new ApexCharts(document.querySelector("#area_chart_1"), options);
chart.render();
Spline area
<div id="area_chart_2"></div>
/*Spline Area*/
var options1 = {
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
chart: {
height: 350,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart1 = new ApexCharts(document.querySelector("#area_chart_2"), options1);
chart1.render();
Negative area
<div id="area_chart_3"></div>
/*Negative Area*/
var options2 = {
series: [{
name: 'north',
data: [{
x: 1996,
y: 322
},
{
x: 1997,
y: 324
},
{
x: 1998,
y: 329
},
{
x: 1999,
y: 342
},
{
x: 2000,
y: 348
},
{
x: 2001,
y: 334
},
{
x: 2002,
y: 325
},
{
x: 2003,
y: 316
},
{
x: 2004,
y: 318
},
{
x: 2005,
y: 330
},
{
x: 2006,
y: 355
},
{
x: 2007,
y: 366
},
{
x: 2008,
y: 337
},
{
x: 2009,
y: 352
},
{
x: 2010,
y: 377
},
{
x: 2011,
y: 383
},
{
x: 2012,
y: 344
},
{
x: 2013,
y: 366
},
{
x: 2014,
y: 389
},
{
x: 2015,
y: 334
}
]
}, {
name: 'south',
data: [{
x: 1996,
y: 162
},
{
x: 1997,
y: 90
},
{
x: 1998,
y: 50
},
{
x: 1999,
y: 77
},
{
x: 2000,
y: 35
},
{
x: 2001,
y: -45
},
{
x: 2002,
y: -88
},
{
x: 2003,
y: -120
},
{
x: 2004,
y: -156
},
{
x: 2005,
y: -123
},
{
x: 2006,
y: -88
},
{
x: 2007,
y: -66
},
{
x: 2008,
y: -45
},
{
x: 2009,
y: -29
},
{
x: 2010,
y: -45
},
{
x: 2011,
y: -88
},
{
x: 2012,
y: -132
},
{
x: 2013,
y: -146
},
{
x: 2014,
y: -169
},
{
x: 2015,
y: -184
}
]
}],
chart: {
type: 'area',
height: 350
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
xaxis: {
type: 'datetime',
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
tickAmount: 4,
floating: false,
labels: {
style: {
colors: '#8e8da4',
},
offsetY: -7,
offsetX: 0,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
fill: {
opacity: 0.5
},
tooltip: {
x: {
format: "yyyy",
},
fixed: {
enabled: false,
position: 'topRight'
}
},
};
var chart2 = new ApexCharts(document.querySelector("#area_chart_3"), options2);
chart2.render();
Stacked area
<div id="area_chart_4"></div>
/*Stacked*/
var generateDayWiseTimeSeries = function(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
var options3 = {
series: [{
name: 'South',
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'North',
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 20
})
},
{
name: 'Central',
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
min: 10,
max: 15
})
}
],
chart: {
type: 'area',
height: 350,
stacked: true,
events: {
selection: function(chart, e) {
console.log(new Date(e.xaxis.min))
}
},
},
colors: ['#008FFB', '#00E396', '#CED4DC'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type: 'gradient',
gradient: {
opacityFrom: 0.6,
opacityTo: 0.8,
}
},
legend: {
position: 'top',
horizontalAlign: 'left'
},
xaxis: {
type: 'datetime'
},
};
var chart3 = new ApexCharts(document.querySelector("#area_chart_4"), options3);
chart3.render();
Irregular timeseries
<div id="area_chart_5"></div>
/*Irregular Timeseries*/
var ts1 = 1388534400000;
var ts2 = 1388620800000;
var ts3 = 1389052800000;
var dataSet = [
[],
[],
[]
];
for (var i = 0; i < 12; i++) {
ts1 = ts1 + 86400000;
var innerArr = [ts1, dataSeries[2][i].value];
dataSet[0].push(innerArr)
}
for (var i = 0; i < 18; i++) {
ts2 = ts2 + 86400000;
var innerArr = [ts2, dataSeries[1][i].value];
dataSet[1].push(innerArr)
}
for (var i = 0; i < 12; i++) {
ts3 = ts3 + 86400000;
var innerArr = [ts3, dataSeries[0][i].value];
dataSet[2].push(innerArr)
}
var options4 = {
series: [{
name: 'PRODUCT A',
data: dataSet[0]
}, {
name: 'PRODUCT B',
data: dataSet[1]
}, {
name: 'PRODUCT C',
data: dataSet[2]
}],
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [20, 100, 100, 100]
},
},
yaxis: {
labels: {
style: {
colors: '#8e8da4',
},
offsetX: 0,
formatter: function(val) {
return (val / 1000000).toFixed(2);
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 8,
min: new Date("01/01/2014").getTime(),
max: new Date("01/20/2014").getTime(),
labels: {
rotate: -15,
rotateAlways: true,
formatter: function(val, timestamp) {
return moment(new Date(timestamp)).format("DD MMM YYYY")
}
}
},
tooltip: {
shared: true
},
stroke: {
curve: 'smooth',
width: 2
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetX: -10
}
};
var chart4 = new ApexCharts(document.querySelector("#area_chart_5"), options4);
chart4.render();