1

How can i apply background color in the title of piechart. Also the background color should be applied in the total area of the title. Following is the code that i have used..

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donut-1" style="width: 450px; height: 300px; float:left;">
</div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['', 111],
['4081.00', 252],
['724.00', 122],
['', 122],
['', 111],
['436.00', 111],
['1343.00', 111],
['', 111],
['', 111],
['270.00', 111]
]);
var options = {
backgroundColor: '#FFF',
pieHole: 0.5,
legend: 'none',
chartArea: { backgroundColor: { 'fill': '#F0F8FC', 'opacity': 100 }, left: 20, top: 30,  width:"90%",height:"85%" },              
 pieSliceText: 'label',
 title: "Total Chargeable Weight", titleTextStyle: { color: '#007DB0', fontSize: '16'}            
 };    
 var chart = new google.visualization.PieChart(document.getElementById('donut-1'));
 chart.draw(data, options);
 }
 </script>
1
  • Tag is as JavaScript as well.
    – vfioox
    Feb 11, 2014 at 12:16

1 Answer 1

0

You can specify a color of the text title to display for the chart, but you cannot specify a background fill color for the text (if that's what you're looking for)

The titleTextStyle configuration option (which is an object), lets you specify the following attributes

{ 
  color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> 
} 
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.