title: Format the value of a Ngx gauge chart to display a percentage
body: <p>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 <code>valueFormatting</code> we can format the value. Can anyone explain how to use the <code>valueFormatting</code> function? I have attached the HTML code, data for the graph and snapshot of the graph.</p>
  
  <p><strong>HTML CODE:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ngx-charts-gauge [view]="view3" [results]="avgTotScreentimeApp"&gt;&lt;/ngx-charts-gauge&gt;
  </code></pre>
  
  <p><strong>TS DATA CODE:</strong></p>
  
  <pre class="lang-js prettyprint-override"><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
    }
  ];
  </code></pre>
  
  <p><strong>Expected O/P in the middle of the gauge</strong> : <strong><em>38%</em></strong></p>
  
  <p>Instead, the gauge shows 38,340,000 in the center:</p>
  
  <p><img src="https://i.stack.imgur.com/cgrYt.jpg" alt=""></p>