How do you add a $ in front of the value for the y-axis using ngx-charts

Question

I have a question related to Angular and TypeScript, using https://swimlane.gitbooks.io/ngx-charts/content/charts/bar-vertical.html I am trying to let the y-axis to be = $100, $200, $300 but if I set $ + a number it returns an error Error: <path> attribute d: Expected number, "MNaN,NaNhNaNhNaNv…".

It looks like the value for the object must be a number! But I want a $ + number. How do I go about this?

This is what I current have this.

let modifiedBarGraphValues = [
{
    'name': 'sun',
    'value': 100,
  },
{
    'name': 'sun',
    'value': 200,
}, ];     

modifiedBarGraphValues[i].value = this.amountObtained(weekEarnings[j], payRate);

Answer 1

You need to use the yAxisTickFormatting function for this. Inside your htmls ngx-charts-bar-vertical, add

[yAxisTickFormatting]="myYAxisTickFormatting"

Then inside your component, you would implement the function like so:

myYAxisTickFormatting(val) {
    return '$' + val;
}