2

I am trying to use Google gauge charts in my page. Now I want to add text in the chart for each section or colors. Can I do that inside the chart. I tried doing some html modification but with no help.

Trying from this link -https://developers.google.com/chart/interactive/docs/gallery/gauge enter image description here

So for example, I would like to add text1 for white color and so on.

Kaushik Ray
  • 555
  • 2
  • 8
  • 21
  • Gauge charts are pretty slim on the customizations. You could probably super-impose something using CSS and absolute positioning, but I don't think gauge charts have a layout interface like the other main charts like line, bar and area do. You'd have to render your gauge with fixed size and ranges to make it work. Personally I'd probably just put a legend next to it with colored boxes to indicate the gauge range and a text description. – nbering Oct 02 '16 at 20:02
  • Yes that is what I am thinking now as they even cannot be customized to have more than 3-4 colors – Kaushik Ray Oct 02 '16 at 20:37
  • Gauge charts don't get much love from google, likely because they aren't used anywhere public. Keep in mind Google built this library for themselves and shared it with the world. They generally only add a feature if it's valuable internally. – nbering Oct 02 '16 at 20:39

1 Answers1

3

use the majorTicks config option to provide labels for the major ticks

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Gauge(container);

    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Memory', 80],
      ['CPU', 55],
      ['Network', 68]
    ]);

    var options = {
      width: 600, height: 200,
      redFrom: 90, redTo: 100,
      yellowFrom:75, yellowTo: 90,
      majorTicks: ['A', 'B', 'C', 'D', 'E'],
      minorTicks: 3
    };

    chart.draw(data, options);
  },
  packages: ['gauge']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133