Charts
Bootstrap 5 Mixed Chart
Mixed charts combine two or more chart types, such as columns and a line, in one chart. ApexCharts example for AdminKit PRO, in light and dark mode.
This feature is only available in AdminKit PRO. Learn more.
ApexCharts example
adminkit.apexcharts() renders the chart and updates it when the color mode changes.
<div id="apexcharts-mixed"></div>
<script>
var options = {
chart: {
height: 350,
type: "line",
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: "smooth"
},
plotOptions: {
bar: {
columnWidth: "50%"
}
},
series: [{
name: "TEAM A",
type: "column",
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: "TEAM B",
type: "area",
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: "TEAM C",
type: "line",
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85, 0.25, 1],
gradient: {
inverseColors: false,
shade: "light",
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ["01/01/2026", "02/01/2026", "03/01/2026", "04/01/2026", "05/01/2026", "06/01/2026", "07/01/2026", "08/01/2026", "09/01/2026",
"10/01/2026", "11/01/2026"
],
markers: {
size: 0
},
xaxis: {
type: "datetime"
},
yaxis: {
title: {
text: "Points",
},
min: 0
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function(y) {
if (typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
adminkit.apexcharts("#apexcharts-mixed", function () {
return options;
});
</script>Last updated on