Google Visualization Gauge Change Label Position

Question

I am attempting to move the gauge label above the visualization.
My attempt to use $("#Min svg text:first").attr("y", 5); resulted in the label being chopped off on top. I've tried digging into the svg but none of my attempts have been able to add any padding/margin above the gauge.

Does anyone have a suggestion or experience with this? Many thanks as always.

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

const paramsMin = {
  divId: "Min",
  label: "Fastest",
  value: 3,
  greenFrom: 3,
  greenTo: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMin)
});

const paramsStandard = {
  divId: "Standard",
  label: "Standard",
  value: 5,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsStandard)
});

const paramsMax = {
  divId: "Max",
  label: "Slowest",
  value: 7,
  redFrom: 5,
  redTo: 7,
}
google.charts.setOnLoadCallback(function() {
  drawChart(paramsMax)
});

function drawChart(params) {
  const {
    divId,
    label,
    value,
    greenFrom = null,
    greenTo = null,
    redFrom = null,
    redTo = null
  } = params;

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    [label, value],
  ]);

  var options = {
    width: 120,
    height: 120,
    greenFrom: greenFrom,
    greenTo: greenTo,
    redFrom: redFrom,
    redTo: redTo,
    minorTicks: 5,
    min: 0,
    max: 10,
  };

  var chart = new google.visualization.Gauge(document.getElementById(`${divId}`));

  chart.draw(data, options);
  $(`#${divId} svg text:first`).attr('y', 5);
}

.grid-container-element {
  display: grid;
  grid-template-columns: 125px 125px 125px;
}

.grid-child-element {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<div class="grid-container-element">
  <div class="grid-child-element purple">
    <div id="Min" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Standard" style="width: 120px; height: 120px;"></div>
  </div>
  <div class="grid-child-element green">
    <div id="Max" style="width: 120px; height: 120px;"></div>
  </div>
</div>

Answer 1

instead of moving the label in the chart after it is drawn...

remove the label from the chart
and add it to a separate <div> outside of the chart

see following snippet...

const paramsMin = {
  divId: "Min",
  label: "Fastest",
  value: 3,
  greenFrom: 3,
  greenTo: 5,
}

const paramsStandard = {
  divId: "Standard",
  label: "Standard",
  value: 5,
}

const paramsMax = {
  divId: "Max",
  label: "Slowest",
  value: 7,
  redFrom: 5,
  redTo: 7,
}

google.charts.load('current', {
  'packages': ['gauge']
}).then(function () {
  drawChart(paramsMin);
  drawChart(paramsStandard);
  drawChart(paramsMax);
});

function drawChart(params) {
  const {
    divId,
    label,
    value,
    greenFrom = null,
    greenTo = null,
    redFrom = null,
    redTo = null
  } = params;

  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['', value],        // <-- remove label from chart
  ]);

  var options = {
    width: 120,
    height: 120,
    greenFrom: greenFrom,
    greenTo: greenTo,
    redFrom: redFrom,
    redTo: redTo,
    minorTicks: 5,
    min: 0,
    max: 10
  };

  var chart = new google.visualization.Gauge(document.getElementById(`${divId}`));
  
  // add label to separate div
  document.getElementById(`${divId}Label`).innerHTML = params.label;

  chart.draw(data, options);
}

.grid-container-element {
  display: grid;
  font-family: Arial;
  font-size: 12px;
  grid-template-columns: 125px 125px 125px;
}

.grid-child-element {
  text-align: center;
}

.grid-chart {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


<div class="grid-container-element">
  <div class="grid-child-element purple">
    <div id="MinLabel"></div>
    <div class="grid-chart">
      <div id="Min" style="width: 120px; height: 120px;"></div>
    </div>
  </div>
  <div class="grid-child-element green">
    <div id="StandardLabel"></div>
    <div class="grid-chart">
      <div id="Standard" style="width: 120px; height: 120px;"></div>
    </div>
  </div>
  <div class="grid-child-element green">
    <div id="MaxLabel"></div>
    <div class="grid-chart">
      <div id="Max" style="width: 120px; height: 120px;"></div>
    </div>
  </div>
</div>