Move bottom with jQuery or CSS text SVG of Google Gauge

Question

I'm trying to move the text of Google Gauge bottom to it, because the text is long for the gauge.

This is my HTML code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="width:400px;text-align:center">
  <div id="chart_div" style="width: 400px; height: 400px;">
  </div>
  <h1>MemoryAfter</h1>
</div>

Here you can found the example: https://jsfiddle.net/roby492/1sjrq64s/1/

How you can see, the standard text position is MemoryBefore text but I would move it in the position of MemoryAfter text.

I've tried with jQuery to change the y parameter but it can't find 'g' and 'text' tag.

Answer 1

In order to select just the single <text> element you are after, you need to select the first text element inside the <g> child of the <svg>. The following selector will do that for you:

$("svg > g > text:first")

You can then alter the y attribute using jQuery's attr() function.

Demo here

However you can't move it down any further than I have in the demo because it will be outside the bounds of the SVG. If you need it to be lower, you will need to make the SVG extend down further. For that you will need to alter the height attribute of the <svg>.