Adjust the font size and labels on your Google Gauge widget

Having trouble adjusting the font size of a gauge created with the Google Chart API.

I'm unsure how to use CSS to change the font size of the gauge.

Here is the HTML code:

<div class="center-block" style="margin-top: 8%" >
  <div id="gauge_chart" 
   [chartData]="pie_ChartData" 
   [chartOptions]= "pie_ChartOptions" 
   chartType="Gauge" GoogleChart>
  </div>
</div>

https://i.sstatic.net/riEHi.png I have been trying to reduce the font size using the following lines of CSS, but it's not working.

svg:first-child > g > text[text-anchor~=middle]{
    font-size:9px;
}

If anyone could offer some assistance, I would greatly appreciate it.

Thank you in advance.

htmlcssbootstrap-4google-gauges

Answer №1

attempting

Cascading Style Sheets

svg g text{
font-size:.7em;
}

Successful in my case

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vanishing essence

http://jsfiddle.net/ddGHz/1004/ //html <div id = "anglereturn"/> <div class="box"></div> //js, jquery var box=$(".box"); var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2]; $(document).mousemove(function ...

jqueryhtmlcss

Maintaining aspect ratio of canvas while ensuring responsiveness

Currently, I am working on a drawing app and have come across an issue that has been challenging for me to resolve. The dilemma lies in resizing the canvas of sketches from the original resolution of 1280 x 720 to the maximum size possible upon opening the ...

javascriptcssangularcanvasresponsive-design

Display a layout of dynamic checkboxes without using specific indexes

This particular inquiry expands upon the question posed in this post: How to map dynamic array of input fields. I am dealing with a dynamic collection of rows, each containing its own set of input fields. As these rows can be dynamically added to the DOM, ...

phpjqueryhtmldom

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

htmlcsstwitter-bootstrapbootstrap-4

Issue Encountered When Converting style.css.scss to style.css.scss.erb: File Not Found

Struggling with getting my background images to show up after deploying my Rails app on Heroku has been quite a challenge. After diving into the Heroku documentation, I discovered this helpful tip: In Rails 4 sprockets only generate digest filenames, whic ...

cssruby-on-railsherokuerb

Issues with menu items overlapping have been identified in IE8

Hey there! I've noticed that two of my menu items are overlapping in IE8 (please see the screenshot below - specifically the "About Us" and "Press" items, with a white background between them) on my website http://goo.gl/34oQ8. Any insights on why thi ...

htmlcssmenu

Run each element in sequence after the page has finished loading

I am currently exploring animate.css at and I am curious if it is feasible to apply CSS animations to multiple elements sequentially upon page load. Below are the three distinct elements I aim to animate: <img src="flowers.png" data-test="bounceInDow ...

javascriptcss

Hide the Bootstrap slide menu with jQuery by clicking anywhere on the screen

Here is a Fiddle link: https://jsfiddle.net/r94dq2e4/ I have incorporated a slide-in menu from the left in my website using Twitter Bootstrap version 3. The menu appears when the navbar toggle button is clicked. This is the jQuery code responsible for ...

javascriptjqueryhtmlcsstwitter-bootstrap

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

javascriptjqueryhtmlcss

What is the best way to maintain the layout design when resizing the font?

Here is the HTML and CSS code snippet: .navi ul li { float:left; list-style-type: none; border-right: 1px solid #c0c0c0; margin:0px 0 0 0; } .navi ul li:last-child { border:none; } .navi ul li a { display:block; margin:0 20px; text-dec ...

htmlcss

Tips for displaying a navbar dropdown menu outside of its container

Before encountering this issue, I was struggling with making the navbar scroll on smaller screens when expanded. I found a helpful solution on Stack Overflow: responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does ...

htmlcsstwitter-bootstrapdrop-down-menuoverflow

PHP script incorrectly processes submit buttons in POST request

My PHP form is set up with multiple submit buttons for A/B processing. At times, the incorrect submit buttons are passed on even when they have not been clicked. The buttons in my form are structured as follows: <form method="post" action="url..." aut ...

phphtmlforms

When hovering over the main menu, the submenu appears hidden behind it

I am struggling with setting up a dropdown submenu on my website that uses a responsive Joomla template. The submenu always appears behind the main menu and slider, despite trying z-index and relative positioning. Can anyone help me figure out what I' ...

cssresponsive-designhoverz-indexsubmenu

The bottom section is not displaying properly at the conclusion of the div slide

The division ends without displaying the footer. <div id="fullpage"> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> content1 </div> <div class="section " id="section0"> c ...

jqueryhtmlcssfullpage.js

Using the tab key in Chrome or IE11 doesn't advance to the next field on forms

When tabbing through the form, I noticed that the password field is causing an issue. In Firefox, everything works fine, but in Chrome and IE11, the tab doesn't move forward or backward when reaching the password field. <tr> <td style ...

javascripthtml

Is it possible to add a click event to a table row that contains an input checkbox, without interfering with the ability to click the checkbox itself?

I have a table: <table> <tr> <td>Something</td> <td>Something Else</td> <td><input type='checkbox' value='clickme' id='yes'></td> </tr> When a user ...

javascriptjqueryhtmlcheckbox

Approaches to designing a reusuable Polymer component

As I start diving into the realm of Polymer web components, I am faced with the challenge of designing a product that can seamlessly integrate into multiple client applications or operate as a standalone application. This product happens to be a game with ...

htmlcsspolymerpolymer-1.0

Preventing window resize from affecting print screen content in Angular 8

I'm struggling with a print button feature in my Angular 8 project. When the window is resized, the content within the print window also resizes, which is not the behavior I want. I've tried a couple of solutions, but nothing has worked so far: 1 ...

javascripthtmlcssangulartypescript

Using img-fluid in CSS to dynamically resize database-supplied images, providing a consistent and optimized viewing

Currently, I am working on a bootstrap site that operates as a CMS. This allows users to select a layout and drag images into DIV containers (bootstrap columns) for the purpose of saving and displaying them on digital displays. Although most functionaliti ...

htmlcssbootstrap-4

Accordion - Conceal Previously Revealed Items

I'm currently working on finding a solution to hide all child sections that are open in my accordion when a new header is clicked. I've included a jsfiddle link to show what I have so far. Any suggestions on how to close the opened sections would ...

javascriptcss