Customize the format of data labels in horizontal bar charts in NGX Charts

I am currently using ngx-charts, specifically the bar-horizontal module. My goal is to format the data labels and add a percentage symbol at the end. I attempted to use the [xAxisTickFormatting] property, but it seems that my values are located within the ngx-charts-series-horizontal component rather than the ngx-charts-x-axis.

The ngx-charts implementation looks like this:

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

I also attempted to manually format the data array (I know it was not the best approach, but I gave it a try):

this.givesEnergyChartData = this.statistic.givesEnergyData.map(
 s => {
   return { name: s.name, value: s.count } 
 });

where I tried adding '+ '%' for the value: s.count.

So, what steps can I take to properly format the data labels and append a '%' after the values?

Here is the chart image

angulartypescriptchartsngx-bootstrapngx-charts

Answer №1

Give this a shot.

<ngx-charts-bar-horizontal 
*ngIf='givesEnergyChartData && givesEnergyDataColorScheme'  
[scheme]="givesEnergyDataColorScheme"
[results]="givesEnergyChartData"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[view]="viewGiveEnergy"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
  [dataLabelFormatting] = "formatDataLabel"
[showDataLabel]="showDataLabel">
</ngx-charts-bar-horizontal>

Then add:

  formatDataLabel(value )
  {
    return value + '%';
  }

Answer №2

To achieve the desired formatting for the y-axis ticks, make sure to include the parameter [yAxisTickFormatting] and define a function like the one below in your .ts file:

chart.component.ts

  customTickFormatting(val: any) {
    return val.toLocaleString() + ' units';
  }

chart.component.html

<ngx-charts-bar-vertical
  [view]="view"
  [results]="chartData"
  [xAxis]="true"
  [yAxis]="true"
  [legend]="true"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [yAxisTickFormatting]="customTickFormatting"
>
</ngx-charts-bar-vertical>

Answer №3

A clever method I discovered involves using querySelector and innerHTML in this way:

 document.querySelectorAll(text.textDataLabel).innerHTML += '%';

Answer №4

To customize the appearance of text, I made modifications to my CSS file using the following code snippet:

