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);

score 4 · Accepted Answer · answered Mar 08 '18 at 20:51

4

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;
}

answered Mar 08 '18 at 20:51

Syntactic Fructose

18,936
23
91
177

person of the year! Thank you so much! – Oscar Ricaud Mar 08 '18 at 20:52
It messed up the layout of the graphs, the y-axis is now a lot longer than it was before, but this was very helpful! How do I mark your solution accepted? – Oscar Ricaud Mar 08 '18 at 20:58
1

Okay, no I accidentally deleted the x-axis label which is why it showed all messed up. Thank you so much this answer worked like a charm – Oscar Ricaud Mar 08 '18 at 21:01

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

1 Answers1