Change title color in google charts chart

Question

Change title color in google charts chart

Navigation

#1 by (0 votes)

0

I'm making a chart using google charts and I want to change the title color.

My graphic settings are via a json file:

    'config' => array(
        'title' => 'Despesas',
        'width' => 400,
        'height' => 300,
        'backgroundColor' => 'transparent',
        'colors' => ['#AA8E26', 'grey', 'blue', 'orange'],
        'legend.alignment' => 'center',
        'is3D' => 'true',
        'titleTextStyle' => 'color', 'white',
    )
);

I searched through titleTextStyle.color that changes the color, but I'm not able to implement using json.

I also tried: 'titleTextStyle: {color:' = > 'white' '}',

php json google-charts

asked by anonymous 07.02.2018 / 14:28

1 answer

Can I call a function inside the Validators in a reactive form? Tests with MockMvc

score 0 · Accepted Answer

If you play the data on the same line the API distributes the colors of the bars and their respective titles, but if you want customize you can through the Draw ( ) :

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

Sources:

link
link

Example:

// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['rray', 3],
    ['Wallace', 1],
    ['Randrade', 1],
    ['Caique', 1],
  ]);

  // Set chart options
  var options = {
  'title':'Quem mais jogou CS no ano',
  'width':400,
  'height':300,
  'colors': ['#AA8E26', 'grey', 'blue', 'orange']
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new   google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>