Search code examples
chartsgoogle-visualizationgauge

How to remove the minimum and maximum value in Google Visualization Gauge


I am trying to remove the minimum and maximum values (0 and 100) from a Google Visualizations gauge. I managed to remove the main value but not the minimum and maximum values. An idea ?

       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
google.charts.load('current', {
  packages: ['gauge']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Studio / T1', {v:90, f:''}],
    ['T2', {v:90, f:''}],
  ]);
        var options = {
          width: 400, height: 160,
          redFrom: 66.66, redTo: 100,
          redColor: "#cf1717",
          yellowFrom:33.33, yellowTo: 66.66,
          yellowColor: "#f7e031",
          greenFrom:0, greenTo:33.33,
          greenColor: "#168200",
          minorTicks: 5
        };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gauge(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
      if (circle.getAttribute('fill') === '#4684ee') {
        circle.setAttribute('fill', '#4c96d7');
      }
    });
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {

      if (path.getAttribute('stroke') === '#c63310') {
        path.setAttribute('stroke', '#c4996b');
        path.setAttribute('fill', '#c4996b');
      }
    });
  });
  chart.draw(data, options);

});

    </script>

Solution

  • you can supply an empty array [] for the majorTicks option...

    majorTicks: []
    

    see following working snippet...

    google.charts.load('current', {
      packages: ['gauge']
    }).then(function () {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Studio / T1', {v:90, f:''}],
        ['T2', {v:90, f:''}],
      ]);
      var options = {
        width: 400, height: 160,
        redFrom: 66.66, redTo: 100,
        redColor: "#cf1717",
        yellowFrom:33.33, yellowTo: 66.66,
        yellowColor: "#f7e031",
        greenFrom:0, greenTo:33.33,
        greenColor: "#168200",
        majorTicks: [],
        minorTicks: 5
      };
      var container = document.getElementById('chart_div');
      var chart = new google.visualization.Gauge(container);
      google.visualization.events.addListener(chart, 'ready', function () {
        Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle) {
          if (circle.getAttribute('fill') === '#4684ee') {
            circle.setAttribute('fill', '#4c96d7');
          }
        });
        Array.prototype.forEach.call(container.getElementsByTagName('path'), function(path) {
          if (path.getAttribute('stroke') === '#c63310') {
            path.setAttribute('stroke', '#c4996b');
            path.setAttribute('fill', '#c4996b');
          }
        });
      });
      chart.draw(data, options);
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div"></div>