Change title color in google graphics

Asked

Viewed 389 times

0

I’m making a chart using google Harts and want to change the title color.

My chart settings are through 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 researched that it is through titleTextStyle.color that changes the color, but I am not able to implement using json.

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

1 answer

0


If you throw the dice in the same row yourself API distributes the colors of the bars and their respective titles, but if you want customize you can through the options of the method Draw():

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

Sources:

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>

<div id="chart_div"></div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.