CODEWITHSUNDEEP
javascriptangularchartsgoogle-visualization
Mohammad Nasir
Mohammad Nasir

Reputation: 77

How to show Percentage in gauge chart of Angular google chart package?

I am developing an application where I am going to show a gauge chart. I am using the angular-google-chart package.enter image description here

I implement a basic gauge type chart. Instead of showing the flat number like 0, 100 and 78, I want to show 0%, 100% and 78% here. To do this, I am using the below coding snippet.

@ViewChild('googlechart')
  googlechart: GoogleChartComponent;
  public gaugeChart = {
    type: 'Gauge',
    data: [
      ['Water', 35]
    ],
    options: {
      width: 500,
      height: 500,
      greenFrom: 50,
      greenTo: 100,
      redFrom: 0,
      redTo: 20,
      yellowFrom: 20,
      yellowTo: 50,
      minorTicks: 5
    }
  };

Upvotes: 0

Views: 2125

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

for the value of the chart (78), we can use object notation.
where v: is the value of the chart, and f: is the formatted value. 

data: [
  ['Water', {v: 78, f: '78%'}]
],

as for the major ticks (0, 100), use the majorTicks config option. 

options: {
  width: 500,
  height: 500,
  greenFrom: 50,
  greenTo: 100,
  redFrom: 0,
  redTo: 20,
  yellowFrom: 20,
  yellowTo: 50,
  minorTicks: 5,
  majorTicks: ['0%', '100%']  // <-- add major ticks
}

see following working snippet (non-angular)... 

google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Water', {v: 78, f: '78%'}]
  ]);

  var options = {
    width: 500,
    height: 500,
    greenFrom: 50,
    greenTo: 100,
    redFrom: 0,
    redTo: 20,
    yellowFrom: 20,
    yellowTo: 50,
    minorTicks: 5,
    majorTicks: ['0%', '100%']
  };

  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions