I'm new to vue and apex charts, basically what I need is to call a method from an apex chart option, I created a file showing the problem I'm having:
https://jsfiddle.net/wr3uo5va/
I need to call the method currencyValue
from
chartOptions.dataLabels
dataLabels: { enabled: true, offsetX: -25, formatter: function(val) { return val + " Reais"; <--- This works // return this.currencyValue(val) <--- This does not work }, },
Any suggestions?
P粉6620895212024-03-28 15:58:45
You can put chartOptions
in the method instead of the data.
Below is the working code
const currencyValue = (val) => {
return "R$" + val;
}
new Vue({
el: "#app",
data() {
return {
series: [450, 300, 500]
}
},
methods: {
chartOptions() {
return {
labels: ['Paid', 'Pending', 'Rejected'],
plotOptions: {
radialBar: {
size: 165,
offsetY: 30,
hollow: {
size: '20%'
},
track: {
background: "#ebebeb",
strokeWidth: '100%',
margin: 15,
},
dataLabels: {
show: true,
name: {
fontSize: '18px',
},
value: {
fontSize: '16px',
color: "#636a71",
offsetY: 11
},
total: {
show: true,
label: 'Total',
formatter: function() {
return 42459
}
}
}
},
},
responsive: [{
breakpoint: 576,
options: {
plotOptions: {
radialBar: {
size: 150,
hollow: {
size: '20%'
},
track: {
background: "#ebebeb",
strokeWidth: '100%',
margin: 15,
},
}
}
}
}],
colors: ['#7961F9', '#FF9F43', '#EA5455'],
fill: {
type: 'gradient',
gradient: {
// enabled: true,
shade: 'dark',
type: 'vertical',
shadeIntensity: 0.5,
gradientToColors: ['#9c8cfc', '#FFC085', '#f29292'],
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
},
},
stroke: {
lineCap: 'round'
},
chart: {
dropShadow: {
enabled: true,
blur: 3,
left: 1,
top: 1,
opacity: 0.1
},
},
tooltip: {
x: {
formatter: function (val) {
return val;
},
},
y: {
formatter: function (val) {
return currencyValue(val);
},
},
},
}
}
},
components: {
VueApexCharts
}
})
Methods cannot be called in data
or compulated
, but can be called in methods
One thing that needs to be modified is as follows
P粉0789451822024-03-28 14:22:20
The problem is that this
in the formatter
callback is the chart instance (not the component instance) because it is declared as a regular function.
The solution is to use arrow functions< /a> to bind the component instance as context:
export default { methods: { currencyValue(value) {⋯}, loadChartData() { ⋮ this.chartOptions = { ⋮ dataLabels: { ⋮ // ❌ don't use regular function here //formatter: function(val) { // return this.currencyValue(val) //}, // ✅ formatter: (val) => { return this.currencyValue(val) }, }, } } } }