How to use yAxisTickFromatting to make a percent yAxis on ngx-Charts Bar vertical?

Question

I am currently working with NGX-Charts version 8.0.2 specifically the vertical bar chart.

I was looking through the documentation for the bar chart and I was trying to figure out how to format the x-axis ticks with percentages.

example: 20% 30% 40% 50% etc.

I did some digging around and I found this thread.

Function for tick-formatting thread

That basically stated that one would have to utilize a function to first format the data before it was passed into the yaxistickformatter.

I did some further digging and found this thread that gives an idea as to how to format the out put of said function.

How to format a percent locale string

So with these two tools I attempted to create a function that would format my y-axis into percentages.

this is my vertical bar chart component file

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
selector: 'app-vertical-bar-chart',
templateUrl: './vertical-bar-chart.component.html',
styleUrls: ['./vertical-bar-chart.component.css']
})
export class VerticalBarChartComponent implements OnInit {

view = [700, 400];

// options
showXAxis = true;
showYAxis = true;
gradient = false;
results = tankData;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';

colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};

constructor() { 
Object.assign(this, { tankData });
} 



ngOnInit() {
}

}

function percentTickFormatting(val: any): string {
return val.toLacaleString('en-us', {syle: 'percent', 
maximumSignificantDigits: 1});
}

this is my vertical bar chart html file

<ngx-charts-bar-vertical
[view] = "view"
[scheme]="colorScheme"
[results]="tankData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel" 
[yAxisTickFormatting] = "percentTickFormatting">
</ngx-charts-bar-vertical>

this is my data file:

export const tankData = [
{
 'name': 'Germany',
 'value': 90
},
{
'name': 'USA',
'value': 80
},
{
'name': 'France',
'value': 72
}
];

This is the final result

the y axis ticks haven't been formatted to percents. I am sure I am close possibly I may need to pass the values from the data file into the function I outline such that it can then be formatted and passed to the graph. However I am unsure as to how to do this. Any assistance would be appreciated.

score 5 · Answer 1 · edited Jul 27 '20 at 17:04

Function formatting

I found the answer buried in the git forum.

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { tankData } from '../data';

@Component({
   selector: 'app-vertical-bar-chart',
   templateUrl: './vertical-bar-chart.component.html',
   styleUrls: ['./vertical-bar-chart.component.css']
})

export class VerticalBarChartComponent implements OnInit {
   view = [700, 400];
   // options
   showXAxis = true;
   showYAxis = true;
   gradient = false;
   results = tankData;
   showLegend = true;
   showXAxisLabel = true;
   xAxisLabel = 'Country';
   showYAxisLabel = true;
   yAxisLabel = 'Population';

   colorScheme = {
     domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
   };

   constructor() { 
     Object.assign(this, { tankData });
   } 

   ngOnInit() {
   }

   yAxisTickFormatting(value){ 
     return percentTickFormatting(value);
   }

   function percentTickFormatting(val: any) {
     return val.toLocaleString() + '%';
   }
}

The rest of the other code can stay the same and this should work. You can substitute out the % symbol with whatever symbol you would like and it will work.

Best

You'll have to bind it the angular component though. It won't work unless you do that. Something like [yAxisTickFormatting]="yAxisTickFormatting" in your html or up in the options like in the code — Ziku, Jun 22 '21 at 01:12

score 2 · Answer 2 · answered Apr 30 '20 at 06:33

2

Easy Fix

 ngx-charts-bar-vertical {
      text {
        fill: #fff !important; 
      } 
    }

answered Apr 30 '20 at 06:33

Liran Rouzentur

61
1
5

score 0 · Answer 3 · answered Aug 04 '19 at 14:51

in case if anyone still struggling. This is how I've done it

<ngx-charts-bar-vertical-2d
  [scheme]="colorScheme"
  [view]="view"
  ...
  [yAxisTickFormatting]="yAxisTickFormattingFn"
  [xAxisTickFormatting]="xAxisTickFormattingFn">
</ngx-charts-bar-vertical-2d>

And then

export class D3BarComponent{
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  public yAxisTickFormattingFn = this.yAxisTickFormatting.bind(this);
  yAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
  xAxisTickFormatting(value) {
    return value + "%" // this is where you can change the formatting
  }
}

Hope this help!

score 0 · Answer 4 · answered Jul 26 '20 at 00:48

From the swimlane github forum, with inline function

<ngx-charts-line-chart
 [view]="view"
 [xAxisTickFormatting]="xAxisTickFormatting"
>
</ngx-charts-line-chart>

Component

export class MyComponent  implements OnInit {
  xAxisTickFormatting = (value) => `${value.toString()}`;

How to use yAxisTickFromatting to make a percent yAxis on ngx-Charts Bar vertical?

4 Answers4