Why is titleTextStyle not working with the title option in Google Charts?

Question

I'm creating a simple bar chart using Google Charts with the data fetched from Mysql Database. The chart is displayed properly but I'm unable to format the title of the graph. I have referred to many sites and I'm sure the syntax for 'titleTextStyle' is fine. But the title does not change with the options at all. Can somebody tell me where the problem lies ? I have attached my full code below. Thanks in advance.

<?php 

    include("toconnect.php");
    $result = mysqli_query($connection,"SELECT Product_name,COUNT(*)  FROM Items_Sold GROUP BY Product_name");

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Product Name', 'Frequency'],
          <?php 
            if(mysqli_num_rows($result) > 0){
                    while($row = mysqli_fetch_array($result))
                    {
                            echo "['".$row["Product_name"]."','".$row["COUNT(*)"]."'],";
                    }
            }
          ?>
        ]);

        var options = {
          chart: {
            title: "Frequently Bought items",titleTextStyle:{ color: '#007DB0',fontName: "Times",fontSize: 60,bold: true},
        }
        };
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;display:inline-block;"></div>
  </body>
</html>

Your options variable needs the chart object removed - so var options={title:'',titleTextStyle:{}}; — Professor Abronsius
alternatively you can move the titleTextStyle object literal outside of the chart object — Professor Abronsius

WhiteHat WhiteHat · Accepted Answer · 2020-04-15T11:25:48

you are working with a material chart...

google.charts.Bar

the list of features not working in Material charts can be found here...

Tracking Issue for Material Chart Feature Parity #2143

which includes...

titleTextStyle

try working with a classic chart instead...

google.visualization.ColumnChart

with option...

theme: 'material'

Why is titleTextStyle not working with the title option in Google Charts?

1 Answers