<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_1');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['30%'],
endingShape: 'rounded'
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_1" style="height: 350px;"></div>
</div>
</div>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_1');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [44, 55, 57, 56, 61, 58]
}, {
name: 'Revenue',
data: [76, 85, 101, 98, 87, 105]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: ['30%'],
endingShape: 'rounded'
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_2" style="height: 350px;"></div>
</div>
</div>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_3');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-info');
var lightColor = KTUtil.getCssVariableValue('--bs-light-info');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [30, 40, 40, 90, 90, 70, 70]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [baseColor]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
}
}
},
colors: [lightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_3" style="height: 350px;"></div>
</div>
</div>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_4');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-success');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-warning');
var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
data: [60, 50, 80, 40, 100, 60]
}, {
name: 'Revenue',
data: [70, 60, 110, 40, 50, 70]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth'
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: labelColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
}
}
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
colors: [baseLightColor, secondaryLightColor],
strokeColor: [baseLightColor, secondaryLightColor],
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_4" style="height: 350px;"></div>
</div>
</div>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_5');
var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-500');
var borderColor = KTUtil.getCssVariableValue('--bs-gray-200');
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
if (!element) {
return;
}
var options = {
series: [{
name: 'Net Profit',
type: 'bar',
stacked: true,
data: [40, 50, 65, 70, 50, 30]
}, {
name: 'Revenue',
type: 'bar',
stacked: true,
data: [20, 20, 25, 30, 30, 20]
}, {
name: 'Expenses',
type: 'area',
data: [50, 80, 60, 90, 50, 70]
}],
chart: {
fontFamily: 'inherit',
stacked: true,
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
stacked: true,
horizontal: false,
endingShape: 'rounded',
columnWidth: ['12%']
},
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
yaxis: {
max: 120,
labels: {
style: {
colors: labelColor,
fontSize: '12px'
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return '$' + val + ' thousands'
}
}
},
colors: [baseColor, secondaryColor, baseLightColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_5" style="height: 350px;"></div>
</div>
</div>
div
with a unique id
in your HTML markup. Then initialize the chart via javascript.
var element = document.getElementById('kt_apexcharts_6');
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-primary');
var baseLightColor = KTUtil.getCssVariableValue('--bs-success');
var secondaryColor = KTUtil.getCssVariableValue('--bs-info');
if (!element) {
return;
}
var options = {
series: [
{
name: 'Bob',
data: [
{
x: 'Design',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-08').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-05').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-07').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-03').getTime(),
new Date('2019-03-09').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-08').getTime(),
new Date('2019-03-11').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-11').getTime(),
new Date('2019-03-16').getTime()
]
},
{
x: 'Design',
y: [
new Date('2019-03-01').getTime(),
new Date('2019-03-03').getTime()
]
}
]
},
{
name: 'Joe',
data: [
{
x: 'Design',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-05').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-06').getTime(),
new Date('2019-03-16').getTime()
]
},
{
x: 'Code',
y: [
new Date('2019-03-03').getTime(),
new Date('2019-03-07').getTime()
]
},
{
x: 'Deployment',
y: [
new Date('2019-03-20').getTime(),
new Date('2019-03-22').getTime()
]
},
{
x: 'Design',
y: [
new Date('2019-03-10').getTime(),
new Date('2019-03-16').getTime()
]
}
]
},
{
name: 'Dan',
data: [
{
x: 'Code',
y: [
new Date('2019-03-10').getTime(),
new Date('2019-03-17').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-05').getTime(),
new Date('2019-03-09').getTime()
]
},
]
}
],
chart: {
type: 'rangeBar',
fontFamily: 'inherit',
height: height,
toolbar: {
show: false
}
},
colors: [baseColor, secondaryColor, baseLightColor],
plotOptions: {
bar: {
horizontal: true,
barHeight: '80%'
}
},
xaxis: {
type: 'datetime'
},
stroke: {
width: 1
},
fill: {
type: 'solid',
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left'
}
};
var chart = new ApexCharts(element, options);
chart.render();
<div class="card card-bordered">
<div class="card-body">
<div id="kt_apexcharts_6" style="height: 350px;"></div>
</div>
</div>
Pro Version Benefits | Free | Pro |
---|---|---|
UI Elements | 20 | 100 |
In-house Components | 20 | 40 |
Crafted Pages | 5 | 20 |
Complete Documentation | ||
Product Support | ||
Layout Builder | ||
Source Vectors | ||
Email Templates | ||
Calendar App | ||
User Management App | ||
Chat App | ||
Customers App |