Click here to Skip to main content
15,848,580 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Font size is not increasing given 23 when I am using Google pie chart right side texts
tries with the below code
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work', 11],
                ['Eat', 2],
                ['Commute', 2],
                ['Watch TV', 2],
                ['Sleep', 7]
            ]);

            var options = {
                title: 'My Daily Activities',
                pieSliceTextStyle: { fontSize: 20 },
                vAxis: {
                   
                    textStyle: {
                        color: '#525b60',
                        fontSize: '23'
                    },
                },
                
            };
          
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 1000px; height: 600px;"></div>
  </body>
</html>


What I have tried:

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

        function drawChart() {

            var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work', 11],
                ['Eat', 2],
                ['Commute', 2],
                ['Watch TV', 2],
                ['Sleep', 7]
            ]);

            var options = {
                title: 'My Daily Activities',
                pieSliceTextStyle: { fontSize: 20 },
                vAxis: {
                   
                    textStyle: {
                        color: '#525b60',
                        fontSize: '23'
                    },
                },
                
            };
          
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 1000px; height: 600px;"></div>
  </body>
</html>
Posted
Updated 20-Jun-23 19:48pm

1 solution

For legend, you need to use the legend option like below to play with different styles:
JavaScript
var options = {
        title: 'My Daily Activities',
        pieSliceTextStyle: { fontSize: 20 },
        legend: { 
        	  textStyle: 
        		  { color: 'blue', 
                            fontSize: 20}
                  }
};

Refer: Visualization: Pie Chart  |  Charts  |  Google for Developers[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900