CODEWITHSUNDEEP
angularngx-charts
Karthik
Karthik

Reputation: 1

Format the value of a Ngx gauge chart to display a percentage

I have to format the value displayed in the middle of the gauge chart. I need the average value of five data to be displayed in middle as percentage. In the documentation it shows that using valueFormatting we can format the value. Can anyone explain how to use the valueFormatting function? I have attached the HTML code, data for the graph and snapshot of the graph.

HTML CODE:

<ngx-charts-gauge [view]="view3" [results]="avgTotScreentimeApp"></ngx-charts-gauge>

TS DATA CODE:

export var single = [
  {
    "name": "Germany",
    "value": 10
  },
  {
    "name": "USA",
    "value": 10
  },
  {
    "name": "France",
    "value": 20
  },
  {
    "name": "UK",
    "value": 60
  },
  {
    "name": "Italy",
    "value": 50
  },
  {
    "name": "Spain",
    "value": 40
  }
];

Expected O/P in the middle of the gauge : 38%

Instead, the gauge shows 38,340,000 in the center:

Upvotes: 0

Views: 6201

Answers (2)

Simon G Andrews
Simon G Andrews

Reputation: 11

The function assigned to the [valueFormatting] input pointed out in the answer below, is only passed the already calculated total of the displayed data. The function is probably intended to just reformat that value, eg add a % sign or format as currency. But the data value passed to the assigned function can be ignored. The assigned function can then access the input data object directly and perform the calculation to return what ever aggregate function against the data you require. Sorry not spelling out the details of the function; It will be a matter of looping thru the values in the data object and performing the sum or average calculation etc using all the values, in the defined grouping. Good luck.

ps this link may be of assistance to understand how the function is assigned (its a similiar case in NGX-Charts for formatting axis ticks. https://github.com/swimlane/ngx-charts/issues/51

Upvotes: 1

ScaR
ScaR

Reputation: 31

For formatting the center value, you can use valueFormatting

<ngx-charts-gauge [results]="single" [valueFormatting]="format"></ngx-charts-gauge>

And define the format function in your component.ts. Below is the code to format as percentage.

format(data) {
    return data + '%';
  }

Upvotes: 2

Related Questions