Google Charts API Change Font

Question

I have basically developed my own script modifying this one and querying a google Sheet instead of building the chart using static data:

https://jsfiddle.net/hisham91/3rnd80m4/

This reference link does pretty the same: http://bl.ocks.org/battlehorse/1122276

I am able to set another background color for each chart adding the option backgroundColor but what I do not really get is to change the font color. So if for example I made the background black there is no way for me to have the text displayed in white.

 <html><head>
<title>Portal Counts</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="portalCount_test2.js"></script>
<script> 
 google.load('visualization', '1.1', {'packages':['controls','linechart']});
  google.setOnLoadCallback(initialize);

function initialize() {
  var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
  query.send(drawDashboard);
}
function drawDashboard(response) {
  var data = response.getDataTable();

  var filterPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter1_div',
    'options': {
      'filterColumnLabel': 'LinearOptimizationSheet',
      'fontcolor': '#ffffff',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
  });

   var testChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1_div',
    'options': {
      'title': 'Test Chart',
      'height': 400,
      'backgroundColor': '#000000',
      'colors': ['#00c2ff', '#28f428'],
        },
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
    dashboard.bind(filterPicker, testChart);
    dashboard.draw(data);

  } 
  </script>
</head>
<body bgcolor="#000000">
    <div align="center">
      <div id="dashboard1_div">
        <div id="filter1_div"></div>
        <div id="filter2_div"></div>    
        <div id="chart1_div" style="width:100%;"></div>  
      </div>
</div>   
    </div>
</body>
</html>

I tried every solution found here and on the web without success. Maybe soneone can help. Thanks in advance.

i am confused , which element of chart you want to change color, text or chart line ? — Z.R.T.
The Text is the chart element I am not able to manage. The chart lines and the chart background have been modified under options. I'll take a look at your snippet and give feedback asap. Thanks — twinge

Z.R.T. Z.R.T. · Accepted Answer · 2017-12-14T17:32:20

    <html><head>
<title>Portal Counts</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script> 
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(initialize);

function initialize() {
  var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
  query.send(drawDashboard);
}
function drawDashboard(response) {
  var data = response.getDataTable();

  var filterPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter1_div',
    'options': {
      'filterColumnLabel': 'LinearOptimizationSheet',
      'fontcolor': '#ffffff',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }   
    }
  });

   var testChart = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart1_div',
    'options': 
    {
        'title': 'Test Chart',
        'height': 400,
        'backgroundColor': '#000000',
        'colors': ['#00c2ff', '#28f428'],
        titleTextStyle: 
        {
            color: '#FFFFFF'
        },
        hAxis: 
        {
            textStyle: 
            {
                color: '#FFFFFF'
            },
            titleTextStyle: 
            {
                color: '#FFFFFF'
            }
        },
        vAxis: {
            textStyle: 
            {
                color: '#FFFFFF'
            },
            titleTextStyle: 
            {
                color: '#FFFFFF'
            }
        },
        legend: 
        {
            textStyle: 
            {
                color: '#FFFFFF'
            }
        }
    }
});

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
    dashboard.bind(filterPicker, testChart);
    dashboard.draw(data);
} 
  </script>
</head>
<body bgcolor="#000000">
    <div align="center">
      <div id="dashboard1_div">
        <div id="filter1_div"></div>
        <div id="filter2_div"></div>    
        <div id="chart1_div" style="width:100%;"></div>  
      </div>
</div>   
    </div>
</body>
</html>

use series for chart lines. for more information look through this link https://developers.google.com/chart/interactive/docs/lines

use haxis, vaxis, legend textStyle & titleTextStyle for side text (Google Visualization API font color)

another, extreme way, using f12 and changing element attribute value manually, for example: $('path').attr('stroke', 'blue') - to change lines color

UPDATE : i've removed my example and post your code after refactoring. check it up

Google Charts API Change Font

1 Answers