Column
Setting up the chart
Last updated
Setting up the chart
Last updated
All I did was make the hexadecimal colors and the chart list dynamic
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var options = {
grid: {
show: true,
padding: {
top: 20,
right: 0,
bottom: 0,
left: 0
}
},
colors: ["#4F46E5"],
series: [
{
name: "Sales",
data: [
{ x: "Jan", y: "30" },
{ x: "Feb", y: "60" },
{ x: "Mar", y: "53" },
{ x: "Apr", y: "45" },
{ x: "May", y: "60" },
{ x: "Jun", y: "75" },
{ x: "Jul", y: "53" }
]
}
],
chart: {
toolbar: {
show: true
},
type: "bar",
height: 260,
sparkline: {
enabled: false
}
},
plotOptions: {
bar: {
columnWidth: "40%",
borderRadius: 4,
dataLabels: {
position: "top"
}
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"]
}
},
xaxis: {
axisBorder: {
show: true
},
axisTicks: {
show: true
},
labels: {
show: true,
formatter: function (val) {
return val;
}
},
tooltip: {
enabled: true
}
},
yaxis: {
axisBorder: {
show: true
},
axisTicks: {
show: true
},
labels: {
show: true,
formatter: function (val) {
return val + "%";
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
};
</script>
</head>
<body>
<div id="chart" style="width: 95%;"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</body>
</html>
{x: '', y: ''}