Apex Chart header small text goes here...
JavaScript Line Charts are a typical pictorial representation that depicts trends and behaviors over time. It is represented by a series of data points connected with a line.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-line-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'line', toolbar: { show: false } },
title: { text: 'Average High & Low Temperature', align: 'center' },
colors: [app.color.blue, app.color.success],
dataLabels: { enabled: true, background: { borderWidth: 0 } },
stroke: { curve: 'smooth', width: 3 },
series: [
{ name: 'High - 2021', data: [28, 29, 33, 36, 32, 32, 33] },
{ name: 'Low - 2021', data: [12, 11, 14, 18, 17, 13, 13] }
],
grid: { row: { colors: ['rgba('+ app.color.componentColorRgb + ', .1)', 'transparent'], opacity: 0.5 } },
markers: { size: 4 },
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
},
yaxis: { min: 5, max: 40 },
legend: {
show: true,
position: 'top',
offsetY: -10,
horizontalAlign: 'right',
floating: true,
}
};
var chart = new ApexCharts(
document.querySelector('#apex-line-chart'),
options
);
chart.render();
</script>A JavaScript Column Chart, just like other bar graphs uses vertical bars to display data and is used to compare values across categories.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-column-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'bar' },
title: { text: 'Profit & Margin Chart', align: 'center' },
plotOptions: { bar: { horizontal: false, columnWidth: '55%', endingShape: 'rounded' } },
dataLabels: { enabled: false },
stroke: { show: true, width: 2, colors: ['transparent'] },
colors: ['rgba('+ app.color.componentColorRgb + ', .5)', app.color.indigo, 'rgba('+ app.color.componentColorRgb + ', .25)'],
series: [
{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] },
{ name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] },
{ name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }
],
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: { title: { text: '$ (thousands)' } },
fill: { opacity: 1 },
tooltip: {
y: {
formatter: function (val) { return "$ " + val + " thousands" }
}
}
};
var chart = new ApexCharts(
document.querySelector('#apex-column-chart'),
options
);
chart.render();
</script>With their mountain-like appearance, JavaScript Area Charts are used to represent quantitative variations.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-area-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'area', },
dataLabels: { enabled: false },
stroke: { curve: 'smooth', width: 3 },
colors: [app.color.pink, app.color.dark],
series: [
{ name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] },
{ name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }
],
xaxis: {
type: 'datetime',
categories: ['2019-09-19T00:00:00', '2019-09-19T01:30:00', '2019-09-19T02:30:00', '2019-09-19T03:30:00', '2019-09-19T04:30:00', '2019-09-19T05:30:00', '2019-09-19T06:30:00'],
},
tooltip: { x: { format: 'dd/MM/yy HH:mm' } }
};
var chart = new ApexCharts(
document.querySelector('#apex-area-chart'),
options
);
chart.render();
</script>Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-bar-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'bar', },
plotOptions: { bar: { horizontal: true, dataLabels: { position: 'top' } } },
dataLabels: { enabled: true, offsetX: -6 },
colors: [app.color.orange, 'rgba('+ app.color.componentColorRgb + ', .5)'],
stroke: { show: true, width: 1, colors: [app.color.componentBg] },
series: [
{ data: [44, 55, 41, 64, 22, 43, 21] },
{ data: [53, 32, 33, 52, 13, 44, 32] }
],
xaxis: {
categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019]
}
};
var chart = new ApexCharts(
document.querySelector('#apex-bar-chart'),
options
);
chart.render();
</script>A JavaScript Mixed Chart or a Combo Chart is a visualization that allows the combination of two or more distinct graphs.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-mixed-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'line', stacked: false },
dataLabels: { enabled: false },
series: [
{ name: 'Income', type: 'column', data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6] },
{ name: 'Cashflow', type: 'column', data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5] },
{ name: 'Revenue', type: 'line', data: [20, 29, 37, 36, 44, 45, 50, 58] }
],
stroke: { width: [0, 0, 3] },
colors: [app.color.blue, app.color.success, app.color.orange],
title: { text: 'XYZ - Stock Analysis (2013 - 2021)', align: 'left', offsetX: 110 },
xaxis: { categories: [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021] },
yaxis: [{
axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
title: { text: "Income (thousand crores)", style: { color: app.color.componentColor } },
tooltip: { enabled: true }
},{
seriesName: 'Income',
opposite: true,
axisTicks: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
axisBorder: { show: true, color: 'rgba('+ app.color.componentColorRgb + ', .15)' },
title: { text: "Operating Cashflow (thousand crores)", style: { color: app.color.componentColor } },
}, {
seriesName: 'Revenue',
opposite: true,
axisTicks: { show: true },
axisBorder: { show: true, color: app.color.orange },
title: { text: "Revenue (thousand crores)", style: { color: app.color.orange } }
}],
tooltip: { fixed: { enabled: true, position: 'topLeft', offsetY: 30, offsetX: 60 } },
legend: { horizontalAlign: 'left', offsetX: 40 }
};
var chart = new ApexCharts(
document.querySelector('#apex-mixed-chart'),
options
);
chart.render();
</script>A candlestick chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-candelstick-chart"></div>
<script>
var chart = new ApexCharts(
document.querySelector('#apex-candelstick-chart'), {
chart: { height: 350, type: 'candlestick' },
series: [{
data: [
{ x: new Date(1538778600000), y: [6629.81, 6650.5, 6623.04, 6633.33] },
{ x: new Date(1538780400000), y: [6632.01, 6643.59, 6620, 6630.11] },
{ x: new Date(1538782200000), y: [6630.71, 6648.95, 6623.34, 6635.65] },
{ x: new Date(1538784000000), y: [6635.65, 6651, 6629.67, 6638.24] },
{ x: new Date(1538785800000), y: [6638.24, 6640, 6620, 6624.47] },
{ x: new Date(1538787600000), y: [6624.53, 6636.03, 6621.68, 6624.31] },
{ x: new Date(1538789400000), y: [6624.61, 6632.2, 6617, 6626.02] },
{ x: new Date(1538791200000), y: [6627, 6627.62, 6584.22, 6603.02] },
{ x: new Date(1538793000000), y: [6605, 6608.03, 6598.95, 6604.01] },
{ x: new Date(1538794800000), y: [6604.5, 6614.4, 6602.26, 6608.02] }
]
}],
title: { text: 'CandleStick Chart', align: 'left' },
xaxis: {
type: 'datetime',
axisBorder: { show: true, color: COLOR_SILVER_TRANSPARENT_5, height: 1, width: '100%', offsetX: 0, offsetY: -1 },
axisTicks: { show: true, borderType: 'solid', color: COLOR_SILVER, height: 6, offsetX: 0, offsetY: 0 }
},
yaxis: { tooltip: { enabled: true } },
plotOptions: {
candlestick: {
colors: { upward: app.color.success, downward: app.color.red }
}
}
}
);
chart.render();
</script>JavaScript Bubble Charts are useful for showing data in a three-dimensional manner. In a bubble chart, data points are depicted with bubbles.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-bubble-chart"></div>
<script>
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
series.push([
Math.floor(Math.random() * (750 - 1 + 1)) + 1,
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
Math.floor(Math.random() * (75 - 15 + 1)) + 15
]);
baseval += 86400000;
i++;
}
return series;
}
var chart = new ApexCharts(
document.querySelector('#apex-bubble-chart'), {
chart: { height: 350, type: 'bubble', },
dataLabels: { enabled: false },
colors: [app.color.blue, app.color.orange, app.color.success, app.color.pink],
series: [
{ name: 'Bubble1', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
{ name: 'Bubble2', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
{ name: 'Bubble3', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) },
{ name: 'Bubble4', data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, { min: 10, max: 60 }) }
],
fill: { opacity: 0.8 },
title: { text: 'Simple Bubble Chart' },
xaxis: { tickAmount: 12, type: 'category' },
yaxis: { max: 70 }
}
);
chart.render();
</script>For non-linearly related variables, JavaScript Scatter Charts are quite useful when there is a need to graphically establish a relationship between the variables.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-scatter-chart"></div>
<script>
var chart = new ApexCharts(
document.querySelector('#apex-scatter-chart'), {
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
}
},
colors: [app.color.blue, app.color.orange, app.color.success],
series: [
{ name: "SAMPLE A", data: [ [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0] ] },
{ name: "SAMPLE B", data: [ [36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10] ] },
{ name: "SAMPLE C", data: [ [21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3] ] }
],
xaxis: {
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: { tickAmount: 7 }
}
);
chart.render();
</script>A heat map is a two-dimensional representation of data in which values are represented by colors.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-heatmap-chart"></div>
<script>
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({ x: x, y: y });
i++;
}
return series;
}
var chart = new ApexCharts(
document.querySelector('#apex-heatmap-chart'), {
chart: { height: 350, type: 'heatmap', },
dataLabels: { enabled: false },
colors: [app.color.blue],
stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
series: [
{ name: 'Metric1', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric2', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric3', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric4', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric5', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric6', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric7', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric8', data: generateData(18, { min: 0, max: 90 }) },
{ name: 'Metric9', data: generateData(18, { min: 0, max: 90 }) }
],
title: { text: 'HeatMap Chart (Single color)' }
}
);
chart.render();
</script>A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-pie-chart"></div>
<script>
var options = {
chart: {
height: 365,
type: 'pie',
},
dataLabels: {
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
opacity: 0.45
}
},
stroke: { show: true, colors: [app.color.componentBg], width: 2, dashArray: 0 },
colors: [app.color.pink, app.color.orange, app.color.blue, app.color.success, app.color.indigo],
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
series: [44, 55, 13, 43, 22],
title: {
text: 'HeatMap Chart (Single color)'
}
};
var chart = new ApexCharts(
document.querySelector('#apex-pie-chart'),
options
);
chart.render();
</script>Radial Bar Charts are valuable in showing comparisons between categories by using circularly shaped bars.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-radial-bar-chart"></div>
<script>
var options = {
chart: { height: 350, type: 'radialBar' },
plotOptions: {
radialBar: {
offsetY: -10,
startAngle: 0,
endAngle: 270,
hollow: { margin: 5, size: '30%', background: 'transparent', image: undefined, },
dataLabels: { name: { show: false, }, value: { show: false, } }
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
series: [76, 67, 61, 90],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
position: 'left',
offsetX: 140,
offsetY: 15,
labels: { useSeriesColors: true },
markers: { size: 0 },
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: { horizontal: 1 }
}
}
var chart = new ApexCharts(
document.querySelector('#apex-radial-bar-chart'),
options
);
chart.render();
</script>Radar chart is a graphical method of displaying two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.
<!-- required files -->
<script src="../assets/plugins/apexcharts/dist/apexcharts.min.js"></script>
<div id="apex-radar-chart"></div>
<script>
var chart = new ApexCharts(
document.querySelector('#apex-radar-chart'), {
chart: { height: 320, type: 'radar' },
series: [{ name: 'Series 1', data: [20, 100, 40, 30, 50, 80, 33] }],
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
plotOptions: {
radar: {
size: 140,
strokeColor: 'rgba('+ app.color.componentColorRgb + ', .25)',
fill: {
colors: ['rgba('+ app.color.componentColorRgb + ', .05)', 'rgba('+ app.color.componentColorRgb + ', .15)']
}
}
},
title: { text: 'Radar with Polygon Fill' },
colors: [app.color.blue],
markers: { size: 4, colors: [app.color.componentBg], strokeColor: app.color.blue, strokeWidth: 2 },
tooltip: { y: { formatter: function(val) { return val } } },
yaxis: {
tickAmount: 7,
labels: {
formatter: function(val, i) {
return (i % 2 === 0) ? val : '';
}
}
}
}
);
chart.render();
</script>