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>
Anto Jurković
  • 11,188
  • 2
  • 29
  • 42
Sujal Ray
  • 21
  • 4

1 Answers1

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> 
}
Incognito
  • 2,964
  • 2
  • 27
  • 40
  • Chart title is created as SVG `text` element and it cannot be easily changed. See explanation [Background color of text in SVG](http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg). – Anto Jurković Feb 11 '14 at 16:26