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=".7.1/jquery.min.js"></script>
<script type="text/javascript" src=".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>