Charts
A collection of chart components built on top of ApexCharts. These preconfigured charts are ready to use and designed for various types of data visualization.
Line Chart - Simple
Simple line chart example.
<!-- container -->
<div id="chart-line-simple"></div>
<script>
const options = {
chart: { type: "line" },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
stroke: { curve: "smooth", width: 2 },
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-line-simple"), options).render();
</script>Line Chart - Linear
Linear line chart example — straight segments instead of a smooth curve.
<!-- container -->
<div id="chart-line-linear"></div>
<script>
const options = {
chart: { type: "line" },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
stroke: { curve: "straight", width: 2 },
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-line-linear"), options).render();
</script>Area Chart - Simple
Simple area chart with a flat fill.
<!-- container -->
<div id="chart-area-simple"></div>
<script>
const options = {
chart: { type: "area" },
series: [{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] }],
colors: ["#2563eb"],
stroke: { curve: "smooth", width: 2 },
fill: { type: "solid", opacity: 0.18 },
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-area-simple"), options).render();
</script>Area Chart - Stack
Stacked areas show each series' contribution to the total.
<!-- container -->
<div id="chart-area-stack"></div>
<script>
const options = {
chart: { type: "area", stacked: true },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
stroke: { curve: "smooth", width: 2 },
fill: { type: "solid", opacity: 0.2 },
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-area-stack"), options).render();
</script>Area Chart - Gradiant
A vertical gradient fill fading toward the axis.
<!-- container -->
<div id="chart-area-gradient"></div>
<script>
const options = {
chart: { type: "area" },
series: [{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] }],
colors: ["#2563eb"],
stroke: { curve: "smooth", width: 2 },
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.45,
opacityTo: 0.05,
stops: [0, 95],
},
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-area-gradient"), options).render();
</script>Area Chart - Advance Gradiant
Two gradient-filled series layered together.
<!-- container -->
<div id="chart-area-advance-gradient"></div>
<script>
const options = {
chart: { type: "area" },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
stroke: { curve: "smooth", width: 2 },
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
type: "vertical",
opacityFrom: 0.55,
opacityTo: 0,
stops: [0, 100],
},
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
};
new ApexCharts(document.querySelector("#chart-area-advance-gradient"), options).render();
</script>Bar Chart - Simple
Simple vertical column chart.
<!-- container -->
<div id="chart-bar-simple"></div>
<script>
const options = {
chart: { type: "bar" },
series: [{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] }],
colors: ["#2563eb"],
plotOptions: {
bar: { columnWidth: "45%", borderRadius: 4, borderRadiusApplication: "end" },
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
};
new ApexCharts(document.querySelector("#chart-bar-simple"), options).render();
</script>Bar Chart - Horizontal
Set `horizontal: true` to lay the bars sideways.
<!-- container -->
<div id="chart-bar-horizontal"></div>
<script>
const options = {
chart: { type: "bar" },
series: [{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] }],
colors: ["#2563eb"],
plotOptions: {
bar: { horizontal: true, barHeight: "55%", borderRadius: 4, borderRadiusApplication: "end" },
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
};
new ApexCharts(document.querySelector("#chart-bar-horizontal"), options).render();
</script>Bar Chart - Multiple
Grouped columns compare two series side by side.
<!-- container -->
<div id="chart-bar-multiple"></div>
<script>
const options = {
chart: { type: "bar" },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
plotOptions: {
bar: { columnWidth: "60%", borderRadius: 3, borderRadiusApplication: "end" },
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
};
new ApexCharts(document.querySelector("#chart-bar-multiple"), options).render();
</script>Bar Chart - Stack
Stacked columns show composition per category.
<!-- container -->
<div id="chart-bar-stack"></div>
<script>
const options = {
chart: { type: "bar", stacked: true },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
plotOptions: {
bar: { columnWidth: "45%", borderRadius: 3, borderRadiusApplication: "end" },
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
};
new ApexCharts(document.querySelector("#chart-bar-stack"), options).render();
</script>Pie Chart - Simple
Simple pie chart with a legend below.
<!-- container -->
<div id="chart-pie-simple"></div>
<script>
const options = {
chart: { type: "pie", height: 300 },
series: [1225, 965, 830, 532],
labels: ["Watches", "Clothing", "Gadgets", "Others"],
colors: ["#2563eb", "#0891b2", "#059669", "#8b5cf6"],
stroke: { width: 2, colors: ["#ffffff"] },
legend: { position: "bottom" },
};
new ApexCharts(document.querySelector("#chart-pie-simple"), options).render();
</script>Pie Chart - Donut
A donut is a pie with the centre cut out.
<!-- container -->
<div id="chart-pie-donut"></div>
<script>
const options = {
chart: { type: "donut", height: 300 },
series: [1225, 965, 830, 532],
labels: ["Watches", "Clothing", "Gadgets", "Others"],
colors: ["#2563eb", "#0891b2", "#059669", "#8b5cf6"],
plotOptions: { pie: { donut: { size: "68%" } } },
stroke: { width: 2, colors: ["#ffffff"] },
legend: { position: "bottom" },
};
new ApexCharts(document.querySelector("#chart-pie-donut"), options).render();
</script>Pie Chart - Donut with Content
The donut centre can display a running total.
<!-- container -->
<div id="chart-pie-donut-content"></div>
<script>
const options = (function () {
return {
chart: { type: "donut", height: 300 },
series: [1225, 965, 830, 532],
labels: ["Watches", "Clothing", "Gadgets", "Others"],
colors: ["#2563eb", "#0891b2", "#059669", "#8b5cf6"],
plotOptions: {
pie: {
donut: {
size: "70%",
labels: {
show: true,
name: { fontFamily: "Inter, system-ui, sans-serif", color: "#64748b", fontSize: "12px" },
value: {
fontFamily: "Inter, system-ui, sans-serif",
color: "#0f172a",
fontSize: "22px",
fontWeight: 600,
formatter: function (v) {
return Number(v).toLocaleString();
},
},
total: {
show: true,
label: "Total sales",
fontFamily: "Inter, system-ui, sans-serif",
color: "#64748b",
formatter: function (w) {
return w.globals.seriesTotals
.reduce(function (a, b) {
return a + b;
}, 0)
.toLocaleString();
},
},
},
},
},
},
stroke: { width: 2, colors: ["#ffffff"] },
legend: { position: "bottom" },
};
})();
new ApexCharts(document.querySelector("#chart-pie-donut-content"), options).render();
</script>Radar Chart - Simple
Radar chart for comparing values across categories.
<!-- container -->
<div id="chart-radar-simple"></div>
<script>
const options = {
chart: { type: "radar", height: 320 },
series: [{ name: "Revenue", data: [80, 50, 30, 40, 100, 20] }],
labels: ["Design", "Build", "Test", "Deploy", "Support", "Docs"],
colors: ["#2563eb"],
stroke: { width: 2 },
fill: { opacity: 0.2 },
markers: { size: 4 },
yaxis: { show: false },
plotOptions: {
radar: {
polygons: {
strokeColors: "#e2e8f0",
connectorColors: "#e2e8f0",
fill: { colors: ["transparent"] },
},
},
},
};
new ApexCharts(document.querySelector("#chart-radar-simple"), options).render();
</script>Radar Chart - Multiple
Two overlaid series on one radar.
<!-- container -->
<div id="chart-radar-multiple"></div>
<script>
const options = {
chart: { type: "radar", height: 320 },
series: [
{ name: "Revenue", data: [80, 50, 30, 40, 100, 20] },
{ name: "Profit", data: [20, 30, 40, 80, 20, 80] },
],
labels: ["Design", "Build", "Test", "Deploy", "Support", "Docs"],
colors: ["#2563eb", "#8b5cf6"],
stroke: { width: 2 },
fill: { opacity: 0.15 },
markers: { size: 3 },
yaxis: { show: false },
plotOptions: {
radar: {
polygons: {
strokeColors: "#e2e8f0",
connectorColors: "#e2e8f0",
fill: { colors: ["transparent"] },
},
},
},
};
new ApexCharts(document.querySelector("#chart-radar-multiple"), options).render();
</script>Cohort Chart
Retention by signup week, rendered as a heatmap — ApexCharts' equivalent of a cohort grid.
<!-- container -->
<div id="chart-cohort"></div>
<script>
const options = (function () {
// Retention by signup week — a heatmap is ApexCharts' cohort equivalent.
var weeks = ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"];
var series = ["Jun 02", "Jun 09", "Jun 16", "Jun 23", "Jun 30"]
.map(function (name, row) {
return {
name: name,
data: weeks.map(function (w, col) {
// Retention decays across columns; later cohorts start stronger.
var v = Math.max(
8,
Math.round(100 - col * (18 + row * 2) + row * 4),
);
return { x: w, y: col === 0 ? 100 : v };
}),
};
})
.reverse();
return {
chart: { type: "heatmap", height: 320 },
series: series,
colors: ["#2563eb"],
stroke: { width: 2, colors: ["#ffffff"] },
dataLabels: {
enabled: true,
style: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "11px", fontWeight: 500 },
formatter: function (v) {
return v + "%";
},
},
plotOptions: {
heatmap: {
radius: 4,
enableShades: true,
shadeIntensity: 0.55,
},
},
legend: { show: false },
yaxis: { labels: { style: { colors: "#64748b", fontSize: "11px" } } },
};
})();
new ApexCharts(document.querySelector("#chart-cohort"), options).render();
</script>Color
The full categorical palette. All six colours clear 3:1 contrast against the surface in both themes.
<!-- container -->
<div id="chart-color"></div>
<script>
const options = {
chart: { type: "bar", height: 300 },
series: [
{
name: "Sessions",
data: [
{ x: "Blue", y: 640 },
{ x: "Cyan", y: 520 },
{ x: "Green", y: 480 },
{ x: "Purple", y: 410 },
{ x: "Amber", y: 350 },
{ x: "Rose", y: 280 },
],
},
],
colors: ["#2563eb", "#0891b2", "#059669", "#8b5cf6", "#b45309", "#e11d48"],
plotOptions: {
bar: {
columnWidth: "50%",
borderRadius: 4,
borderRadiusApplication: "end",
distributed: true,
},
},
legend: { show: false },
};
new ApexCharts(document.querySelector("#chart-color"), options).render();
</script>Custom Tooltip
A `tooltip.custom` function returns raw HTML, so the tooltip can carry any markup.
<!-- container -->
<div id="chart-custom-tooltip"></div>
<script>
const options = (function () {
return {
chart: { type: "line" },
series: [
{ name: "Revenue", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
],
colors: ["#2563eb", "#8b5cf6"],
stroke: { curve: "smooth", width: 2 },
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
tooltip: {
shared: true,
intersect: false,
// A custom function returns raw HTML, so the tooltip can carry any
// markup. Colours come from the resolved palette, not hardcoded.
custom: function (opts) {
var i = opts.dataPointIndex;
var rows = opts.series
.map(function (s, si) {
var name = opts.w.globals.seriesNames[si];
var color = opts.w.globals.colors[si];
return (
'<div style="display:flex;align-items:center;gap:8px;">' +
'<span style="width:8px;height:8px;border-radius:9999px;background:' +
color +
';"></span>' +
'<span style="flex:1;">' +
name +
"</span>" +
'<strong style="margin-left:12px;">' +
Number(s[i]).toLocaleString() +
"</strong>" +
"</div>"
);
})
.join("");
return (
'<div style="padding:10px 12px;font-family:' +
"Inter, system-ui, sans-serif" +
";font-size:12px;color:" +
"#0f172a" +
';min-width:170px;">' +
'<div style="font-weight:600;margin-bottom:6px;">' +
["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"][i] +
"</div>" +
rows +
"</div>"
);
},
},
};
})();
new ApexCharts(document.querySelector("#chart-custom-tooltip"), options).render();
</script>Custom & Compose
Mixed series types on shared axes: columns, a smooth line, and a dashed target.
<!-- container -->
<div id="chart-custom-compose"></div>
<script>
const options = {
chart: { type: "line", height: 300 },
series: [
{ name: "Revenue", type: "column", data: [1200, 1398, 5800, 2400, 2700, 2500, 2900] },
{ name: "Profit", type: "line", data: [2400, 3000, 2210, 2000, 2500, 2100, 2800] },
{
name: "Target",
type: "line",
data: [2600, 2600, 2600, 2600, 2600, 2600, 2600],
},
],
colors: ["#2563eb", "#8b5cf6", "#059669"],
stroke: { width: [0, 2, 2], curve: "smooth", dashArray: [0, 0, 5] },
plotOptions: {
bar: { columnWidth: "45%", borderRadius: 4, borderRadiusApplication: "end" },
},
xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"] },
markers: { size: 0, hover: { size: 5 } },
legend: { position: "top", horizontalAlign: "right" },
};
new ApexCharts(document.querySelector("#chart-custom-compose"), options).render();
</script>