Apexcharts DataLabels - apexcharts

Question

Can anyone help in displaying data labels on apex charts I want to show data value instead of %value
I want to show the value 55 or 41 or something likewise on the data label how to do the formatting for this in data labels block
dataLabels: {
enabled: true,
textAnchor: "start",
style: {
colors: ["#fff"]
},
formatter: function(val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val;
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
var options = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}],
};
[![Apex Charts datalabel ][1]][1]

Answer 1

It is similar to how you have raised it in the dataLabels formatter, val contains the value of data.
I leave you below a possible dataLabels and an example in codesandbox
dataLabels: {
enabled: true,
textAnchor: "start",
style: { colors: ["#fff"] },
formatter: function (val, opt) {
console.log("VAL: ", val);
let valueFormatted = val.toFixed(0);
console.log("Val formatted: ", valueFormatted);
// return opt.w.globals.labels[opt.dataPointIndex] + ": " + val;
return valueFormatted;
},
offsetX: 0,
dropShadow: { enabled: true }
}
Result of the solution in photo with first solution with val
You can also invent another value within series and put it in the formatter, in the code is the example with valueInvented, and in the formatter function we access it with opt.w.config.series[opt.seriesIndex].valueInvented
const series = [
{
name: "Marine Sprite",
data: [20, 60, 20, 20, 20, 20, 20],
valueInvented: 1
},
{
name: "Striking Calf",
data: [10, 10, 20, 20, 20, 20, 20],
valueInvented: 2
},
{
name: "Tank Picture",
data: [10, 5, 20, 20, 20, 20, 20],
valueInvented: 3
},
{
name: "Bucket Slope",
data: [30, 5, 20, 20, 20, 20, 20],
valueInvented: 4
},
{
name: "Reborn Kid",
data: [30, 20, 20, 20, 20, 20, 25],
valueInvented: 5
}
];
formatter: function (val, opt) {
console.log("VAL: ", val);
console.log("OPT:", opt);
console.log(
"OPT valueInvented: ",
opt.w.config.series[opt.seriesIndex].valueInvented
);
let valueFormatted = val.toFixed(0);
console.log("Val formatted: ", valueFormatted);
return opt.w.config.series[opt.seriesIndex].valueInvented
},

Answer 2

Just add a custom formatter as below:
dataLabels: {
formater(val, opt) {
return opt.w.globals.series[opt.seriesIndex][opt.dataPointIndex]
}
}