Charts
Bootstrap 5 Candlestick Chart
A candlestick chart is a financial chart that shows price movements or trading data.
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-candlestick"></div>
<script>
var seriesData = [{
x: new Date(2025, 1, 1),
y: [51.98, 56.29, 51.59, 53.85]
},
{
x: new Date(2025, 2, 1),
y: [53.66, 54.99, 51.35, 52.95]
},
{
x: new Date(2025, 3, 1),
y: [52.96, 53.78, 51.54, 52.48]
},
{
x: new Date(2025, 4, 1),
y: [52.54, 52.79, 47.88, 49.24]
},
{
x: new Date(2025, 5, 1),
y: [49.10, 52.86, 47.70, 52.78]
},
{
x: new Date(2025, 6, 1),
y: [52.83, 53.48, 50.32, 52.29]
},
{
x: new Date(2025, 7, 1),
y: [52.20, 54.48, 51.64, 52.58]
},
{
x: new Date(2025, 8, 1),
y: [52.76, 57.35, 52.15, 57.03]
},
{
x: new Date(2025, 9, 1),
y: [57.04, 58.15, 48.88, 56.19]
},
{
x: new Date(2025, 10, 1),
y: [56.09, 58.85, 55.48, 58.79]
},
{
x: new Date(2025, 11, 1),
y: [58.78, 59.65, 58.23, 59.05]
},
{
x: new Date(2026, 0, 1),
y: [59.37, 61.11, 59.35, 60.34]
},
{
x: new Date(2026, 1, 1),
y: [60.40, 60.52, 56.71, 56.93]
},
{
x: new Date(2026, 2, 1),
y: [57.02, 59.71, 56.04, 56.82]
},
{
x: new Date(2026, 3, 1),
y: [56.97, 59.62, 54.77, 59.30]
},
{
x: new Date(2026, 4, 1),
y: [59.11, 62.29, 59.10, 59.85]
},
{
x: new Date(2026, 5, 1),
y: [59.97, 60.11, 55.66, 58.42]
},
{
x: new Date(2026, 6, 1),
y: [58.34, 60.93, 56.75, 57.42]
},
{
x: new Date(2026, 7, 1),
y: [57.76, 58.08, 51.18, 54.71]
},
{
x: new Date(2026, 8, 1),
y: [54.80, 61.42, 53.18, 57.35]
},
{
x: new Date(2026, 9, 1),
y: [57.56, 63.09, 57.00, 62.99]
},
{
x: new Date(2026, 10, 1),
y: [62.89, 63.42, 59.72, 61.76]
},
{
x: new Date(2026, 11, 1),
y: [61.71, 64.15, 61.29, 63.04]
}
];
var options = {
chart: {
height: 350,
type: "candlestick",
},
series: [{
data: seriesData
}],
stroke: {
width: 1
},
xaxis: {
type: "datetime"
}
};
adminkit.apexcharts("#apexcharts-candlestick", function () {
return options;
});
</script>Last updated on
Bubble chartPro
Bubble charts show three dimensions of data at once, with x, y and the bubble size. ApexCharts example for AdminKit PRO, in light and dark mode.
Column chartPro
Column charts use vertical bars to compare values across categories. ApexCharts example for AdminKit PRO, in light and dark mode.