Google Chart Style

Question

I would like to know if it is possible to change the font color of the DEFAULT tooltips in the Google chart line.

I want to do this by changing the css style as follows:

<style>

    .google-visualization-tooltip { 

            width: 150px !important;
            border: none !important;
            border-radius: 21px !important;
            background-color: rgb(30, 50, 230)!important;
            position: absolute !important;
            box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important;
            background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important;
            font-size:  10px !important;

          }


    </style>

All these css lines work fine, but so far I have not found the font color option.

By the way, if I change the "tooltip.textStyle" parameter of the line chart API, the font color changes, but the CSS code mentioned above becomes unusable.

Thank!

Answer 1

I understood!

I needed to insert these lines in a style tag.

div.google-visualization-tooltip > ul > li > span {
color: #ff0000 !important;

Answer 2

There is a CSS file loaded by the current version of the diagrams:

https://www.gstatic.com/charts/45.1/css/core/tooltip.css

, Google, . ! , . :

.google-visualization-tooltip {
  border:none !important;
}

CSS css.

CSS?

chrome network. (, html "" )

Answer 3

, , ...

tooltip: { isHtml: true }

CSS. , Google Charts:

Answer 4

, .:)

, HTML, Google. CODE: tooltip: { isHtml: true } (,) , .:)

Now you can create tooltips using HTML and css. :)

/ CSS styling /

To create a tooltip window:

div.google-visualization-tooltip {}

To create a style, such as font size, color, etc.

div.google-visualization-tooltip > ul > li > span {}

Use !importantwhen necessary;)