::ng-deep .ngx-charts .tick text {
    text-decoration: underline;
    font-weight: bold;
    color: blue;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Angular Animation feature seems to function properly only upon the initial click

Why does the animation (translateX) only work on the first click in the stackblitz example provided? How can I make it work every time? Thanks for any help! https://stackblitz.com/edit/angular-ivy-p9strz ...

angular

Protractor failing to synchronize with Angular2 load sequence

Software versions: Protractor version: 5.1.2 Node version: 6.9.0 Angular version: 2.4.10 OnPrepare function includes the step browser.get('/')<code> followed by a login within an <code>it block. The first issue encounte ...

angularprotractor

Which Angular component, directive, or pipe would be best suited for creating dynamic HTML content similar to this?

(I am transitioning from React to Angular, so please bear with me if my question has a hint of React influence.) I am in need of developing an Angular component that can accept a string along with a list of terms within that string for displaying tooltips ...

javascriptangular

Is it possible for the filter with the new date() function to accept formats other than yyyy-mm-dd?

After receiving a response from mydatepicker in the specific format below: { "isRange":false, "singleDate":{ "date":{ "year":2022, "month":5, "day":13 }, "jsDate": ...

javascriptangularngx-mydatepicker

Dealing with dynamic meta tags in Angular for server side rendering (SSR): Best practices and tips

Currently, I am attempting to display dynamic data in the title, meta, and description tags of an Angular application using the nguniversal package. However, despite my efforts, I have not been able to locate comprehensive documentation on how to achieve t ...

node.jsangularserver-side-rendering

How can Typescript elevate your use of the IFrame API?

Here is a code snippet that performs the following actions: let doc = this.iframe.contentDocument || this.iframe.contentWindow; let content = `...` doc!.open(); doc!.write(content); doc!.close(); Despite this, the Typescript linter thr ...

javascripthtmltypescript

Retrieve the name from the accordion that was clicked

Hey there, I have a simple accordion that is based on an API called "names". <div *ngFor="let item of showDirNames | async | filter: name; let i = index;"> <button class="accordion" (click)="toggleAccordian($event, i)&q ...

angulartypescript

Issue with React hook forms and shadcn/ui element's forwardRef functionality

Greetings! I am currently in the process of creating a form using react-hook-form along with the help of shadcn combobox. In this setup, there are two essential files that play crucial roles. category-form.tsx combobox.tsx (This file is utilized within ...

reactjstypescriptnext.jsreact-hook-formradix-ui

Using setBounds in ng2-ui/map: A step-by-step guide

I have been attempting to display a map using the setBounds feature with the ng2-ui/map library. Unfortunately, I am having trouble finding documentation on how to achieve this. https://github.com/ng2-ui/map Currently, here is the code that I have writte ...

angulargoogle-maps

The Angular form remains invalid despite all form fields being valid

After spending hours on an Angular form validation project, I have encountered an issue that has been difficult to resolve. The form I created seems to be working fine based on a demo I shared, where it shows the form status as VALID. However, when running ...

angularangular-reactive-formsangular-test

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...

htmlcssangularsafaricpanel

You are unable to link to <custom directive selector> because it is not recognized as a valid property of 'div'

I am currently working on a project in StackBlitz, and you can find the link here: https://stackblitz.com/edit/angular-fxfo3f?file=src/directives/smooth-height.directive.ts I encountered an issue: Error in src/components/parent/parent.component.html (2:6) ...

angulartypescript

TypeScript compilation will still be successful even in the absence of a referenced file specified using require

Having both Project 1 and Project 2 in my workspace, I encountered an unusual issue after copying a file, specifically validators/index.ts, from Project 1 to Project 2. Surprisingly, TypeScript compilation went through successfully without showing any erro ...

typescriptwebstorm

How can you expand the class of a library object in Animate CC using Createjs?

I am currently in the process of migrating a large flash application to canvas using Typescript, and I'm facing challenges when it comes to utilizing classes to extend library objects. When working with a class library for buttons, class BtnClass { ...

typescriptcreatejsanimate-cc

Issue with clientHeight not functioning properly with line breaks in Angular 2 application after ngAfterViewInit

I have successfully created a Gridify page in my Angular 2 application using the Gridify library. To initialize it, I've utilized a custom ngAfterViewChecked method: ngAfterViewChecked() { var selector = document.querySelector('.read-grid& ...

javascriptangular

determine the appropriate month for the calendar month component based on the route selected

I have developed a calendar component where I want to preselect the default month based on the route parameters received for the component. Here is the calendar: <p-calendar [maxDate]="dateTime" [(ngModel)]="selectedMonth" name=&quo ...

angularprimeng-calendar

The problem of parameter being NULL in a post request in a .Net Core 3.0 Angular application

This is my first venture into the world of .Net Core Angular projects, so I apologize if my question appears to be too basic. Despite researching similar issues, I am still unable to resolve my problem, which leads me to believe that I must be making a mis ...

c#typescriptpost.net-coreangular8

Unable to deploy Angular2 application using Cli

i clicked on this link; https://github.com/angular/angular-cli/wiki npm version is 5.0.1 node version is 6.11.0 i executed the following command: npm install -g @angular/cli here's what I tried to fix it: npm uninstall -g @angular/cli npm cach ...

node.jsangularnpmangular-cli

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

jqueryhtmltwitter-bootstrapangular

Chrome Driver Protractor Angular 2 encountering issue with unclickable element

My issue is with clicking the second level menu options to expand to the third level. I have tried using browser.driver.manage().window().setSize(1280, 1024) in the before all section. Here is my code snippet: it('Should trigger the expansion of the ...

javascripthtmlangularprotractor