third party plugins
Tailwind CSS Apex charts
Charts are visual tools that simplify complex data sets, making information more accessible. They include line, bar, and pie charts for specific trends.
Below are the comprehensively outlined steps you can follow to seamlessly integrate Apexcharts JS with FlyonUI.
- 1Step 1: Install Required Packages
Install
apexchartsandlodashvia npm. Thelodashlibrary is required by certain JavaScript helpers for ApexCharts, so ensure both packages are installed.npm i apexcharts lodash - 2Step 2: Include ApexCharts JavaScript and CSS
Add the required ApexCharts CSS and JS files to your page in the following locations:
<head> <link rel="stylesheet" href="../path/to/apexcharts/apexcharts.css" /> </head> <body> <script src="../path/to/lodash/lodash.js"></script> <script src="../path/to/apexcharts/dist/apexcharts.js"></script> </body>Note: A CDN link won't work here because we need to modify the default Vendor CSS to fit FlyonUI's design.
- 3Step 3: Add the ApexCharts Helper JavaScript
Include the apexcharts-helpers.js
scriptfile after theapexcharts.js. Since this helper script uses Tailwind CSS classes, copy it into your project'sjsfolder and reference it in yourtailwind.config.jsto ensure the required classes are generated.<script src="../path/to/apexcharts-helper.js"></script> - 4Step 4: Update Tailwind Configuration
Include the path to the vendor and helper JS files in the
contentsection of your Tailwind configuration file. Additionally, setvendors="true"in the FlyonUI config to ensure the override CSS is generated:module.exports = { content: [ '../path/to/apexcharts/**/*.js', // Include all relevant JS files from ApexCharts '../path/to/apexcharts-helper.js', // Include helper JS file with tooltip functions and initialization code ], flyonui: { vendors: true // Enable vendor-specific CSS generation } } - 5Step 5: Basic Usage
Use the method below to create an ApexCharts instance. This method contains all necessary settings, specifications, and styles for the chart.
buildChart('#id', mode => ({ /* Chart details */ }))
The example below demonstrates how to use a single area chart with Helper.js.
When working with colors, use CSS variables, for example: `'oklch(var(--p))'`. This ensures that when the theme changes, the chart colors update automatically.
<div id="apex-single-area-chart" class="w-full"></div><script>
window.addEventListener('load', () => {
;(function () {
// Apex Single Area Chart (Start)
buildChart('#apex-single-area-chart', mode => ({
chart: {
height: 400,
type: 'area',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: 'Units',
data: [0, 100, 50, 125, 70, 150, 100, 170, 120, 175, 100, 200]
}
],
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: 'oklch(var(--bc) / 0.4)'
},
colors: ['oklch(var(--p))'], // color var
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
gradientToColors: ['oklch(var(--b1))'],
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
xaxis: {
type: 'category',
tickPlacement: 'on',
categories: [
'1 March 2024',
'2 March 2024',
'3 March 2024',
'4 March 2024',
'5 March 2024',
'6 March 2024',
'7 March 2024',
'8 March 2024',
'9 March 2024',
'10 March 2024',
'11 March 2024',
'12 March 2024'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '12px',
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(' ')
t = `${newT[0]} ${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
labels: {
align: 'left',
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '12px',
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: 'MMMM yyyy'
},
y: {
formatter: value => `${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex].split(' ')
const newTitle = `${title[0]} ${title[1]}`
return buildTooltip(props, {
title: newTitle,
mode,
valuePrefix: '',
hasTextLabel: true,
markerExtClasses: 'bg-primary',
wrapperExtClasses: ''
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
labels: {
style: {
fontSize: '10px',
colors: 'oklch(var(--bc) / 0.9)'
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: 'left',
minWidth: 0,
maxWidth: 140,
style: {
fontSize: '10px',
colors: 'oklch(var(--bc) / 0.9)'
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
// Apex Single Area Chart (End)
})()
})
</script>Helper.js offers four different tooltip designs and includes an auto-init function, eliminating the need for manual initialization. However, if you prefer, you can remove the Helper.js file and use the default Apex chart initialization. Below is an example, but keep in mind that you will need to enable the vendor option in the config file for CSS generation.
<div id="lineAreaChart"></div><script>
window.addEventListener('load', () => {
;(function () {
const areaChartEl = document.querySelector('#lineAreaChart'),
areaChartConfig = {
chart: {
height: 400,
width: '100%',
type: 'area',
parentHeightOffset: 0,
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
stroke: {
show: false,
curve: 'straight'
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'start',
labels: {
colors: 'oklch(var(--bc) / 0.9)',
useSeriesColors: false
}
},
grid: {
borderColor: 'oklch(var(--bc) / 0.4)',
xaxis: {
lines: {
show: true
}
}
},
colors: ['oklch(var(--su) / 0.3)', 'oklch(var(--su) / 0.6)', 'oklch(var(--su) / 0.9)'],
series: [
{
name: 'Visits',
data: [100, 120, 90, 170, 130, 160, 140, 240, 220, 180, 270, 280, 375]
},
{
name: 'Clicks',
data: [60, 80, 70, 110, 80, 100, 90, 180, 160, 140, 200, 220, 275]
},
{
name: 'Sales',
data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220]
}
],
xaxis: {
categories: [
'7/12',
'8/12',
'9/12',
'10/12',
'11/12',
'12/12',
'13/12',
'14/12',
'15/12',
'16/12',
'17/12',
'18/12',
'19/12',
'20/12'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '13px'
}
}
},
yaxis: {
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '13px'
}
}
},
fill: {
opacity: 1,
type: 'solid'
},
tooltip: {
shared: false
}
}
if (typeof areaChartEl !== undefined && areaChartEl !== null) {
const areaChart = new ApexCharts(areaChartEl, areaChartConfig)
areaChart.render()
}
})()
})
</script>The following example demonstrates the usage of a multiple area charts.
<div id="apex-multiple-area-charts"></div><script>
window.addEventListener('load', () => {
;(function () {
buildChart('#apex-multiple-area-charts', mode => ({
chart: {
height: 400,
type: 'area',
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: 'Income',
data: [20000, 40000, 60000, 30000, 40000, 100000, 70000, 90000, 70000, 65000, 90000, 100000]
},
{
name: 'Expenditure',
data: [7000, 18000, 20000, 40000, 27000, 50000, 19000, 99000, 32000, 70000, 42000, 50000]
}
],
legend: {
show: true,
position: 'top',
horizontalAlign: 'right',
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: 'oklch(var(--bc) / 0.4)'
},
colors: ['oklch(var(--p))', 'oklch(var(--wa))'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
gradientToColors: ['oklch(var(--b1))'],
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
xaxis: {
type: 'category',
tickPlacement: 'on',
categories: [
'1 March 2024',
'1 April 2024',
'1 May 2024',
'1 June 2024',
'1 July 2024',
'1 August 2024',
'1 September 2024',
'1 October 2024',
'1 November 2024',
'1 December 2024',
'1 January 2025',
'1 February 2025'
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
stroke: {
dashArray: 0
},
dropShadow: {
show: false
}
},
tooltip: {
enabled: false
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '12px',
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(' ')
t = `${newT[0]} ${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
labels: {
align: 'left',
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '12px',
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: 'MMMM yyyy'
},
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex].split(' ')
const newTitle = `${title[0]} ${title[1]}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: 'min-w-28',
labelDivider: ':',
labelExtClasses: 'ms-2'
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '10px'
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: 'left',
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: '10px'
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a multiple area charts with comparison tooltip.
<div id="apex-multiple-area-charts-compare"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-multiple-area-charts-compare", mode => ({
chart: {
height: 400,
type: "area",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "2024",
data: [20000, 40000, 60000, 30000, 40000, 100000, 70000, 90000, 70000, 65000, 90000, 100000]
},
{
name: "2023",
data: [7000, 18000, 20000, 40000, 27000, 50000, 19000, 99000, 32000, 70000, 42000, 50000]
}
],
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: 'oklch(var(--bc) / 0.4)'
},
colors: ["oklch(var(--p))", "oklch(var(--in))"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
gradientToColors: ["oklch(var(--b1))"],
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
xaxis: {
type: "category",
tickPlacement: "on",
categories: [
"1 January",
"1 February",
"1 March",
"1 April",
"1 May",
"1 June",
"1 July",
"1 August",
"1 September",
"1 October",
"1 November",
"1 December"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
},
labels: {
style: {
fontSize: "12px",
colors: "oklch(var(--bc) / 0.9)",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
fontSize: "12px",
colors: "oklch(var(--bc) / 0.9)",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: "MMMM yyyy"
},
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
return buildTooltipCompareTwo(props, {
title: "Revenue",
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-48",
markerExtClasses: ""
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a multiple area charts with alternative comparison tooltip.
<div id="apex-multiple-area-charts-compare-alt" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-multiple-area-charts-compare-alt", mode => ({
chart: {
height: 400,
type: "area",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "2024",
data: [20000, 40000, 60000, 30000, 40000, 100000, 70000, 90000, 70000, 65000, 90000, 100000]
},
{
name: "2023",
data: [7000, 18000, 20000, 40000, 27000, 50000, 19000, 99000, 32000, 70000, 42000, 50000]
}
],
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: "oklch(var(--bc) / 0.4)"
},
colors: ["oklch(var(--p))", "oklch(var(--in))"],
fill: {
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
gradientToColors: ["oklch(var(--b1))"],
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
xaxis: {
type: "category",
tickPlacement: "on",
categories: [
"1 January",
"1 February",
"1 March",
"1 April",
"1 May",
"1 June",
"1 July",
"1 August",
"1 September",
"1 October",
"1 November",
"1 December"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
stroke: {
dashArray: 0
},
dropShadow: {
show: false
}
},
tooltip: {
enabled: false
},
labels: {
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: "MMMM yyyy"
},
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
return buildTooltipCompareTwoAlt(props, {
title: "Revenue",
mode,
valuePrefix: "$",
hasTextLabel: true,
wrapperExtClasses: "",
markerExtClasses: ""
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a curved area charts.
<div id="apex-curved-area-charts" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-multiple-area-charts-compare-alt", mode => ({
chart: {
height: 400,
type: "area",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "2024",
data: [20000, 40000, 60000, 30000, 40000, 100000, 70000, 90000, 70000, 65000, 90000, 100000]
},
{
name: "2023",
data: [7000, 18000, 20000, 40000, 27000, 50000, 19000, 99000, 32000, 70000, 42000, 50000]
}
],
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: 2
},
grid: {
strokeDashArray: 2,
borderColor: "oklch(var(--bc) / 0.4)"
},
colors: ["oklch(var(--p))", "oklch(var(--in))"],
fill: {
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
gradientToColors: ["oklch(var(--b1))"],
opacityTo: 0.3,
stops: [0, 90, 100]
}
},
xaxis: {
type: "category",
tickPlacement: "on",
categories: [
"1 January",
"1 February",
"1 March",
"1 April",
"1 May",
"1 June",
"1 July",
"1 August",
"1 September",
"1 October",
"1 November",
"1 December"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
stroke: {
dashArray: 0
},
dropShadow: {
show: false
}
},
tooltip: {
enabled: false
},
labels: {
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
x: {
format: "MMMM yyyy"
},
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
return buildTooltipCompareTwoAlt(props, {
title: "Revenue",
mode,
valuePrefix: "$",
hasTextLabel: true,
wrapperExtClasses: "",
markerExtClasses: ""
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a Column chart.
<div id="apex-column-bar-chart" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-column-bar-chart", mode => ({
chart: {
type: "bar",
height: 400,
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Investment",
data: [25000, 39000, 65000, 45000, 79000, 80000, 69000, 63000, 60000, 66000, 90000, 78000]
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: "30px"
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
colors: ["oklch(var(--p))", "oklch(var(--b1))"],
xaxis: {
categories: [
"Cook",
"Erin",
"Jack",
"Will",
"Gayle",
"Megan",
"John",
"Luke",
"Ellis",
"Mason",
"Elvis",
"Liam"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
}
}
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
states: {
hover: {
filter: {
type: "darken",
value: 0.9
}
}
},
tooltip: {
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex]
const newTitle = `${title}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-28",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
plotOptions: {
bar: {
columnWidth: "10px"
}
},
stroke: {
width: 8
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a multiple column charts.
<div id="apex-multiple-column-charts" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-multiple-column-charts", mode => ({
chart: {
type: "bar",
height: 400,
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Investment",
data: [25000, 47000, 59000, 67000, 66000, 66000, 78000, 43000, 40000, 56000, 54000, 78000]
},
{
name: "Revenue",
data: [34000, 56000, 85000, 90000, 70000, 80000, 100000, 40000, 50000, 44000, 47000, 96000]
}
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: "12px",
borderRadius: 0
}
},
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
dataLabels: {
enabled: false
},
colors: ["oklch(var(--p))", "oklch(var(--su))"],
xaxis: {
categories: [
"Cook",
"Erin",
"Jack",
"Will",
"Gayle",
"Megan",
"John",
"Luke",
"Ellis",
"Mason",
"Elvis",
"Liam"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
show: false
},
labels: {
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
}
}
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
states: {
hover: {
filter: {
type: "darken",
value: 0.9
}
}
},
tooltip: {
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex]
const newTitle = `${title}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-28",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
},
responsive: [
{
breakpoint: 568,
options: {
chart: {
height: 300
},
plotOptions: {
bar: {
columnWidth: "4px"
}
},
labels: {
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
offsetX: -2,
formatter: title => title.slice(0, 3)
},
yaxis: {
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: 'oklch(var(--bc) / 0.9)',
fontSize: "10px"
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
}
}
}
]
}))
})()
})
</script>The following example demonstrates the usage of a single line chart.
<div id="apex-single-line-chart" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-single-line-chart", mode => ({
chart: {
height: 300,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Views",
data: [0, 5000, 15000, 25000, 40000, 30000, 20000, 15000, 25000, 40000, 30000, 20000]
}
],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [4, 4, 4]
},
title: {
show: false
},
legend: {
show: false
},
grid: {
strokeDashArray: 0,
borderColor: "oklch(var(--bc) / 0.4)",
padding: {
top: -20,
right: 0
}
},
colors: ["oklch(var(--p))"],
xaxis: {
type: "category",
categories: [
"1 January 2024",
"1 February 2024",
"1 March 2024",
"1 April 2024",
"1 May 2024",
"1 June 2024",
"1 July 2024",
"1 August 2024",
"1 September 2024",
"1 October 2024",
"1 November 2024",
"1 December 2024"
],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
},
labels: {
offsetY: 5,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[0]} ${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
min: 0,
max: 40000,
tickAmount: 4,
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex].split(" ")
const newTitle = `${title[0]} ${title[1]}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-28",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
}
}))
})()
})
</script>The following example demonstrates the usage of a multiple line charts.
<div id="apex-multiple-line-charts" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-multiple-line-charts", mode => ({
chart: {
height: 350,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Eric",
data: [0, 17000, 35000, 23000, 40000]
},
{
name: "John",
data: [0, 15000, 19000, 32500, 27000]
},
{
name: "Gwen",
data: [0, 12000, 16000, 20000, 30000]
}
],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [4, 4, 4]
},
title: {
show: false
},
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
grid: {
strokeDashArray: 0,
borderColor: "oklch(var(--bc) / 0.4)",
padding: {
top: 0,
right: 0,
bottom: 10
}
},
colors: ["oklch(var(--p))", "oklch(var(--su))", "oklch(var(--er))"],
xaxis: {
type: "category",
categories: ["1 January 2024", "1 February 2023", "1 March 2023", "1 April 2023", "1 May 2023"],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
},
labels: {
offsetY: 5,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[0]} ${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
min: 0,
max: 40000,
tickAmount: 4,
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex].split(" ")
const newTitle = `${title[0]} ${title[1]}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-36",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
}
}))
})()
})
</script>The following example demonstrates the usage of a Curved line charts.
<div id="apex-curved-line-charts" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-curved-line-charts", mode => ({
chart: {
height: 300,
type: "line",
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Eric",
data: [0, 17000, 35000, 23000, 40000]
},
{
name: "John",
data: [0, 15000, 19000, 32500, 27000]
},
{
name: "Gwen",
data: [0, 12000, 16000, 20000, 30000]
}
],
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth",
width: [4, 4, 4]
},
title: {
show: false
},
legend: {
show: true,
position: "top",
horizontalAlign: "right",
labels: {
useSeriesColors: true
},
markers: {
offsetY: 2
}
},
grid: {
strokeDashArray: 0,
borderColor: "oklch(var(--bc) / 0.4)",
padding: {
top: 0,
right: 0,
bottom: 10
}
},
colors: ["oklch(var(--p))", "oklch(var(--su))", "oklch(var(--er))"],
xaxis: {
type: "category",
categories: ["1 January 2024", "1 February 2023", "1 March 2023", "1 April 2023", "1 May 2023"],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: false
},
labels: {
offsetY: 5,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: title => {
let t = title
if (t) {
const newT = t.split(" ")
t = `${newT[0]} ${newT[1].slice(0, 3)}`
}
return t
}
}
},
yaxis: {
min: 0,
max: 40000,
tickAmount: 4,
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
tooltip: {
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex].split(" ")
const newTitle = `${title[0]} ${title[1]}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-36",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
}
}))
})()
})
</script>The following example demonstrates the usage of a Horizontal bar chart.
<div id="apex-horizontal-bar-chart" class="w-full"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-horizontal-bar-chart", mode => ({
chart: {
type: "bar",
height: 400,
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
series: [
{
name: "Transactions",
data: [21000, 42000, 55000, 67000, 66000, 61000, 48000, 33000, 40000, 56000, 84000, 28000]
}
],
plotOptions: {
bar: {
horizontal: true,
columnWidth: "16px",
borderRadius: 4,
borderRadiusApplication: "end"
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
colors: ["oklch(var(--p)/0.2)"],
xaxis: {
categories: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
crosshairs: {
show: false
},
labels: {
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
offsetX: -2,
formatter: value => (value >= 1000 ? `${value / 1000}k` : value)
}
},
yaxis: {
crosshairs: {
show: false
},
labels: {
align: "left",
minWidth: 0,
maxWidth: 140,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px",
fontWeight: 400
},
offsetX: -10,
formatter: title => (typeof title === "string" ? title.slice(0, 3) : title)
}
},
states: {
hover: {
filter: {
type: "darken",
value: 0.9
}
}
},
tooltip: {
y: {
formatter: value => `$${value >= 1000 ? `${value / 1000}k` : value}`
},
custom: function (props) {
const { categories } = props.ctx.opts.xaxis
const { dataPointIndex } = props
const title = categories[dataPointIndex]
const newTitle = `${title}`
return buildTooltip(props, {
title: newTitle,
mode,
hasTextLabel: true,
wrapperExtClasses: "min-w-28",
labelDivider: ":",
labelExtClasses: "ms-2"
})
}
}
}))
})()
})
</script>The following example demonstrates the usage of a doughnut chart.
<div id="apex-doughnut-chart"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-doughnut-chart", mode => ({
chart: {
height: 300,
type: "donut"
},
plotOptions: {
pie: {
donut: {
size: "70%",
labels: {
show: true,
name: {
fontSize: "2rem"
},
value: {
fontSize: "1.5rem",
color: "oklch(var(--bc) / 0.9)",
formatter: function (val) {
return parseInt(val, 10) + "%"
}
},
total: {
show: true,
fontSize: "1rem",
label: "Operational",
formatter: function (w) {
return "42%"
}
}
}
}
}
},
series: [42, 7, 25, 25],
labels: ["Operational", "Networking", "Hiring", "R&D"],
legend: {
show: true,
position: "bottom",
markers: { offsetX: -3 },
labels: {
useSeriesColors: true
}
},
dataLabels: {
enabled: false
},
stroke: {
show: false,
curve: "straight"
},
colors: ["oklch(var(--p))", "oklch(var(--su))", "oklch(var(--er))", "oklch(var(--n))"],
states: {
hover: {
filter: {
type: "none"
}
}
},
tooltip: {
enabled: true
}
}))
})()
})
</script>The following example demonstrates the usage of a bubble chart.
<div id="apex-bubble-chart"></div>The following example demonstrates the usage of a pie chart.
<div id="apex-pie-chart"></div>The following example demonstrates the usage of a radial bar chart.
<div id="apex-radial-bar-chart"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-radial-bar-chart", mode => ({
chart: {
height: 380,
type: "radialBar"
},
colors: ["oklch(var(--er))", "oklch(var(--a))", "oklch(var(--wa))"],
plotOptions: {
radialBar: {
size: 185,
hollow: {
size: "40%"
},
track: {
margin: 10,
background: 'oklch(var(--b1))'
},
dataLabels: {
name: {
fontSize: "1.5rem"
},
value: {
fontSize: "1rem",
color: "oklch(var(--bc) / 0.9)"
},
total: {
show: true,
fontWeight: 400,
fontSize: "1.3rem",
label: "Comments",
formatter: function (w) {
return "80%"
}
}
}
}
},
grid: {
borderColor: "oklch(var(--bc) / 0.4)",
padding: {
top: 0,
bottom: 0
}
},
legend: {
show: true,
position: "bottom",
labels: {
useSeriesColors: true
}
},
stroke: {
lineCap: "round"
},
series: [80, 50, 35],
labels: ["Comments", "Replies", "Shares"]
}))
})()
})
</script>The following example demonstrates the usage of a radar chart.
<div id="apex-radar-chart"></div><script>
window.addEventListener("load", () => {
;(function () {
buildChart("#apex-radar-chart", mode => ({
chart: {
height: 350,
width: "100%",
type: "radar",
toolbar: {
show: false
},
dropShadow: {
enabled: false,
blur: 8,
left: 1,
top: 1,
opacity: 0.2
}
},
legend: {
show: true,
position: "bottom",
labels: {
useSeriesColors: true
}
},
plotOptions: {
radar: {
polygons: {
strokeColors: "oklch(var(--bc) / 0.4)",
connectorColors: "oklch(var(--bc) / 0.4)"
}
}
},
yaxis: {
show: false
},
series: [
{
name: "iPhone 15 Pro Max",
data: [41, 64, 81, 60, 42, 42, 33, 23]
},
{
name: "Samsung s24 Ultra",
data: [65, 46, 42, 25, 58, 63, 76, 43]
}
],
colors: ["oklch(var(--p)/0.7)", "oklch(var(--wa)/0.9)"],
xaxis: {
categories: ["Battery", "Brand", "Camera", "Memory", "Storage", "Display", "OS", "Price"],
labels: {
show: true,
style: {
colors: "oklch(var(--bc) / 0.9)",
fontSize: "12px"
}
}
},
stroke: {
show: false,
width: 0
},
markers: {
size: 0
},
grid: {
show: false,
padding: {
top: -20,
bottom: -20
}
}
}))
})()
})
</script>The following example demonstrates the usage of a small sized sparkline charts.
- Chart types Description
- Inline area chart.
- Inline bar chart.
- Inline pie chart.
- Inline line chart.
- Inline candles chart.
<ul class="border-base-content/25 divide-base-content/25 w-full divide-y rounded-md border *:p-3">
<li class="bg-base-200/40 text-base-content/90 grid-cols-2 grid items-center gap-x-2">
<span>Chart types</span>
<span>Description</span>
</li>
<li class="grid-cols-2 grid items-center gap-x-2">
<div id="apex-sparklines-area-chart"></div>
<span>Inline area chart.</span>
</li>
<li class="grid-cols-2 grid items-center gap-x-2">
<div id="apex-sparklines-bar-chart"></div>
<span>Inline bar chart.</span>
</li>
<li class="grid-cols-2 grid items-center gap-x-2">
<div id="apex-sparklines-pie-chart"></div>
<span>Inline pie chart.</span>
</li>
<li class="grid-cols-2 grid items-center gap-x-2">
<div id="apex-sparklines-line-chart"></div>
<span>Inline line chart.</span>
</li>
<li class="grid-cols-2 grid items-center gap-x-2">
<div id="apex-sparklines-candles-chart"></div>
<span>Inline candles chart.</span>
</li>
</ul>
