How can I rotate datalabel text in ApexChart (Bar Chart)
I tried by adding rotate property in like this
dataLabels: {
enabled: true,
textAnchor: 'end',
style: {
fontSize: '13px',
letterSpacing: '5px',
colors: ['#fff'],
},
formatter: function (val, opt) {
return formatWithSuffix(val)
},
offsetX: 18,
dropShadow: {
enabled: true
},
*rotate: -90*
}
>Solution :
You need to set orientation on the dataLabels:
plotOptions: {
bar: {
dataLabels: {
orientation: 'vertical',
},
}
},
Applying that on one of the Apex Demo’s gives you the following:
var options = {
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: 'top',
orientation: 'vertical',
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -50,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 330,
align: 'center',
style: {
color: '#444'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>