Third-Party Plugins
Tailwind CSS Charts
Tailwind CSS Charts combine the power of utility-first styling from Tailwind with ApexCharts to create clean, responsive, and highly customizable data visualizations.
How to use
-
1
Install Apexcharts
Install apexcharts via npmnpm i apexcharts -
2
Add the Apexcharts CSS
Include the CSS script tag near the end of your head tag:<link rel="stylesheet" href="./node_modules/apexcharts/dist/apexcharts.css"> -
3
Add the Apexcharts JavaScript
Include the CSS script tag near the end of your head tag:Include the JavaScript script tag near the end of your body tag:<script src="./node_modules/lodash/lodash.min.js"></script> <script src="./node_modules/apexcharts/dist/apexcharts.min.js"></script>
Single area chart
Below is an example of Single Area Chart that combines elements of a line chart using a continuous line to display data over time or categories, with the area below the line filled in with color to emphasize volume.
<div id="single_area_chart"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Single area chart=====================
var options1 = {
series: [{
name: "STOCK ABC",
data: [
{ x: new Date("01/01/2014").getTime(), y: 1 },
{ x: new Date("02/01/2014").getTime(), y: 2 },
{ x: new Date("03/01/2014").getTime(), y: 4 },
{ x: new Date("04/01/2014").getTime(), y: 6 },
{ x: new Date("05/01/2014").getTime(), y: 6 },
{ x: new Date("06/01/2014").getTime(), y: 7 },
{ x: new Date("07/01/2014").getTime(), y: 6 },
{ x: new Date("08/01/2014").getTime(), y: 9 },
{ x: new Date("09/01/2014").getTime(), y: 10 },
]
}],
chart: {
type: 'area',
height: 350,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
title: {
text: 'Fundamental Analysis of Stocks',
align: 'left'
},
subtitle: {
text: 'Price Movements',
align: 'left'
},
yaxis: {
labels: {
style: {
colors: '#8e8da4',
},
offsetX: 0,
formatter: function (val) {
return (val / 10).toFixed(0);
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 12,
min: new Date("01/01/2014").getTime(),
max: new Date("12/31/2014").getTime(),
},
legend: {
horizontalAlign: 'left'
}
};
var chart1 = new ApexCharts(document.querySelector("#single_area_chart"), options1);
chart1.render();
</script>Multiple area chart
Following is a Multiple Area Chart is a variation of an area chart that displays two or more datasets on the same graph, each with its own filled area.
<div id="multiple_area_chart"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Multiple area chart=====================
var dataSet = [
[
[new Date("01/01/2014").getTime(), 200],
[new Date("02/12/2014").getTime(), 270],
[new Date("03/01/2014").getTime(), 330],
[new Date("04/01/2014").getTime(), 390],
[new Date("05/01/2014").getTime(), 420],
[new Date("06/01/2014").getTime(), 510],
[new Date("07/01/2014").getTime(), 580],
[new Date("08/01/2014").getTime(), 670],
[new Date("09/15/2014").getTime(), 740],
[new Date("10/01/2014").getTime(), 790],
[new Date("11/01/2014").getTime(), 820],
[new Date("12/01/2014").getTime(), 880],
[new Date("12/31/2014").getTime(), 880]
],
[
[new Date("01/01/2014").getTime(), 200],
[new Date("02/10/2014").getTime(), 260],
[new Date("03/01/2014").getTime(), 330],
[new Date("04/01/2014").getTime(), 400],
[new Date("05/01/2014").getTime(), 520],
[new Date("06/01/2014").getTime(), 580],
[new Date("07/01/2014").getTime(), 620],
[new Date("08/01/2014").getTime(), 710],
[new Date("09/01/2014").getTime(), 740]
]
];
var options2 = {
series: [{
name: 'Employee',
data: dataSet[0],
color: '#C7D2FE',
stroke: {
curve: 'straight',
width: 2
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.95,
stops: [20, 100, 100, 100]
},
},
}, {
name: 'Intern',
data: dataSet[1],
color: '#4F46E5'
}],
chart: {
type: 'area',
stacked: false,
height: 350,
zoom: {
enabled: false
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false
},
markers: {
size: 0,
},
yaxis: {
labels: {
style: {
colors: '#8e8da4',
},
offsetX: 0,
formatter: function (val) {
return (val / 10).toFixed(0);
},
},
axisBorder: {
show: false,
},
axisTicks: {
show: false
}
},
xaxis: {
type: 'datetime',
tickAmount: 12,
min: new Date("01/01/2014").getTime(),
max: new Date("12/31/2014").getTime(),
},
legend: {
show: false,
position: 'top',
horizontalAlign: 'right',
offsetX: -10
}
};
var chart2 = new ApexCharts(document.querySelector("#multiple_area_chart"), options2);
chart2.render();
</script>Curved area charts
Below is a Curved Area Chart, it is a type of area chart where the data points are connected by smooth, flowing curves rather than sharp, angular lines.
<div id="curved-area-charts"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Curved area chart=====================
const options = {
chart: {
height: 300,
type: 'area',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: 'Income',
data: [18000, 51000, 60000, 38000, 88000, 50000, 40000, 52000, 88000, 80000, 60000, 70000]
},
{
name: 'Outcome',
data: [27000, 38000, 60000, 77000, 40000, 50000, 49000, 29000, 42000, 27000, 42000, 50000]
}
],
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: '#e5e7eb' // Adjust the color based on light/dark mode
},
fill: {
type: 'gradient',
gradient: {
type: 'vertical',
shadeIntensity: 1,
opacityFrom: 0.1,
opacityTo: 0.8
}
},
xaxis: {
type: 'category',
tickPlacement: 'on',
categories: [
'25 January 2023',
'26 January 2023',
'27 January 2023',
'28 January 2023',
'29 January 2023',
'30 January 2023',
'31 January 2023',
'1 February 2023',
'2 February 2023',
'3 February 2023',
'4 February 2023',
'5 February 2023'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: '#9ca3af',
fontSize: '13px',
fontFamily: 'Inter, ui-sans-serif',
fontWeight: 400
},
formatter: (title) => {
if (title) {
const [day, month] = title.split(' ');
return `${day} ${month.slice(0, 3)}`;
}
return title;
}
}
},
yaxis: {
labels: {
align: 'left',
minWidth: 0,
maxWidth: 140,
style: {
colors: '#9ca3af',
fontSize: '13px',
fontFamily: 'Inter, ui-sans-serif',
fontWeight: 400
},
formatter: (value) => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: 'MMMM yyyy'
},
y: {
formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
}
},
responsive: [{
breakpoint: 568,
options: {
chart: {
height: 300
},
xaxis: {
labels: {
style: {
colors: '#9ca3af',
fontSize: '11px',
fontFamily: 'Inter, ui-sans-serif',
fontWeight: 400
},
formatter: (title) => title.slice(0, 3)
}
},
yaxis: {
labels: {
style: {
colors: '#9ca3af',
fontSize: '11px',
fontFamily: 'Inter, ui-sans-serif',
fontWeight: 400
},
formatter: (value) => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}]
};
const chart = new ApexCharts(document.querySelector("#curved-area-charts"), options);
chart.render();
</script>Bar chart
Following is an example of bar chart which is a graphical representation of data using rectangular bars, where the length or height of each bar corresponds to the value it represents.
<div id="bar-chart"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Simple bar chart=====================
var optionsb1 = {
series: [{
data: [1100, 950, 640, 350, 540, 880, 920, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 380,
toolbar: {
show: false,
},
},
legend: {
show: false,
},
plotOptions: {
bar: {
barHeight: '100%',
borderRadius: 6,
columnWidth: '24px',
distributed: true,
horizontal: false,
dataLabels: {
position: 'bottom'
},
}
},
colors: ['#5654D4', '#1DBF73', '#FF9F0A'
],
dataLabels: {
enabled: false,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function () {
return ''
}
}
}
}
};
var chartb1 = new ApexCharts(document.querySelector("#bar-chart"), optionsb1);
chartb1.render();
</script>Multiple Bar chart
Below is a Multiple Bar Chart (also called a Grouped Bar Chart) is an extension of the basic bar chart that displays two or more sets of data side-by-side for each category.
<div id="multiple_bar_chart"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= multiple bar chart=====================
var optionsb2 = {
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]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
borderRadius: 5,
borderRadiusApplication: 'end'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
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 chartb2 = new ApexCharts(document.querySelector("#multiple_bar_chart"), optionsb2);
chartb2.render();
</script>Bar with Negative Values
Following is a Bar Chart with Negative Values is a type of bar chart that displays both positive and negative data points along the same axis.
<div id="Bar_With_Negative_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= bar with negative value chart=====================
var optionsb3 = {
series: [{
name: 'Cash Flow',
data: [-30.45, -25.9, -20.42, -22.6, 34.1, 21.1, 30.09, 34.37, -38.1, -49.8, -37.03, 48.6
]
}],
chart: {
type: 'bar',
height: 400,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
colors: {
ranges: [{
from: -100,
to: -36,
color: '#FB3B52'
}, {
from: -35,
to: 0,
color: '#FFEAEA'
},
{
from: 0,
to: 35,
color: '#ECF9FC'
},
{
from: 36,
to: 100,
color: '#3FC8E4'
}]
},
columnWidth: '60%',
borderRadius: 10
}
},
dataLabels: {
enabled: false,
},
yaxis: {
title: {
text: 'Growth',
},
labels: {
formatter: function (y) {
return y.toFixed(0) + "%";
}
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
rotate: -90
}
}
};
var chartb3 = new ApexCharts(document.querySelector("#Bar_With_Negative_chart"), optionsb3);
chartb3.render();
</script>Horizontal Bar chart
A Horizontal Bar Chart is a variation of the traditional bar chart where the bars extend horizontally rather than vertically.
<div id="Horizontal_Bar_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Horizontal bar chart=====================
var optionsb4 = {
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
borderRadius: 4,
borderRadiusApplication: 'end',
horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
'United States', 'China', 'Germany'
],
}
};
var chartb4 = new ApexCharts(document.querySelector("#Horizontal_Bar_chart"), optionsb4);
chartb4.render();
</script>Basic Line Chart
Below is a Basic Line Chart is a simple yet effective way to visualize data trends over a continuous interval, such as time. It consists of points connected by straight lines to show how values change sequentially.
<div id="line_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Basic Line chart=====================
var optionsl1 = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
colors: ['#4F46E5'], // Custom line color (e.g., bright orange)
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#EEF2FF', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.3
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
},
};
var chartl1 = new ApexCharts(document.querySelector("#line_chart"), optionsl1);
chartl1.render();
</script>Gradient Line Chart
This Example of Gradient Line Chart is an enhanced version of a basic line chart where the line or the area beneath the line is filled with a smooth color gradient.
<div id="Gradient_line_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Gradient Line chart=====================
var optionsl2 = {
series: [{
name: 'Sales',
data: [14, 23, 10, 9, 29, 19, 22, 9, 22, 17, 19, 5, 13, 9, 17, 2, 7, 5]
}],
chart: {
height: 350,
type: 'line',
},
forecastDataPoints: {
count: 7
},
stroke: {
width: 5,
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001'],
tickAmount: 10,
labels: {
formatter: function (value, timestamp, opts) {
return opts.dateFormatter(new Date(timestamp), 'dd MMM')
}
}
},
title: {
text: 'Forecast',
align: 'left',
style: {
fontSize: "16px",
color: '#666'
}
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: ['#152B47', '#035DDC'],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
},
}
};
var chartl2 = new ApexCharts(document.querySelector("#Gradient_line_chart"), optionsl2);
chartl2.render();
</script>Stepline chart
A Stepline Chart is a type of line chart where the data points are connected by horizontal and vertical lines, creating a step-like appearance rather than a smooth, diagonal connection.
<div id="Stepline_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Stepline chart =====================
var optionsl3 = {
series: [{
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
}],
chart: {
type: 'line',
height: 350
},
stroke: {
curve: 'stepline',
},
dataLabels: {
enabled: false
},
title: {
text: 'Stepline Chart',
align: 'left'
},
markers: {
hover: {
sizeOffset: 4
}
}
};
var chartl3 = new ApexCharts(document.querySelector("#Stepline_chart"), optionsl3);
chartl3.render();
</script>Multiple line chart
A Multiple Line Chart displays two or more sets of data on the same graph using multiple lines, each representing a different dataset or category.
<div id="Multiple_line_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Multiple line chart =====================
var optionsl4 = {
series: [
{
name: 'Series 1',
data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
},
{
name: 'Series 2',
data: [12, 33, 21, 54, 43, 34, 58, 66, 23, 44, 12]
}
],
chart: {
type: 'line',
height: 350
},
stroke: {
curve: 'smooth',
width: 2 // Thickness of the lines
},
dataLabels: {
enabled: false
},
title: {
text: 'Stepline Chart with Two Lines',
align: 'left'
},
markers: {
hover: {
sizeOffset: 4
}
},
tooltip: {
shared: true // Show combined tooltip for both series
}
};
var chartl4 = new ApexCharts(document.querySelector("#Multiple_line_chart"), optionsl4);
chartl4.render();
</script>Simple Pie chart
A Simple Pie Chart is a circular statistical graphic divided into slices to illustrate numerical proportions.
<div id="pie_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= simple pie chart =====================
var optionspie1 = {
series: [40, 50, 10],
chart: {
type: 'pie',
},
dataLabels: {
enabled: true,
style: {
fontSize: '18px',
fontWeight: 'bold',
colors: ["#FFF"],
},
},
fill: {
color: ["#3FC8E4", "#1DBF73", "#FFC90A"]
},
legend: {
show: false,
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
},
}]
};
var chartpie1 = new ApexCharts(document.querySelector("#pie_chart"), optionspie1);
chartpie1.render();
</script>Simple Donut chart
A Simple Donut Chart is a circular chart similar to a pie chart but with a hollow center, creating a “donut” shape.
<div id="Donut_chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= simple Donut chart =====================
var optionsdonut = {
series: [44, 55, 41, 17, 15],
chart: {
width: 380,
type: 'donut',
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 270
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
},
legend: {
formatter: function (val, opts) {
return val + " - " + opts.w.globals.series[opts.seriesIndex]
}
},
title: {
text: 'Gradient Donut with custom Start-angle'
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chartdonut = new ApexCharts(document.querySelector("#Donut_chart"), optionsdonut);
chartdonut.render();
</script>Simple bubble chart
A Simple Bubble Chart is a type of scatter plot where each data point is represented by a bubble (circle). Unlike a traditional scatter plot, the size of each bubble varies according to a third data dimension, allowing you to visualize three variables simultaneously.
<div id="bubble-chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= bubble chart =====================
var optionsBubbleChart = {
chart: {
height: '100%',
type: 'bubble',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{ data: [[6, 6, 55]] },
{ data: [[7, 4, 40]] },
{ data: [[9, 9, 95]] }
],
dataLabels: {
style: {
fontSize: '20px',
fontFamily: 'Inter, ui-sans-serif',
fontWeight: '400',
colors: ['#fff', '#fff', '#fff']
},
formatter: function (value) {
return value ? `${value}%` : '';
}
},
fill: {
opacity: 1
},
legend: {
show: false
},
stroke: {
width: 5
},
plotOptions: {
bubble: {
zScaling: false,
minBubbleRadius: 40
}
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
},
xaxis: {
min: 0,
max: 15,
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
min: 0,
max: 15,
labels: {
show: false
}
},
tooltip: {
enabled: false
},
states: {
hover: {
filter: {
type: 'none'
}
}
},
colors: ['#FF8C19', '#530CFF', '#00BB5A'],
markers: {
strokeColors: 'rgb(255, 255, 255)'
}
};
var bubbleChart = new ApexCharts(document.querySelector("#bubble-chart"), optionsBubbleChart);
bubbleChart.render();
</script>Basic Heatmap chart
A Basic Heatmap Chart is a data visualization tool that uses a matrix of colored cells to represent the magnitude of values across two categorical or continuous variables.
<div id="heat-map-chart"> </div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.5.0/apexcharts.min.js"></script>
<script>
//============= Heatmap chart =====================
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (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 heatmap = {
chart: {
height: 350,
type: "heatmap"
},
dataLabels: {
enabled: false
},
colors: ["#5654D4"],
plotOptions: {
heatmap: {
shadeIntensity: 1,
distributed: true,
radius: 8
}
},
dataLabels: {
enabled: false
},
series: [
{
name: "Series 1",
data: [
{
x: "W1",
y: 10
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 10
},
{
x: "W4",
y: 100
},
{
x: "W5",
y: 10
},
{
x: "W6",
y: 50
},
{
x: "W7",
y: 10
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 10
},
{
x: "W11",
y: 10
},
{
x: "W12",
y: 100
},
{
x: "W13",
y: 50
},
{
x: "w14",
y: 10
},
{
x: "W15",
y: 10
}
]
},
{
name: "Series 2",
data: [
{
x: "W1",
y: 75
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 100
},
{
x: "W4",
y: 10
},
{
x: "W5",
y: 10
},
{
x: "W6",
y: 75
},
{
x: "W7",
y: 10
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 100
},
{
x: "W11",
y: 10
},
{
x: "W12",
y: 10
},
{
x: "W13",
y: 10
},
{
x: "w14",
y: 25
},
{
x: "W15",
y: 100
}
]
},
{
name: "Series 3",
data: [
{
x: "W1",
y: 10
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 100
},
{
x: "W4",
y: 10
},
{
x: "W5",
y: 100
},
{
x: "W6",
y: 10
},
{
x: "W7",
y: 75
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 10
},
{
x: "W11",
y: 100
},
{
x: "W12",
y: 10
},
{
x: "W13",
y: 50
},
{
x: "w14",
y: 10
},
{
x: "W15",
y: 25
}
]
},
{
name: "Series 4",
data: [
{
x: "W1",
y: 25
},
{
x: "W2",
y: 100
},
{
x: "W3",
y: 10
},
{
x: "W4",
y: 10
},
{
x: "W5",
y: 10
},
{
x: "W6",
y: 100
},
{
x: "W7",
y: 10
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 100
},
{
x: "W10",
y: 10
},
{
x: "W11",
y: 10
},
{
x: "W12",
y: 10
},
{
x: "W13",
y: 10
},
{
x: "w14",
y: 100
},
{
x: "W15",
y: 10
}
]
},
{
name: "Series 5",
data: [
{
x: "W1",
y: 10
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 10
},
{
x: "W4",
y: 100
},
{
x: "W5",
y: 10
},
{
x: "W6",
y: 50
},
{
x: "W7",
y: 10
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 10
},
{
x: "W11",
y: 10
},
{
x: "W12",
y: 100
},
{
x: "W13",
y: 10
},
{
x: "w14",
y: 10
},
{
x: "W15",
y: 100
}
]
},
{
name: "Series 6",
data: [
{
x: "W1",
y: 75
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 100
},
{
x: "W4",
y: 10
},
{
x: "W5",
y: 10
},
{
x: "W6",
y: 75
},
{
x: "W7",
y: 10
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 25
},
{
x: "W11",
y: 10
},
{
x: "W12",
y: 10
},
{
x: "W13",
y: 75
},
{
x: "w14",
y: 10
},
{
x: "W15",
y: 10
}
]
},
{
name: "Series 7",
data: [
{
x: "W1",
y: 10
},
{
x: "W2",
y: 10
},
{
x: "W3",
y: 100
},
{
x: "W4",
y: 10
},
{
x: "W5",
y: 100
},
{
x: "W6",
y: 10
},
{
x: "W7",
y: 75
},
{
x: "W8",
y: 10
},
{
x: "W9",
y: 10
},
{
x: "W10",
y: 10
},
{
x: "W11",
y: 100
},
{
x: "W12",
y: 10
},
{
x: "W13",
y: 10
},
{
x: "w14",
y: 10
},
{
x: "W15",
y: 10
}
]
}
],
tooltip: {
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
if (w.globals.seriesNames[seriesIndex] !== "") {
return series[seriesIndex][dataPointIndex];
} else {
return "";
}
}
}
};
var chartheatmap = new ApexCharts(document.querySelector("#heat-map-chart"), heatmap);
chartheatmap.render();
</script>