Bootstrap 5 Column Chart
Column ChartA column chart uses vertical bars to display data and is used to compare values across categories.
This feature is only available in AdminKit PRO. Learn more.
ApexCharts example
var options = {
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
horizontal: false,
endingShape: "rounded",
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"
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#apexcharts-column"),
options
);
chart.render();