Highcharts-vue - Using the tooltip / label formatter() - vue.js

Question

I previously used the label formatter to customise the Y-Axis labels in a chart, but I'm not sure how to do this using highcharts-vue because of scope.
See the following pseudo code;
export default {
data () {
return {
currencySymbol: '$',
title: 'My Chart',
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: 'Spline',
chartOptions: {
chart: {
type: 'spline'
},
title: {
text: 'Sin chart'
},
yAxis: {
gridLineDashStyle: 'Dot',
labels: {
style: {
color: '#fff'
},
formatter: function () {
return this.currencySymbol + this.axis.defaultLabelFormatter.call(this)
}
},
series: [{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: '#6fcd98'
}]
}
}
}
In the full app, the currencySymbol property is updated in the response of an AJAX call.
Is there an elegant way of achieving this?

Answer 1

The most recommended way would be to use Computed Properties, JS Arrow function, and call Highcharts.Axis.prototype.defaultLabelFormatter.
First of all we need to move a whole chart configuration inside of a computed property, e.g called chartOptions. Then we just need to refactor the formatter function a bit, so that it would be arrow function, and create the variable with symbol defined in component data (!important). After that, the this keyword will indicate on the component object, and refer the symbol direcly by calling the variable created on the top of the function. I prepared the example, so please take a lok on it.
Live example: https://codesandbox.io/s/highcharts-vue-demo-icuzw
Code:
data() {
return {
currencySymbol: "$",
title: "My Chart",
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: "Spline"
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text: "Sin chart"
},
yAxis: {
gridLineDashStyle: "Dot",
labels: {
style: {
color: "#000"
},
formatter: label => {
return (
symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
);
}
}
},
series: [
{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: "#6fcd98"
}
]
};
}
}
Kind regards!