Charts
Bootstrap 5 Column Chart
Column charts use vertical bars to compare values across categories. 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-column"></div>
<script>
var options = {
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
horizontal: false,
borderRadius: 4,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ["transparent"]
},
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"
}
}
}
}
adminkit.apexcharts("#apexcharts-column", function () {
return options;
});
</script>Last updated on